feat: add page param to StateSyncURL component (#818)

* feat: add page param to StateSyncURL component * resolve comments Co-authored-by: Tuan Dao <[email protected]>
sajari · Jun 6, 2022 · 8d62648 · 8d62648
1 parent 207c477
commit 8d62648
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/.changeset/breezy-tigers-cough.md b/.changeset/breezy-tigers-cough.md
@@ -0,0 +1,5 @@
+---
+'@sajari/react-hooks': minor
+---
+
+Add page param into sync state watcher
diff --git a/packages/hooks/src/ContextProvider/index.tsx b/packages/hooks/src/ContextProvider/index.tsx
@@ -152,6 +152,7 @@ const ContextProvider: React.FC<SearchProviderValues> = ({
           { paramKey: 'sort', variableKey: 'sort' },
           { paramKey: autocompleteState.config.qParam, variableKey: autocompleteState.config.qParam },
           { paramKey: searchState.config.qParam, variableKey: searchState.config.qParam },
+          { paramKey: searchState.config.pageParam, variableKey: searchState.config.pageParam },
         ],
       });
     }

diff --git a/packages/hooks/src/URLStateSync/index.tsx b/packages/hooks/src/URLStateSync/index.tsx
@@ -1,7 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import { isNumber } from '@sajari/react-sdk-utils';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import { FilterBuilder, Range } from '../ContextProvider/controllers';
 import useFilter from '../useFilter';
+import usePagination from '../usePagination';
 import useQuery from '../useQuery';
 import useQueryParam from '../useQueryParam';
 import useRangeFilter from '../useRangeFilter';
@@ -120,10 +122,20 @@ const URLStateSync = (props: URLStateSyncProps = {}) => {
   const { delay = 500, replace = false, extendedParams = [] } = props;
   const {
     filters: filterBuilders = [],
-    config: { qParam = 'q' },
+    config: { qParam = 'q', pageParam = 'page' },
   } = useSearchContext();
   const { query, setQuery } = useQuery();
   const { sorting, setSorting } = useSorting();
+  const { page, setPage: setPageInner } = usePagination();
+  const setPage = useCallback(
+    (numStr: string) => {
+      const num = Number(numStr);
+      if (isNumber(num)) {
+        setPageInner(num);
+      }
+    },
+    [setPageInner],
+  );
   const { resultsPerPage, setResultsPerPage } = useResultsPerPage();
   const paramWatchers: QueryParam[] = [
     {
@@ -144,6 +156,13 @@ const URLStateSync = (props: URLStateSyncProps = {}) => {
         setResultsPerPage(Number(value) || 15);
       },
     },
+    {
+      key: pageParam,
+      // Use -1 to remove `page=1` if it's present in the param
+      defaultValue: -1,
+      value: page === 1 ? -1 : page,
+      callback: setPage,
+    },
     ...extendedParams.filter(({ key }) => ![qParam, 'sort', 'show'].includes(key)),
   ];
 

diff --git a/packages/hooks/src/usePagination/index.ts b/packages/hooks/src/usePagination/index.ts
@@ -5,10 +5,18 @@ import { UsePaginationResult } from './types';
 
 function usePagination(key: 'search' | 'autocomplete' = 'search'): UsePaginationResult {
   const context = useContext();
-  const { paginate } = context;
+  const {
+    search: { variables },
+    paginate,
+  } = context;
   const { response, config } = context[key];
   const queryValues = response?.getQueryValues();
-  const page = queryValues?.get(config.pageParam) ? parseInt(queryValues.get(config.pageParam) as string, 10) : 1;
+  let page = 1;
+  if (queryValues?.get(config.pageParam)) {
+    page = parseInt(queryValues.get(config.pageParam) as string, 10);
+  } else if (variables.get()[config.pageParam]) {
+    page = parseInt(variables.get()[config.pageParam], 10);
+  }
   const resultsPerPage = queryValues?.get(config.resultsPerPageParam)
     ? parseInt(queryValues?.get(config.resultsPerPageParam) as string, 10)
     : 15;