diff --git a/package.json b/package.json index c99099f4..e4be0e6b 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "react-dom": "^18.3.1", "react-icons": "^5.2.1", "react-modal": "3.16.1", - "react-toastify": "10.0.5" + "react-toastify": "10.0.5", + "use-debounce": "^10.0.0" }, "devDependencies": { "@commitlint/cli": "^19.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 50923072..5bb68489 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,13 +13,13 @@ importers: version: 1.2.1 '@emotion/react': specifier: ^11.11.4 - version: 11.11.4(react@18.3.1) + version: 11.11.4(@types/react@18.2.78)(react@18.3.1) '@emotion/styled': specifier: ^11.11.5 - version: 11.11.5(@emotion/react@11.11.4)(react@18.3.1) + version: 11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1) '@floating-ui/react-dom': specifier: 2.0.9 - version: 2.0.9(react-dom@18.3.1)(react@18.3.1) + version: 2.0.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@fontsource/lexend-deca': specifier: 5.0.12 version: 5.0.12 @@ -28,10 +28,10 @@ importers: version: 5.0.17 '@muetab/react-sortable-hoc': specifier: ^2.0.1 - version: 2.0.1(prop-types@15.8.1)(react-dom@18.3.1)(react@18.3.1) + version: 2.0.1(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: 5.15.18 - version: 5.15.18(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react-dom@18.3.1)(react@18.3.1) + version: 5.15.18(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@sentry/react': specifier: ^8.2.1 version: 8.2.1(react@18.3.1) @@ -52,10 +52,10 @@ importers: version: 18.3.1 react-best-gradient-color-picker: specifier: ^3.0.7 - version: 3.0.7(react-dom@18.3.1)(react@18.3.1) + version: 3.0.7(@types/react@18.2.78)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-clock: specifier: 5.0.0 - version: 5.0.0(react-dom@18.3.1)(react@18.3.1) + version: 5.0.0(@types/react@18.2.78)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) @@ -64,10 +64,13 @@ importers: version: 5.2.1(react@18.3.1) react-modal: specifier: 3.16.1 - version: 3.16.1(react-dom@18.3.1)(react@18.3.1) + version: 3.16.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-toastify: specifier: 10.0.5 - version: 10.0.5(react-dom@18.3.1)(react@18.3.1) + version: 10.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + use-debounce: + specifier: ^10.0.0 + version: 10.0.0(react@18.3.1) devDependencies: '@commitlint/cli': specifier: ^19.3.0 @@ -80,7 +83,7 @@ importers: version: 0.0.2 '@vitejs/plugin-react-swc': specifier: ^3.6.0 - version: 3.6.0(vite@5.2.11) + version: 3.6.0(vite@5.2.11(@types/node@20.12.7)(sass@1.77.2)) adm-zip: specifier: ^0.5.12 version: 0.5.12 @@ -92,7 +95,7 @@ importers: version: 9.1.0(eslint@8.57.0) eslint-config-react-app: specifier: ^7.0.1 - version: 7.0.1(@babel/plugin-syntax-flow@7.24.1)(@babel/plugin-transform-react-jsx@7.23.4)(eslint@8.57.0)(typescript@5.4.5) + version: 7.0.1(@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.4))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.4))(eslint@8.57.0)(typescript@5.4.5) husky: specifier: ^9.0.11 version: 9.0.11 @@ -107,16 +110,16 @@ importers: version: 16.5.0(typescript@5.4.5) stylelint-config-standard-scss: specifier: ^13.1.0 - version: 13.1.0(postcss@8.4.38)(stylelint@16.5.0) + version: 13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) stylelint-scss: specifier: ^6.3.0 - version: 6.3.0(stylelint@16.5.0) + version: 6.3.0(stylelint@16.5.0(typescript@5.4.5)) vite: specifier: 5.2.11 version: 5.2.11(@types/node@20.12.7)(sass@1.77.2) vite-plugin-progress: specifier: ^0.0.7 - version: 0.0.7(vite@5.2.11) + version: 0.0.7(vite@5.2.11(@types/node@20.12.7)(sass@1.77.2)) packages: @@ -3360,6 +3363,12 @@ packages: uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + use-debounce@10.0.0: + resolution: {integrity: sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==} + engines: {node: '>= 16.0.0'} + peerDependencies: + react: '>=16.8.0' + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -4389,7 +4398,7 @@ snapshots: '@commitlint/types': 19.0.3 chalk: 5.3.0 cosmiconfig: 9.0.0(typescript@5.4.5) - cosmiconfig-typescript-loader: 5.0.0(@types/node@20.12.7)(cosmiconfig@9.0.0)(typescript@5.4.5) + cosmiconfig-typescript-loader: 5.0.0(@types/node@20.12.7)(cosmiconfig@9.0.0(typescript@5.4.5))(typescript@5.4.5) lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 lodash.uniq: 4.5.0 @@ -4447,7 +4456,7 @@ snapshots: '@csstools/css-tokenizer@2.2.4': {} - '@csstools/media-query-list-parser@2.1.9(@csstools/css-parser-algorithms@2.6.1)(@csstools/css-tokenizer@2.2.4)': + '@csstools/media-query-list-parser@2.1.9(@csstools/css-parser-algorithms@2.6.1(@csstools/css-tokenizer@2.2.4))(@csstools/css-tokenizer@2.2.4)': dependencies: '@csstools/css-parser-algorithms': 2.6.1(@csstools/css-tokenizer@2.2.4) '@csstools/css-tokenizer': 2.2.4 @@ -4492,7 +4501,7 @@ snapshots: '@emotion/memoize@0.8.1': {} - '@emotion/react@11.11.4(react@18.3.1)': + '@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.4 '@emotion/babel-plugin': 11.11.0 @@ -4503,6 +4512,8 @@ snapshots: '@emotion/weak-memoize': 0.3.1 hoist-non-react-statics: 3.3.2 react: 18.3.1 + optionalDependencies: + '@types/react': 18.2.78 '@emotion/serialize@1.1.4': dependencies: @@ -4514,16 +4525,18 @@ snapshots: '@emotion/sheet@1.2.2': {} - '@emotion/styled@11.11.5(@emotion/react@11.11.4)(react@18.3.1)': + '@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.4 '@emotion/babel-plugin': 11.11.0 '@emotion/is-prop-valid': 1.2.2 - '@emotion/react': 11.11.4(react@18.3.1) + '@emotion/react': 11.11.4(@types/react@18.2.78)(react@18.3.1) '@emotion/serialize': 1.1.4 '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1) '@emotion/utils': 1.2.1 react: 18.3.1 + optionalDependencies: + '@types/react': 18.2.78 '@emotion/unitless@0.8.1': {} @@ -4636,7 +4649,7 @@ snapshots: '@floating-ui/core': 1.6.0 '@floating-ui/utils': 0.2.1 - '@floating-ui/react-dom@2.0.9(react-dom@18.3.1)(react@18.3.1)': + '@floating-ui/react-dom@2.0.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@floating-ui/dom': 1.6.3 react: 18.3.1 @@ -4677,7 +4690,7 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.4.15 - '@muetab/react-sortable-hoc@2.0.1(prop-types@15.8.1)(react-dom@18.3.1)(react@18.3.1)': + '@muetab/react-sortable-hoc@2.0.1(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.4 invariant: 2.2.4 @@ -4685,30 +4698,30 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@mui/base@5.0.0-beta.40(react-dom@18.3.1)(react@18.3.1)': + '@mui/base@5.0.0-beta.40(@types/react@18.2.78)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.4 - '@floating-ui/react-dom': 2.0.9(react-dom@18.3.1)(react@18.3.1) - '@mui/types': 7.2.14 - '@mui/utils': 5.15.14(react@18.3.1) + '@floating-ui/react-dom': 2.0.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/types': 7.2.14(@types/react@18.2.78) + '@mui/utils': 5.15.14(@types/react@18.2.78)(react@18.3.1) '@popperjs/core': 2.11.8 clsx: 2.1.0 prop-types: 15.8.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.2.78 '@mui/core-downloads-tracker@5.15.18': {} - '@mui/material@5.15.18(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react-dom@18.3.1)(react@18.3.1)': + '@mui/material@5.15.18(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.4 - '@emotion/react': 11.11.4(react@18.3.1) - '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(react@18.3.1) - '@mui/base': 5.0.0-beta.40(react-dom@18.3.1)(react@18.3.1) + '@mui/base': 5.0.0-beta.40(@types/react@18.2.78)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/core-downloads-tracker': 5.15.18 - '@mui/system': 5.15.15(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1) - '@mui/types': 7.2.14 - '@mui/utils': 5.15.14(react@18.3.1) + '@mui/system': 5.15.15(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1) + '@mui/types': 7.2.14(@types/react@18.2.78) + '@mui/utils': 5.15.14(@types/react@18.2.78)(react@18.3.1) '@types/react-transition-group': 4.4.10 clsx: 2.1.0 csstype: 3.1.3 @@ -4716,48 +4729,61 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) react-is: 18.2.0 - react-transition-group: 4.4.5(react-dom@18.3.1)(react@18.3.1) + react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + optionalDependencies: + '@emotion/react': 11.11.4(@types/react@18.2.78)(react@18.3.1) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1) + '@types/react': 18.2.78 - '@mui/private-theming@5.15.14(react@18.3.1)': + '@mui/private-theming@5.15.14(@types/react@18.2.78)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.4 - '@mui/utils': 5.15.14(react@18.3.1) + '@mui/utils': 5.15.14(@types/react@18.2.78)(react@18.3.1) prop-types: 15.8.1 react: 18.3.1 + optionalDependencies: + '@types/react': 18.2.78 - '@mui/styled-engine@5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)': + '@mui/styled-engine@5.15.14(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.4 '@emotion/cache': 11.11.0 - '@emotion/react': 11.11.4(react@18.3.1) - '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(react@18.3.1) csstype: 3.1.3 prop-types: 15.8.1 react: 18.3.1 + optionalDependencies: + '@emotion/react': 11.11.4(@types/react@18.2.78)(react@18.3.1) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1) - '@mui/system@5.15.15(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)': + '@mui/system@5.15.15(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.4 - '@emotion/react': 11.11.4(react@18.3.1) - '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(react@18.3.1) - '@mui/private-theming': 5.15.14(react@18.3.1) - '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1) - '@mui/types': 7.2.14 - '@mui/utils': 5.15.14(react@18.3.1) + '@mui/private-theming': 5.15.14(@types/react@18.2.78)(react@18.3.1) + '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1))(react@18.3.1) + '@mui/types': 7.2.14(@types/react@18.2.78) + '@mui/utils': 5.15.14(@types/react@18.2.78)(react@18.3.1) clsx: 2.1.0 csstype: 3.1.3 prop-types: 15.8.1 react: 18.3.1 + optionalDependencies: + '@emotion/react': 11.11.4(@types/react@18.2.78)(react@18.3.1) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.2.78)(react@18.3.1))(@types/react@18.2.78)(react@18.3.1) + '@types/react': 18.2.78 - '@mui/types@7.2.14': {} + '@mui/types@7.2.14(@types/react@18.2.78)': + optionalDependencies: + '@types/react': 18.2.78 - '@mui/utils@5.15.14(react@18.3.1)': + '@mui/utils@5.15.14(@types/react@18.2.78)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.4 '@types/prop-types': 15.7.12 prop-types: 15.8.1 react: 18.3.1 react-is: 18.2.0 + optionalDependencies: + '@types/react': 18.2.78 '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1': dependencies: @@ -4969,7 +4995,7 @@ snapshots: '@types/semver@7.5.8': {} - '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.57.0)(typescript@5.4.5)': + '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)': dependencies: '@eslint-community/regexpp': 4.10.0 '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.4.5) @@ -4983,6 +5009,7 @@ snapshots: natural-compare-lite: 1.4.0 semver: 7.6.0 tsutils: 3.21.0(typescript@5.4.5) + optionalDependencies: typescript: 5.4.5 transitivePeerDependencies: - supports-color @@ -5002,6 +5029,7 @@ snapshots: '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.5) debug: 4.3.4 eslint: 8.57.0 + optionalDependencies: typescript: 5.4.5 transitivePeerDependencies: - supports-color @@ -5018,6 +5046,7 @@ snapshots: debug: 4.3.4 eslint: 8.57.0 tsutils: 3.21.0(typescript@5.4.5) + optionalDependencies: typescript: 5.4.5 transitivePeerDependencies: - supports-color @@ -5033,6 +5062,7 @@ snapshots: is-glob: 4.0.3 semver: 7.6.0 tsutils: 3.21.0(typescript@5.4.5) + optionalDependencies: typescript: 5.4.5 transitivePeerDependencies: - supports-color @@ -5059,7 +5089,7 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@vitejs/plugin-react-swc@3.6.0(vite@5.2.11)': + '@vitejs/plugin-react-swc@3.6.0(vite@5.2.11(@types/node@20.12.7)(sass@1.77.2))': dependencies: '@swc/core': 1.4.13 vite: 5.2.11(@types/node@20.12.7)(sass@1.77.2) @@ -5377,7 +5407,7 @@ snapshots: dependencies: browserslist: 4.23.0 - cosmiconfig-typescript-loader@5.0.0(@types/node@20.12.7)(cosmiconfig@9.0.0)(typescript@5.4.5): + cosmiconfig-typescript-loader@5.0.0(@types/node@20.12.7)(cosmiconfig@9.0.0(typescript@5.4.5))(typescript@5.4.5): dependencies: '@types/node': 20.12.7 cosmiconfig: 9.0.0(typescript@5.4.5) @@ -5398,6 +5428,7 @@ snapshots: import-fresh: 3.3.0 js-yaml: 4.1.0 parse-json: 5.2.0 + optionalDependencies: typescript: 5.4.5 cross-spawn@7.0.3: @@ -5644,23 +5675,24 @@ snapshots: dependencies: eslint: 8.57.0 - eslint-config-react-app@7.0.1(@babel/plugin-syntax-flow@7.24.1)(@babel/plugin-transform-react-jsx@7.23.4)(eslint@8.57.0)(typescript@5.4.5): + eslint-config-react-app@7.0.1(@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.4))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.4))(eslint@8.57.0)(typescript@5.4.5): dependencies: '@babel/core': 7.24.4 '@babel/eslint-parser': 7.24.1(@babel/core@7.24.4)(eslint@8.57.0) '@rushstack/eslint-patch': 1.10.2 - '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.4.5) babel-preset-react-app: 10.0.1 confusing-browser-globals: 1.0.11 eslint: 8.57.0 - eslint-plugin-flowtype: 8.0.3(@babel/plugin-syntax-flow@7.24.1)(@babel/plugin-transform-react-jsx@7.23.4)(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint@8.57.0) - eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.57.0)(typescript@5.4.5) + eslint-plugin-flowtype: 8.0.3(@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.4))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.4))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0) + eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-react: 7.34.1(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0) eslint-plugin-testing-library: 5.11.1(eslint@8.57.0)(typescript@5.4.5) + optionalDependencies: typescript: 5.4.5 transitivePeerDependencies: - '@babel/plugin-syntax-flow' @@ -5678,16 +5710,17 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0): dependencies: - '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.4.5) debug: 3.2.7 + optionalDependencies: + '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 transitivePeerDependencies: - supports-color - eslint-plugin-flowtype@8.0.3(@babel/plugin-syntax-flow@7.24.1)(@babel/plugin-transform-react-jsx@7.23.4)(eslint@8.57.0): + eslint-plugin-flowtype@8.0.3(@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.4))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.4))(eslint@8.57.0): dependencies: '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.4) '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4) @@ -5695,9 +5728,8 @@ snapshots: lodash: 4.17.21 string-natural-compare: 3.0.1 - eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0): dependencies: - '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.4.5) array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 array.prototype.flat: 1.3.2 @@ -5706,7 +5738,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -5716,16 +5748,19 @@ snapshots: object.values: 1.2.0 semver: 6.3.1 tsconfig-paths: 3.15.0 + optionalDependencies: + '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.4.5) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack - supports-color - eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.57.0)(typescript@5.4.5): + eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5): dependencies: - '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/experimental-utils': 5.62.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 + optionalDependencies: + '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) transitivePeerDependencies: - supports-color - typescript @@ -6541,21 +6576,25 @@ snapshots: dependencies: '@types/node': 10.17.60 - react-best-gradient-color-picker@3.0.7(react-dom@18.3.1)(react@18.3.1): + react-best-gradient-color-picker@3.0.7(@types/react@18.2.78)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: html2canvas: 1.4.1 lodash.throttle: 4.1.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) tinycolor2: 1.4.2 + optionalDependencies: + '@types/react': 18.2.78 - react-clock@5.0.0(react-dom@18.3.1)(react@18.3.1): + react-clock@5.0.0(@types/react@18.2.78)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@wojtekmaj/date-utils': 1.5.1 clsx: 2.1.0 get-user-locale: 2.3.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.2.78 react-dom@18.3.1(react@18.3.1): dependencies: @@ -6573,7 +6612,7 @@ snapshots: react-lifecycles-compat@3.0.4: {} - react-modal@3.16.1(react-dom@18.3.1)(react@18.3.1): + react-modal@3.16.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: exenv: 1.2.2 prop-types: 15.8.1 @@ -6582,13 +6621,13 @@ snapshots: react-lifecycles-compat: 3.0.4 warning: 4.0.3 - react-toastify@10.0.5(react-dom@18.3.1)(react@18.3.1): + react-toastify@10.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: clsx: 2.1.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-transition-group@4.4.5(react-dom@18.3.1)(react@18.3.1): + react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.24.4 dom-helpers: 5.2.1 @@ -6828,31 +6867,33 @@ snapshots: strip-json-comments@3.1.1: {} - stylelint-config-recommended-scss@14.0.0(postcss@8.4.38)(stylelint@16.5.0): + stylelint-config-recommended-scss@14.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)): dependencies: - postcss: 8.4.38 postcss-scss: 4.0.9(postcss@8.4.38) stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-recommended: 14.0.0(stylelint@16.5.0) - stylelint-scss: 6.3.0(stylelint@16.5.0) - - stylelint-config-recommended@14.0.0(stylelint@16.5.0): - dependencies: - stylelint: 16.5.0(typescript@5.4.5) - - stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.5.0): - dependencies: + stylelint-config-recommended: 14.0.0(stylelint@16.5.0(typescript@5.4.5)) + stylelint-scss: 6.3.0(stylelint@16.5.0(typescript@5.4.5)) + optionalDependencies: postcss: 8.4.38 - stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-recommended-scss: 14.0.0(postcss@8.4.38)(stylelint@16.5.0) - stylelint-config-standard: 36.0.0(stylelint@16.5.0) - stylelint-config-standard@36.0.0(stylelint@16.5.0): + stylelint-config-recommended@14.0.0(stylelint@16.5.0(typescript@5.4.5)): dependencies: stylelint: 16.5.0(typescript@5.4.5) - stylelint-config-recommended: 14.0.0(stylelint@16.5.0) - stylelint-scss@6.3.0(stylelint@16.5.0): + stylelint-config-standard-scss@13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)): + dependencies: + stylelint: 16.5.0(typescript@5.4.5) + stylelint-config-recommended-scss: 14.0.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) + stylelint-config-standard: 36.0.0(stylelint@16.5.0(typescript@5.4.5)) + optionalDependencies: + postcss: 8.4.38 + + stylelint-config-standard@36.0.0(stylelint@16.5.0(typescript@5.4.5)): + dependencies: + stylelint: 16.5.0(typescript@5.4.5) + stylelint-config-recommended: 14.0.0(stylelint@16.5.0(typescript@5.4.5)) + + stylelint-scss@6.3.0(stylelint@16.5.0(typescript@5.4.5)): dependencies: known-css-properties: 0.30.0 postcss-media-query-parser: 0.2.3 @@ -6865,7 +6906,7 @@ snapshots: dependencies: '@csstools/css-parser-algorithms': 2.6.1(@csstools/css-tokenizer@2.2.4) '@csstools/css-tokenizer': 2.2.4 - '@csstools/media-query-list-parser': 2.1.9(@csstools/css-parser-algorithms@2.6.1)(@csstools/css-tokenizer@2.2.4) + '@csstools/media-query-list-parser': 2.1.9(@csstools/css-parser-algorithms@2.6.1(@csstools/css-tokenizer@2.2.4))(@csstools/css-tokenizer@2.2.4) '@csstools/selector-specificity': 3.0.3(postcss-selector-parser@6.0.16) '@dual-bundle/import-meta-resolve': 4.0.0 balanced-match: 2.0.0 @@ -7037,13 +7078,17 @@ snapshots: dependencies: punycode: 2.3.1 + use-debounce@10.0.0(react@18.3.1): + dependencies: + react: 18.3.1 + util-deprecate@1.0.2: {} utrie@1.0.2: dependencies: base64-arraybuffer: 1.0.2 - vite-plugin-progress@0.0.7(vite@5.2.11): + vite-plugin-progress@0.0.7(vite@5.2.11(@types/node@20.12.7)(sass@1.77.2)): dependencies: picocolors: 1.0.0 progress: 2.0.3 @@ -7052,13 +7097,13 @@ snapshots: vite@5.2.11(@types/node@20.12.7)(sass@1.77.2): dependencies: - '@types/node': 20.12.7 esbuild: 0.20.2 postcss: 8.4.38 rollup: 4.14.2 - sass: 1.77.2 optionalDependencies: + '@types/node': 20.12.7 fsevents: 2.3.3 + sass: 1.77.2 warning@4.0.3: dependencies: diff --git a/src/features/search/Search.jsx b/src/features/search/Search.jsx index 80c3b2d4..2ea9d15f 100644 --- a/src/features/search/Search.jsx +++ b/src/features/search/Search.jsx @@ -1,6 +1,6 @@ import variables from 'config/variables'; -import { PureComponent, createRef } from 'react'; - +import { memo, createRef, useEffect, useState } from 'react'; +import { useDebouncedCallback } from 'use-debounce'; import { MdSearch, MdMic, MdScreenSearchDesktop } from 'react-icons/md'; import { BsGoogle } from 'react-icons/bs'; import { SiDuckduckgo, SiMicrosoftbing, SiBaidu } from 'react-icons/si'; @@ -14,26 +14,87 @@ import './search.scss'; import searchEngines from './search_engines.json'; -export default class Search extends PureComponent { - constructor() { - super(); - this.state = { - url: '', - query: '', - microphone: null, - suggestions: [], - searchDropdown: false, - classList: - localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons', +function Search() { + const [url, setURL] = useState(''); + const [query, setQuery] = useState(''); + const [microphone, setMicrophone] = useState(null); + const [suggestions, setSuggestions] = useState([]); + const [searchDropdown, setSearchDropdown] = useState(false); + const [classList] = useState(localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons'); + const [currentSearch, setCurrentSearch] = useState(''); + + + + useEffect(() => { + EventBus.on('refresh', (data) => { + if (data === 'search') { + init(); + } + }); + init(); + if (localStorage.getItem('searchFocus') === 'true') { + const element = document.getElementById('searchtext'); + if (element) { + element.focus(); + } + } + return () => { + EventBus.off('refresh'); }; - this.micIcon = createRef(); + }); + + let micIcon = createRef(); + + + const customText = variables + .getMessage('modals.main.settings.sections.search.custom') + .split(' ')[0]; + + function init() { + let _url; + let _query = 'q'; + + const setting = localStorage.getItem('searchEngine'); + const info = searchEngines.find((i) => i.settingsName === setting); + + if (info !== undefined) { + _url = info.url; + if (info.query) { + _query = info.query; + } + } + + if (setting === 'custom') { + const custom = localStorage.getItem('customSearchEngine'); + if (custom !== null) { + _url = custom; + } + } + + if (localStorage.getItem('voiceSearch') === 'true') { + setMicrophone(( + + )); + } + + setURL(_url); + setQuery(_query); + setCurrentSearch(info ? info.name : 'Custom'); } - startSpeechRecognition = () => { + + function startSpeechRecognition() { const voiceSearch = new window.webkitSpeechRecognition(); voiceSearch.start(); - this.micIcon.current.classList.add('micActive'); + micIcon.current.classList.add('micActive'); const searchText = document.getElementById('searchtext'); @@ -42,82 +103,44 @@ export default class Search extends PureComponent { }; voiceSearch.onend = () => { - this.micIcon.current.classList.remove('micActive'); + micIcon.current.classList.remove('micActive'); if (searchText.value === '') { return; } setTimeout(() => { variables.stats.postEvent('feature', 'Voice search'); - window.location.href = this.state.url + `?${this.state.query}=` + searchText.value; + window.location.href = url + `?${query}=` + searchText.value; }, 1000); }; }; - searchButton = (e) => { + function searchButton(e) { e.preventDefault(); const value = e.target.value || document.getElementById('searchtext').value || 'mue fast'; variables.stats.postEvent('feature', 'Search'); - window.location.href = this.state.url + `?${this.state.query}=` + value; + window.location.href = url + `?${query}=` + value; }; - async getSuggestions(input) { - window.setResults = (results) => { - window.searchResults = results; - }; + + async function getSuggestions(input) { + if (input === '') { + setSuggestions([]); + return; + } const results = await (await fetch(`${variables.constants.API_URL}/search/autocomplete?q=${input}`)).json(); try { - this.setState({ - suggestions: results.suggestions.splice(0, 5), - }); + setSuggestions(results.suggestions.splice(0, 5)); } catch (e) { + console.error(e) // ignore error if empty } } - init() { - let url, microphone; - let query = 'q'; - - const setting = localStorage.getItem('searchEngine'); - const info = searchEngines.find((i) => i.settingsName === setting); - - if (info !== undefined) { - url = info.url; - if (info.query) { - query = info.query; - } - } - - if (setting === 'custom') { - const custom = localStorage.getItem('customSearchEngine'); - if (custom !== null) { - url = custom; - } - } - - if (localStorage.getItem('voiceSearch') === 'true') { - microphone = ( - - ); - } - - this.setState({ - url, - query, - microphone, - currentSearch: info ? info.name : 'Custom', - }); - } + const getSuggestionsDebounced = useDebouncedCallback(getSuggestions, 100); + // const getSuggestionsDebounced = getSuggestions; /** * If the user selects a search engine from the dropdown menu, the function will set the state of the @@ -125,64 +148,42 @@ export default class Search extends PureComponent { * @param {string} name - The name of the search engine * @param {boolean} custom - If the search engine is custom */ - setSearch(name, custom) { - let url; - let query = 'q'; + function setSearch(name, custom) { + let _url; + let _query = 'q'; const info = searchEngines.find((i) => i.name === name); if (info !== undefined) { - url = info.url; + _url = info.url; if (info.query) { - query = info.query; + _query = info.query; } } if (custom) { const customSetting = localStorage.getItem('customSearchEngine'); if (customSetting !== null) { - url = customSetting; + _url = customSetting; } else { - url = this.state.url; + _url = url; } } else { localStorage.setItem('searchEngine', info.settingsName); } - this.setState({ - url, - query, - currentSearch: name, - searchDropdown: false, - }); + setURL(_url); + setQuery(_query); + setCurrentSearch(name); + setSearchDropdown(false); } - componentDidMount() { - EventBus.on('refresh', (data) => { - if (data === 'search') { - this.init(); - } - }); - - this.init(); - - if (localStorage.getItem('searchFocus') === 'true') { - const element = document.getElementById('searchtext'); - if (element) { - element.focus(); - } - } - } - - componentWillUnmount() { - EventBus.off('refresh'); - } /** * Gets the icon for the search engine dropdown. * @param {string} name - The name of the search engine. * @returns A React component. */ - getSearchDropdownicon(name) { + function getSearchDropdownicon(name) { switch (name) { case 'Google': return ; @@ -202,84 +203,82 @@ export default class Search extends PureComponent { } } - render() { - const customText = variables - .getMessage('modals.main.settings.sections.search.custom') - .split(' ')[0]; - - return ( -
-
-
- {localStorage.getItem('searchDropdown') === 'true' ? ( - - - - ) : ( - '' - )} + return ( +
+
+
+ {localStorage.getItem('searchDropdown') === 'true' ? ( - {this.state.microphone} + + + ) : ( + '' + )} + + {microphone} + +
+
+
+ +
- -
- - - -
- this.getSuggestions(e)} - onClick={this.searchButton} - /> - -
-
- {localStorage.getItem('searchDropdown') === 'true' && - this.state.searchDropdown === true && ( -
- {searchEngines.map(({ name }, key) => { - return ( - this.setSearch(name)} - key={key} - > - {name} - - ); - })} - this.setSearch(customText, 'custom')} - > - {customText} - -
- )} -
+ getSuggestionsDebounced(e)} + onClick={searchButton} + /> +
- ); - } +
+ {localStorage.getItem('searchDropdown') === 'true' && + searchDropdown === true && ( +
+ {searchEngines.map(({ name }, key) => { + return ( + setSearch(name)} + key={key} + > + {name} + + ); + })} + setSearch(customText, 'custom')} + > + {customText} + +
+ )} +
+
+ ); } + + +const MemoizedSearch = memo(Search); +export { MemoizedSearch as default, MemoizedSearch as Search };