npm-pkg-hook 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +14 -0
- package/.eslintrc.json +108 -0
- package/.github/pull_request_template.md +18 -0
- package/.github/workflows/pepeline.yaml +30 -0
- package/README.md +1 -0
- package/jsconfig.json +28 -0
- package/next.config.js +129 -0
- package/package.json +33 -3
- package/src/cookies/index.ts +3 -0
- package/src/hooks/index.js +19 -0
- package/src/hooks/useAcumulateDate/index.js +16 -0
- package/src/hooks/useAnimationText/index.jsx +30 -0
- package/src/hooks/useCategoryStore/index.js +7 -0
- package/src/hooks/useCategoryStore/queries.js +16 -0
- package/src/hooks/useCheckbox/index.js +114 -0
- package/src/hooks/useClients/index.js +13 -0
- package/src/hooks/useClients/queries.js +118 -0
- package/src/hooks/useDrag/index.js +57 -0
- package/src/hooks/useEvent/index.js +33 -0
- package/src/hooks/useFetchJson/index.js +25 -0
- package/src/hooks/useFetchMoreInteractions/index.jsx +35 -0
- package/src/hooks/useFormTools/index.js +71 -0
- package/src/hooks/useFullScreenMode/index.js +66 -0
- package/src/hooks/useGetCategorieStore/index.js +21 -0
- package/src/hooks/useGetCategorieStore/queries.js +78 -0
- package/src/hooks/useGetProductsFood/index.js +46 -0
- package/src/hooks/useGetProductsFood/queriesStore.js +766 -0
- package/src/hooks/useHover/index.js +29 -0
- package/src/hooks/useInnerHtml/index.js +38 -0
- package/src/hooks/useIntersection/index.js +31 -0
- package/src/hooks/useKeypress/index.js +28 -0
- package/src/hooks/useLocalSorage/index.js +36 -0
- package/src/hooks/useLocationNavigate/index.js +54 -0
- package/src/hooks/useMobile/index.js +38 -0
- package/src/hooks/useRestaurant/index.js +19 -0
- package/src/hooks/useRestaurant/queries.js +70 -0
- package/src/hooks/useSales/index.js +489 -0
- package/src/hooks/useSales/queries.js +230 -0
- package/src/hooks/useSetState/index.js +24 -0
- package/src/hooks/useStore/index.js +18 -0
- package/src/hooks/useStore/queries.js +136 -0
- package/src/hooks/useTimeAgo/useTimeAgo.js +39 -0
- package/src/hooks/useUpdateCart/index.js +124 -0
- package/src/hooks/useUser/index.js +3 -0
- package/src/hooks/useWindowSize/index.js +38 -0
- package/src/index.jsx +1 -6
- package/src/utils/index.js +54 -0
package/.babelrc
ADDED
package/.eslintrc.json
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
{
|
|
2
|
+
"env": {
|
|
3
|
+
"browser": true,
|
|
4
|
+
"es2021": true
|
|
5
|
+
},
|
|
6
|
+
"extends": [
|
|
7
|
+
"eslint:recommended",
|
|
8
|
+
"plugin:react/recommended",
|
|
9
|
+
"plugin:@typescript-eslint/recommended"
|
|
10
|
+
],
|
|
11
|
+
"parser": "@typescript-eslint/parser",
|
|
12
|
+
"parserOptions": {
|
|
13
|
+
"ecmaFeatures": {
|
|
14
|
+
"jsx": true
|
|
15
|
+
},
|
|
16
|
+
"ecmaVersion": 12,
|
|
17
|
+
"sourceType": "module"
|
|
18
|
+
},
|
|
19
|
+
"plugins": [
|
|
20
|
+
"react",
|
|
21
|
+
"react-hooks",
|
|
22
|
+
"@typescript-eslint"
|
|
23
|
+
],
|
|
24
|
+
"settings": {
|
|
25
|
+
"react": {
|
|
26
|
+
"version": "detect"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"rules": {
|
|
30
|
+
// react hooks validations
|
|
31
|
+
"react-hooks/rules-of-hooks": "error",
|
|
32
|
+
// suppress errors for missing "import React" in files
|
|
33
|
+
"react/react-in-jsx-scope": "off",
|
|
34
|
+
// allow jsx syntax in js files (for next.js project)
|
|
35
|
+
"react/jsx-filename-extension": [
|
|
36
|
+
1,
|
|
37
|
+
{
|
|
38
|
+
"extensions": [
|
|
39
|
+
".js",
|
|
40
|
+
".jsx",
|
|
41
|
+
".ts",
|
|
42
|
+
".tsx"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
],
|
|
46
|
+
"quotes": [
|
|
47
|
+
2,
|
|
48
|
+
"single",
|
|
49
|
+
{
|
|
50
|
+
"avoidEscape": true,
|
|
51
|
+
"allowTemplateLiterals": true
|
|
52
|
+
}
|
|
53
|
+
],
|
|
54
|
+
"consistent-return": 2,
|
|
55
|
+
"indent": [
|
|
56
|
+
2,
|
|
57
|
+
2,
|
|
58
|
+
{
|
|
59
|
+
"SwitchCase": 1
|
|
60
|
+
}
|
|
61
|
+
],
|
|
62
|
+
"no-else-return": 1,
|
|
63
|
+
"semi": [
|
|
64
|
+
1,
|
|
65
|
+
"never"
|
|
66
|
+
],
|
|
67
|
+
"space-unary-ops": 2,
|
|
68
|
+
"comma-dangle": [
|
|
69
|
+
"error",
|
|
70
|
+
{
|
|
71
|
+
"arrays": "never",
|
|
72
|
+
"objects": "never",
|
|
73
|
+
"imports": "never",
|
|
74
|
+
"exports": "never",
|
|
75
|
+
"functions": "never"
|
|
76
|
+
}
|
|
77
|
+
],
|
|
78
|
+
"one-var": [
|
|
79
|
+
2,
|
|
80
|
+
"never"
|
|
81
|
+
],
|
|
82
|
+
"no-var": "error",
|
|
83
|
+
"arrow-body-style": [
|
|
84
|
+
"error",
|
|
85
|
+
"always"
|
|
86
|
+
],
|
|
87
|
+
"no-console": "error",
|
|
88
|
+
"no-multi-spaces": [
|
|
89
|
+
"error",
|
|
90
|
+
{
|
|
91
|
+
"exceptions": {
|
|
92
|
+
"BinaryExpression": true
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
],
|
|
96
|
+
"no-multiple-empty-lines": [
|
|
97
|
+
"error",
|
|
98
|
+
{
|
|
99
|
+
"max": 1,
|
|
100
|
+
"maxBOF": 1
|
|
101
|
+
}
|
|
102
|
+
],
|
|
103
|
+
"jsx-quotes": [
|
|
104
|
+
"error",
|
|
105
|
+
"prefer-single"
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
## What problem is this solving?
|
|
2
|
+
|
|
3
|
+
- [x] this is an example if you finish your work
|
|
4
|
+
|
|
5
|
+
## How should this be manually tested?
|
|
6
|
+
|
|
7
|
+
### Screenshots or example usage
|
|
8
|
+
|
|
9
|
+
## Types of changes
|
|
10
|
+
|
|
11
|
+
* [ ] Bug fix (a non-breaking change which fixes an issue)
|
|
12
|
+
* [ ] New feature (a non-breaking change which adds functionality)
|
|
13
|
+
* [ ] Breaking change (fix or feature that would cause existing functionality to change)
|
|
14
|
+
* [ ] Requires change to documentation, which has been updated accordingly.
|
|
15
|
+
|
|
16
|
+
## PR's related
|
|
17
|
+
|
|
18
|
+
- [x] Add the relation between pull request
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
name: Publish package to GitHub Packages
|
|
2
|
+
on:
|
|
3
|
+
push:
|
|
4
|
+
branches: [main]
|
|
5
|
+
pull_request:
|
|
6
|
+
branches: [develop]
|
|
7
|
+
types: [opened, synchronize]
|
|
8
|
+
release:
|
|
9
|
+
types: [created]
|
|
10
|
+
jobs:
|
|
11
|
+
build:
|
|
12
|
+
runs-on: ubuntu-latest
|
|
13
|
+
permissions:
|
|
14
|
+
contents: read
|
|
15
|
+
packages: write
|
|
16
|
+
steps:
|
|
17
|
+
- uses: actions/checkout@v3
|
|
18
|
+
# Setup .npmrc file to publish to GitHub Packages
|
|
19
|
+
- uses: actions/setup-node@v3
|
|
20
|
+
with:
|
|
21
|
+
node-version: '16.x'
|
|
22
|
+
registry-url: 'https://npm.pkg.github.com'
|
|
23
|
+
# Defaults to the user or organization that owns the workflow file
|
|
24
|
+
- run: npm install
|
|
25
|
+
- uses: JS-DevTools/npm-publish@v1
|
|
26
|
+
with:
|
|
27
|
+
token: ${{ secrets.NPM_TOKEN }}
|
|
28
|
+
# - run: npm publish
|
|
29
|
+
# env:
|
|
30
|
+
# NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# pkg-hook
|
package/jsconfig.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "es5",
|
|
4
|
+
"lib": [
|
|
5
|
+
"dom",
|
|
6
|
+
"dom.iterable"
|
|
7
|
+
],
|
|
8
|
+
"allowJs": true,
|
|
9
|
+
"skipLibCheck": true,
|
|
10
|
+
"strict": false,
|
|
11
|
+
"forceConsistentCasingInFileNames": true,
|
|
12
|
+
"noEmit": true,
|
|
13
|
+
"esModuleInterop": true,
|
|
14
|
+
"module": "commonjs",
|
|
15
|
+
"moduleResolution": "node",
|
|
16
|
+
"resolveJsonModule": true,
|
|
17
|
+
"isolatedModules": true,
|
|
18
|
+
"jsx": "preserve",
|
|
19
|
+
"incremental": true
|
|
20
|
+
},
|
|
21
|
+
"include": [
|
|
22
|
+
"**/*.ts",
|
|
23
|
+
"**/*.tsx"
|
|
24
|
+
],
|
|
25
|
+
"exclude": [
|
|
26
|
+
"node_modules"
|
|
27
|
+
]
|
|
28
|
+
}
|
package/next.config.js
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
/* eslint-disable consistent-return */
|
|
2
|
+
/** @type {import('next').NextConfig} */
|
|
3
|
+
const {
|
|
4
|
+
PHASE_DEVELOPMENT_SERVER,
|
|
5
|
+
PHASE_PRODUCTION_BUILD
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
|
7
|
+
} = require('next/constants')
|
|
8
|
+
const nextConfig = {
|
|
9
|
+
reactStrictMode: true
|
|
10
|
+
}
|
|
11
|
+
module.exports = (phase) => {
|
|
12
|
+
|
|
13
|
+
// npm run dev or next dev
|
|
14
|
+
const isDev = phase === PHASE_DEVELOPMENT_SERVER
|
|
15
|
+
// npm run build or next build
|
|
16
|
+
const isProd = phase === PHASE_PRODUCTION_BUILD && process.env.STAGING !== '1'
|
|
17
|
+
// npm run build or next build
|
|
18
|
+
const isStaging = phase === PHASE_PRODUCTION_BUILD && process.env.STAGING === '1'
|
|
19
|
+
const env = {
|
|
20
|
+
NAMEDB: (() => {
|
|
21
|
+
if (isDev) return 'app'
|
|
22
|
+
if (isProd) return 'railway'
|
|
23
|
+
})(),
|
|
24
|
+
USERDB: (() => {
|
|
25
|
+
if (isDev) return 'root'
|
|
26
|
+
if (isProd) return 'root'
|
|
27
|
+
})(),
|
|
28
|
+
PASSDB: (() => {
|
|
29
|
+
if (isDev) return ''
|
|
30
|
+
if (isProd) return '8jpgm70bhVjWIxEFbsrt'
|
|
31
|
+
})(),
|
|
32
|
+
HOSTDB: (() => {
|
|
33
|
+
if (isDev) return 'localhost'
|
|
34
|
+
if (isProd) return 'containers-us-west-65.railway.app'
|
|
35
|
+
})(),
|
|
36
|
+
DIALECTDB: 'mysql',
|
|
37
|
+
SESSION_NAME: 'vp.client',
|
|
38
|
+
SESSION_KEY: '12ba105efUaGjihGrh0LfJHTGIBGu6jXa',
|
|
39
|
+
URL_BASE: (() => {
|
|
40
|
+
if (isDev) return 'http://localhost:3001/app/'
|
|
41
|
+
if (isProd) return 'http://localhost:3001/app/'
|
|
42
|
+
// if (isStaging) return 'Title Stg'
|
|
43
|
+
})(),
|
|
44
|
+
MAIN_URL_BASE: (() => {
|
|
45
|
+
if (isDev) return 'http://localhost:3000/'
|
|
46
|
+
if (isProd) return 'http://localhost:3000/'
|
|
47
|
+
if (isStaging) return 'Title Stg'
|
|
48
|
+
})(),
|
|
49
|
+
// URL_BASE_WS
|
|
50
|
+
URL_ADMIN_SERVER: (() => {
|
|
51
|
+
if (isDev) return 'http://localhost:4000/'
|
|
52
|
+
// if (isDev) return 'https://server-image-food.herokuapp.com/'
|
|
53
|
+
if (isProd) return 'http://localhost:4000/'
|
|
54
|
+
})(),
|
|
55
|
+
// BANCOLOMBIA
|
|
56
|
+
BANCOLOMBIA_CLIENT_KEY: '55929729-85fe-4ffe-928d-0bd317817be4',
|
|
57
|
+
BANCOLOMBIA_SECRET_KEY: 'E1aM2bV2lD7vS8cH1qJ8oN0nD7eN0eP0rM8gU0cG2lL6uY5sO7',
|
|
58
|
+
JWT_EXPIRY: 333300,
|
|
59
|
+
REFRESH_TOKEN_EXPIRY: '604800',
|
|
60
|
+
AUTHO_USER_KEY: '12ba105efUaGjihGrh0LfJHTGIBGu6jXV',
|
|
61
|
+
ACCESS_SID_TWILIO: 'AC7c9ccbdb50400c504faf629e35aea8e4',
|
|
62
|
+
REACT_APP_API_KEY_GOOGLE_MAPS: 'AIzaSyAy0SY1G3OFqesWSTQRHJvzyJzNgURPoN8',
|
|
63
|
+
ACCESS_TOKEN_AUTH_TWILIO: '22e090d4d776ace7bb596ca77cba6b18'
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
const resolveUniqueReactForHooks = {
|
|
67
|
+
webpack: (config, options) => {
|
|
68
|
+
if (options.isServer) {
|
|
69
|
+
config.externals = ['react', ...config.externals]
|
|
70
|
+
}
|
|
71
|
+
// eslint-disable-next-line no-undef
|
|
72
|
+
config.resolve.alias.react = reactPath
|
|
73
|
+
return config
|
|
74
|
+
},
|
|
75
|
+
images: {
|
|
76
|
+
domains: ['http2.mlstatic.com', 'localhost', 'server-image-food.herokuapp.com']
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
const headers = () => {
|
|
80
|
+
return [
|
|
81
|
+
{
|
|
82
|
+
source: '/app',
|
|
83
|
+
headers: [
|
|
84
|
+
{
|
|
85
|
+
key: 'x-custom-header-1',
|
|
86
|
+
value: 'my custom header 1'
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
const redirects = () => {
|
|
93
|
+
return [
|
|
94
|
+
{
|
|
95
|
+
source: '/home',
|
|
96
|
+
destination: '/',
|
|
97
|
+
permanent: true
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
const basePath = '/app'
|
|
102
|
+
// puedes sobre escribir la ruta
|
|
103
|
+
const rewrites = () => {
|
|
104
|
+
return [
|
|
105
|
+
{
|
|
106
|
+
source: '/ab',
|
|
107
|
+
destination: '/about'
|
|
108
|
+
}
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
const assetPrefix = isProd ? 'https://cdn.mydomain.com' : ''
|
|
112
|
+
const images = {
|
|
113
|
+
domains: ['http2.mlstatic.com', 'localhost', 'server-image-food.herokuapp.com', '*']
|
|
114
|
+
}
|
|
115
|
+
return {
|
|
116
|
+
env,
|
|
117
|
+
swcMinify: false,
|
|
118
|
+
images,
|
|
119
|
+
headers,
|
|
120
|
+
optimizeFonts: false,
|
|
121
|
+
nextConfig,
|
|
122
|
+
// basePath,
|
|
123
|
+
rewrites,
|
|
124
|
+
redirects,
|
|
125
|
+
assetPrefix,
|
|
126
|
+
resolveUniqueReactForHooks
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
// module.exports = nextConfig
|
package/package.json
CHANGED
|
@@ -1,11 +1,41 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "npm-pkg-hook",
|
|
3
|
-
"
|
|
3
|
+
"repository": {
|
|
4
|
+
"type": "git",
|
|
5
|
+
"url": "https://github.com/Jesus123780/pkg-hook"
|
|
6
|
+
},
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"registry": "https://registry.npmjs.org/"
|
|
9
|
+
},
|
|
10
|
+
"version": "1.0.2",
|
|
4
11
|
"description": "description-pkg-hook",
|
|
5
12
|
"main": "/src/index.jsx",
|
|
6
13
|
"scripts": {
|
|
7
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
14
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
15
|
+
"rm": "rm -rf node_modules package-lock.json && npm i"
|
|
8
16
|
},
|
|
9
17
|
"author": "",
|
|
10
|
-
"license": "ISC"
|
|
18
|
+
"license": "ISC",
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"@apollo/client": "3.6.9",
|
|
21
|
+
"@typescript-eslint/parser": "^5.37.0",
|
|
22
|
+
"js-cookie": "3.0.1",
|
|
23
|
+
"moment": "^2.29.4",
|
|
24
|
+
"react": "18.1.0",
|
|
25
|
+
"react-dom": "18.1.0",
|
|
26
|
+
"react-query": "^3.39.2"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@babel/preset-env": "^7.19.1",
|
|
30
|
+
"@babel/preset-react": "^7.18.6",
|
|
31
|
+
"@babel/preset-typescript": "^7.18.6",
|
|
32
|
+
"@types/react": "^18.0.20",
|
|
33
|
+
"eslint": "^8.23.1",
|
|
34
|
+
"eslint-config-standard": "^17.0.0",
|
|
35
|
+
"eslint-plugin-import": "^2.26.0",
|
|
36
|
+
"eslint-plugin-n": "^15.2.5",
|
|
37
|
+
"eslint-plugin-promise": "^6.0.1",
|
|
38
|
+
"eslint-plugin-react": "^7.31.8",
|
|
39
|
+
"eslint-plugin-react-hooks": "^4.6.0"
|
|
40
|
+
}
|
|
11
41
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export * from './useCategoryStore'
|
|
2
|
+
export * from './useCheckbox'
|
|
3
|
+
export * from './useDrag'
|
|
4
|
+
export * from './useEvent'
|
|
5
|
+
export * from './useFetchJson'
|
|
6
|
+
export * from './useFormTools/index'
|
|
7
|
+
export * from './useGetCategorieStore'
|
|
8
|
+
export * from './useHover'
|
|
9
|
+
export * from './useKeypress'
|
|
10
|
+
export * from './useLocalSorage'
|
|
11
|
+
export * from './useLocationNavigate'
|
|
12
|
+
export * from './useMobile'
|
|
13
|
+
export * from './useRestaurant'
|
|
14
|
+
export * from './useSales'
|
|
15
|
+
export * from './useSetState'
|
|
16
|
+
export * from './useTimeAgo/useTimeAgo'
|
|
17
|
+
export * from './useUpdateCart'
|
|
18
|
+
export * from './useUser'
|
|
19
|
+
export * from './useClients'
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
|
|
2
|
+
const data = [
|
|
3
|
+
{ x: '2021-10-17T14:38:45.540Z', y: 2 }
|
|
4
|
+
]
|
|
5
|
+
export const get_date_parts = (iso_string) => {
|
|
6
|
+
const [year, month, day, hr, min, sec] = iso_string.split(/\D/g)
|
|
7
|
+
return { year, month, day, hr, min, sec }
|
|
8
|
+
}
|
|
9
|
+
function group_by_year(arr) {
|
|
10
|
+
let total = arr.reduce((a, b) => {
|
|
11
|
+
const { day } = get_date_parts(b.x)
|
|
12
|
+
return a + parseInt(day)
|
|
13
|
+
}, 0)
|
|
14
|
+
return total
|
|
15
|
+
}
|
|
16
|
+
const result = group_by_year(data)
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { useEffect, useState, useRef } from 'react'
|
|
2
|
+
|
|
3
|
+
const fullText =
|
|
4
|
+
' this is full text it\'ll be animated again! Writing a really huge senetence here so that I can see the animation happen. I know it\'s fast but that\'s how it goes.'
|
|
5
|
+
|
|
6
|
+
const useAnimatedText = textMessage => {
|
|
7
|
+
const fullTextRef = useRef(textMessage)
|
|
8
|
+
const [text, setText] = useState('')
|
|
9
|
+
const [index, setIndex] = useState(0)
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (index < fullText.length) {
|
|
12
|
+
window.requestAnimationFrame(() => {
|
|
13
|
+
// eslint-disable-next-line
|
|
14
|
+
setText(text => text + fullTextRef.current[index]);
|
|
15
|
+
setIndex(() => {return index + 1})
|
|
16
|
+
})
|
|
17
|
+
}
|
|
18
|
+
}, [index])
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
fullText.current = textMessage
|
|
21
|
+
}, [textMessage])
|
|
22
|
+
|
|
23
|
+
return text
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export default function TextHook() {
|
|
27
|
+
const text = useAnimatedText(fullText)
|
|
28
|
+
|
|
29
|
+
return <span>{text} </span>
|
|
30
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { useCallback, useState } from 'react'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Hook for managing multiple checkbox states
|
|
5
|
+
*
|
|
6
|
+
* @param {Array<String | Number>} elem - list of all elem
|
|
7
|
+
* @param {Array<String | Number>} selectedIds - list of selected elem (optional)
|
|
8
|
+
*
|
|
9
|
+
* @returns {Object}
|
|
10
|
+
* - checkboxStates (state object),
|
|
11
|
+
* - numSelectedItems (number),
|
|
12
|
+
* - handleChangeCheck (callback),
|
|
13
|
+
* - toggleAll (callback),
|
|
14
|
+
* - selectAll (callback),
|
|
15
|
+
* - clearAll (callback)
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
export const useCheckboxState = (elem, selectedIds = [], disabledIds = []) => {
|
|
19
|
+
const numTotalItems = elem?.length
|
|
20
|
+
const [checkedItems, setCheckedItems] = useState(new Set(selectedIds))
|
|
21
|
+
const [disabledItems, setDisabledItems] = useState(new Set(disabledIds))
|
|
22
|
+
|
|
23
|
+
const handleChangeCheck = useCallback((event, id) => {
|
|
24
|
+
const target = event.target
|
|
25
|
+
setCheckedItems(prevState => {
|
|
26
|
+
const newState = new Set(prevState)
|
|
27
|
+
if (target.checked) {
|
|
28
|
+
newState.add(id)
|
|
29
|
+
} else {
|
|
30
|
+
newState.delete(id)
|
|
31
|
+
}
|
|
32
|
+
return newState
|
|
33
|
+
})
|
|
34
|
+
}, [])
|
|
35
|
+
|
|
36
|
+
const setAll = useCallback(
|
|
37
|
+
isChecked => {
|
|
38
|
+
setCheckedItems(prevState => {
|
|
39
|
+
const newState = new Set(prevState)
|
|
40
|
+
for (const id of elem) {
|
|
41
|
+
if (disabledItems.has(id)) {
|
|
42
|
+
continue
|
|
43
|
+
}
|
|
44
|
+
if (isChecked) {
|
|
45
|
+
newState.add(id)
|
|
46
|
+
} else {
|
|
47
|
+
newState.delete(id)
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
return newState
|
|
51
|
+
})
|
|
52
|
+
},
|
|
53
|
+
[elem, disabledItems]
|
|
54
|
+
)
|
|
55
|
+
|
|
56
|
+
const selectAll = useCallback(() => {
|
|
57
|
+
if (checkedItems.size === numTotalItems) {
|
|
58
|
+
return
|
|
59
|
+
}
|
|
60
|
+
setAll(true)
|
|
61
|
+
}, [checkedItems, numTotalItems, setAll])
|
|
62
|
+
|
|
63
|
+
const clearAll = useCallback(() => {
|
|
64
|
+
if (checkedItems.size === 0) {
|
|
65
|
+
return
|
|
66
|
+
}
|
|
67
|
+
setAll(false)
|
|
68
|
+
}, [checkedItems, setAll])
|
|
69
|
+
|
|
70
|
+
const toggleAll = useCallback(() => {
|
|
71
|
+
const numDisabledAndChecked = [...disabledItems].reduce((count, id) => {
|
|
72
|
+
if (checkedItems.has(id)) {
|
|
73
|
+
return count + 1
|
|
74
|
+
}
|
|
75
|
+
return count
|
|
76
|
+
}, 0)
|
|
77
|
+
if (checkedItems.size - numDisabledAndChecked === 0) {
|
|
78
|
+
selectAll()
|
|
79
|
+
} else {
|
|
80
|
+
clearAll()
|
|
81
|
+
}
|
|
82
|
+
}, [checkedItems, disabledItems, selectAll, clearAll])
|
|
83
|
+
|
|
84
|
+
const enableCheckboxes = useCallback((...elem) => {
|
|
85
|
+
setDisabledItems(prevState => {
|
|
86
|
+
const newState = new Set(prevState)
|
|
87
|
+
for (const id of elem) {
|
|
88
|
+
newState.delete(id)
|
|
89
|
+
}
|
|
90
|
+
return newState
|
|
91
|
+
})
|
|
92
|
+
}, [])
|
|
93
|
+
|
|
94
|
+
const disableCheckboxes = useCallback((...elem) => {
|
|
95
|
+
setDisabledItems(prevState => {
|
|
96
|
+
const newState = new Set(prevState)
|
|
97
|
+
for (const id of elem) {
|
|
98
|
+
newState.add(id)
|
|
99
|
+
}
|
|
100
|
+
return newState
|
|
101
|
+
})
|
|
102
|
+
}, [])
|
|
103
|
+
|
|
104
|
+
return {
|
|
105
|
+
checkedItems,
|
|
106
|
+
disabledItems,
|
|
107
|
+
handleChangeCheck,
|
|
108
|
+
toggleAll,
|
|
109
|
+
selectAll,
|
|
110
|
+
clearAll,
|
|
111
|
+
enableCheckboxes,
|
|
112
|
+
disableCheckboxes
|
|
113
|
+
}
|
|
114
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { useQuery } from '@apollo/client'
|
|
2
|
+
import { useEffect, useState } from 'react'
|
|
3
|
+
import { GET_ALL_CLIENTS } from './queries'
|
|
4
|
+
|
|
5
|
+
export const useGetClients = () => {
|
|
6
|
+
const [clientes, setClients] = useState([])
|
|
7
|
+
const { loading, error } = useQuery(GET_ALL_CLIENTS, {
|
|
8
|
+
onCompleted: (data) => {
|
|
9
|
+
setClients(data)
|
|
10
|
+
}
|
|
11
|
+
})
|
|
12
|
+
return [clientes?.getAllClients, { loading, error }]
|
|
13
|
+
}
|