refactor: use custom hook instead of library

Tivix · Jul 18, 2024 · e24caf5 · e24caf5
1 parent 570a69c
commit e24caf5
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 50 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,7 +19,6 @@
     "@hookform/error-message": "^2.0.1",
     "clsx": "^2.1.0",
     "next": "14.1.3",
-    "next-query-params": "^5.0.0",
     "react": "^18",
     "react-dom": "^18",
     "react-easy-crop": "^5.0.7",
@@ -28,7 +27,6 @@
     "react-tooltip": "^5.26.3",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.2.2",
-    "use-query-params": "^2.2.1",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

diff --git a/frontend/src/components/pages/LadderDetails/LadderDetails.hooks.ts b/frontend/src/components/pages/LadderDetails/LadderDetails.hooks.ts
@@ -2,23 +2,24 @@ import { useEffect, useMemo } from 'react';
 import { LadderBand } from '@app/types/library';
 import { LadderDetailsHook } from './LadderDetails.interface';
 import { DEFAULT_STEP } from '../../modules/SideStepper';
-import { useQueryParam, NumberParam, withDefault } from 'use-query-params';
+import { useQueryParams } from '@app/hooks';
 
 export const useLadderDetails = (bands?: Record<string, LadderBand>): LadderDetailsHook => {
-  const [currentBand, setCurrentBand] = useQueryParam('band', withDefault(NumberParam, DEFAULT_STEP));
+  const [params, setParams] = useQueryParams({ band: DEFAULT_STEP.toString() });
 
+  const band = useMemo(() => (params.band ? parseInt(params.band) : DEFAULT_STEP), [params]);
   const maximumLadders = useMemo(() => (bands ? Object.keys(bands).length : 0), [bands]);
-  const tabsProps = useMemo(() => ({ activeLadder: currentBand, maximumLadders }), [currentBand, maximumLadders]);
+  const tabsProps = useMemo(() => ({ activeLadder: band, maximumLadders }), [band, maximumLadders]);
 
   useEffect(() => {
-    if (currentBand < 1 || currentBand > maximumLadders) {
-      setCurrentBand(DEFAULT_STEP);
+    if (!band || band < 1 || band > maximumLadders) {
+      setParams({ band: DEFAULT_STEP.toString() });
     }
-  }, [setCurrentBand, maximumLadders, currentBand]);
+  }, [setParams, maximumLadders, band]);
 
   return {
-    currentBand,
-    handleLadderChange: setCurrentBand,
+    currentBand: band,
+    handleLadderChange: (newBand: number) => setParams({ band: newBand.toString() }),
     tabsProps,
   };
 };
diff --git a/frontend/src/components/pages/LadderDetails/LadderDetails.tsx b/frontend/src/components/pages/LadderDetails/LadderDetails.tsx
@@ -6,10 +6,8 @@ import { LadderTabs } from '../../modules/LadderTabs';
 import { useLadderDetails } from './LadderDetails.hooks';
 import { LadderDetailsProps } from './LadderDetails.interface';
 import { LadderDetails } from './modules/LadderDetails';
-import NextAdapterApp from 'next-query-params/app';
-import { QueryParamProvider } from 'use-query-params';
 
-const LadderDetailsPage: React.FC<LadderDetailsProps> = ({ data, ladderSlug }) => {
+export const LadderDetailsPage: React.FC<LadderDetailsProps> = ({ data, ladderSlug }) => {
   const { currentBand, handleLadderChange, tabsProps } = useLadderDetails(data?.bands);
 
   if (!currentBand || !data || !data.bands[currentBand]) {
@@ -42,9 +40,3 @@ const LadderDetailsPage: React.FC<LadderDetailsProps> = ({ data, ladderSlug }) =
     </div>
   );
 };
-
-export const LadderDetailsWrapper: React.FC<LadderDetailsProps> = (props) => (
-  <QueryParamProvider adapter={NextAdapterApp}>
-    <LadderDetailsPage {...props} />
-  </QueryParamProvider>
-);
diff --git a/frontend/src/components/pages/LadderDetails/index.ts b/frontend/src/components/pages/LadderDetails/index.ts
@@ -1 +1 @@
-export { LadderDetailsWrapper as LadderDetails } from './LadderDetails';
+export { LadderDetailsPage as LadderDetails } from './LadderDetails';
diff --git a/frontend/src/components/pages/MySpace/MySpace.tsx b/frontend/src/components/pages/MySpace/MySpace.tsx
@@ -6,10 +6,8 @@ import { Tabs } from '@app/components/common/Tabs';
 import { useMySpace } from './MySpace.hooks';
 import { mySpaceTabs } from './contants';
 import { LadderTab } from './modules/LadderTab';
-import NextAdapterApp from 'next-query-params/app';
-import { QueryParamProvider } from 'use-query-params';
 
-const MySpace: React.FC<MySpaceProps> = ({ data }) => {
+export const MySpace: React.FC<MySpaceProps> = ({ data }) => {
   const { user, currentLevel, nextLevel, ladder } = data;
   const { currentTab, setCurrentTab } = useMySpace();
 
@@ -24,9 +22,3 @@ const MySpace: React.FC<MySpaceProps> = ({ data }) => {
     </div>
   );
 };
-
-export const MySpaceWrapper: React.FC<MySpaceProps> = (props) => (
-  <QueryParamProvider adapter={NextAdapterApp}>
-    <MySpace {...props} />
-  </QueryParamProvider>
-);
diff --git a/frontend/src/components/pages/MySpace/index.ts b/frontend/src/components/pages/MySpace/index.ts
@@ -1 +1 @@
-export { MySpaceWrapper as MySpace } from './MySpace';
+export { MySpace } from './MySpace';
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -3368,13 +3368,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-next-query-params@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/next-query-params/-/next-query-params-5.0.0.tgz#326b2e20481d5833d6e7272bd1d6bf3c114a3a5d"
-  integrity sha512-Zm9nc0QgrTMaQwGdbICcTDaYS4oRcXo628Ye6JQGdp/9JzlhzDpzcGRqciK0S62yAyE3b5ozFpgzY0gDUEbLtw==
-  dependencies:
-    tslib "^2.0.3"
-
 [email protected]:
   version "14.1.3"
   resolved "https://registry.yarnpkg.com/next/-/next-14.1.3.tgz#465bb21a1a6e703e776ca53ea71d05642867fdb5"
@@ -4042,11 +4035,6 @@ semver@^7.5.4, semver@^7.6.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
   integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
 
-serialize-query-params@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-2.0.2.tgz#598a3fb9e13f4ea1c1992fbd20231aa16b31db81"
-  integrity sha512-1chMo1dST4pFA9RDXAtF0Rbjaut4is7bzFbI1Z26IuMub68pNCILku85aYmeFhvnY//BXUPUhoRMjYcsT93J/Q==
-
 set-function-length@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -4435,7 +4423,7 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^2.0.1, tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.2:
+tslib@^2.0.1, tslib@^2.4.0, tslib@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
@@ -4595,13 +4583,6 @@ uri-js@^4.2.2, uri-js@^4.4.1:
   dependencies:
     punycode "^2.1.0"
 
-use-query-params@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-2.2.1.tgz#c558ab70706f319112fbccabf6867b9f904e947d"
-  integrity sha512-i6alcyLB8w9i3ZK3caNftdb+UnbfBRNPDnc89CNQWkGRmDrm/gfydHvMBfVsQJRq3NoHOM2dt/ceBWG2397v1Q==
-  dependencies:
-    serialize-query-params "^2.0.2"
-
 [email protected]:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"