fix: url param injection due to changing default resultsPerPage value (…

…#823)
sajari · Jun 22, 2022 · a004135 · a004135
1 parent eadf699
commit a004135
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 6 deletions.
diff --git a/.changeset/silver-scissors-mate.md b/.changeset/silver-scissors-mate.md
@@ -0,0 +1,6 @@
+---
+'@sajari/react-hooks': patch
+'@sajari/react-search-ui': patch
+---
+
+Fix using a different default `resultsPerPage` param causes URL param injection.
diff --git a/packages/hooks/src/ContextProvider/index.tsx b/packages/hooks/src/ContextProvider/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable import/named */
 /* eslint-disable @typescript-eslint/no-shadow */
-import { getSearchParams, isEmpty, isString } from '@sajari/react-sdk-utils';
+import { getSearchParams, isEmpty, isNumber, isString } from '@sajari/react-sdk-utils';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import URLStateSync from '../URLStateSync';
@@ -137,6 +137,9 @@ const ContextProvider: React.FC<SearchProviderValues> = ({
     Object.assign(autocompleteProp, { variables: autocompleteVariables.current });
   }
 
+  const resultsPerPageValue = parseInt(variables.current.get()[searchState.config.resultsPerPageParam], 10);
+  const defaultResultsPerPage = React.useRef(isNumber(resultsPerPageValue) ? resultsPerPageValue : 15);
+
   if (!configDone) {
     if (syncURLState) {
       const params = getSearchParams();
@@ -148,7 +151,11 @@ const ContextProvider: React.FC<SearchProviderValues> = ({
         variables: variables.current,
         params,
         mappingKeys: [
-          { paramKey: 'show', variableKey: 'resultsPerPage', defaultValue: '15' },
+          {
+            paramKey: 'show',
+            variableKey: searchState.config.resultsPerPageParam,
+            defaultValue: defaultResultsPerPage.current.toString(),
+          },
           { paramKey: 'sort', variableKey: 'sort' },
           { paramKey: autocompleteState.config.qParam, variableKey: autocompleteState.config.qParam },
           { paramKey: searchState.config.qParam, variableKey: searchState.config.qParam },
@@ -352,6 +359,7 @@ const ContextProvider: React.FC<SearchProviderValues> = ({
         resetFilters,
         fields: search.fields,
         searching,
+        defaultResultsPerPage: defaultResultsPerPage.current,
       },
       autocomplete: {
         ...state.autocomplete,

diff --git a/packages/hooks/src/ContextProvider/types.ts b/packages/hooks/src/ContextProvider/types.ts
@@ -26,6 +26,7 @@ export interface PipelineContextState {
   searching: boolean;
   filters?: (FilterBuilder | RangeFilterBuilder)[];
   redirects: Redirects;
+  defaultResultsPerPage: number;
 }
 
 export interface ProviderPipelineConfig {

diff --git a/packages/hooks/src/URLStateSync/index.tsx b/packages/hooks/src/URLStateSync/index.tsx
@@ -136,7 +136,7 @@ const URLStateSync = (props: URLStateSyncProps = {}) => {
     },
     [setPageInner],
   );
-  const { resultsPerPage, setResultsPerPage } = useResultsPerPage();
+  const { resultsPerPage, setResultsPerPage, defaultResultsPerPage } = useResultsPerPage();
   const paramWatchers: QueryParam[] = [
     {
       key: qParam,
@@ -151,9 +151,9 @@ const URLStateSync = (props: URLStateSyncProps = {}) => {
     {
       key: 'show',
       value: resultsPerPage,
-      defaultValue: 15,
+      defaultValue: defaultResultsPerPage,
       callback: (value) => {
-        setResultsPerPage(Number(value) || 15);
+        setResultsPerPage(Number(value) || defaultResultsPerPage);
       },
     },
     {

diff --git a/packages/hooks/src/useResultsPerPage/index.ts b/packages/hooks/src/useResultsPerPage/index.ts
@@ -10,6 +10,7 @@ function useResultsPerPage(): UseResultsPerPageResult {
       search,
       config: { resultsPerPageParam },
       variables,
+      defaultResultsPerPage,
     },
   } = useContext();
 
@@ -24,7 +25,8 @@ function useResultsPerPage(): UseResultsPerPageResult {
   const resultsPerPage = parseInt(variables.get()[resultsPerPageParam], 10);
 
   return {
-    resultsPerPage: isNumber(resultsPerPage) ? resultsPerPage : 15,
+    resultsPerPage: isNumber(resultsPerPage) ? resultsPerPage : defaultResultsPerPage,
+    defaultResultsPerPage,
     setResultsPerPage,
   };
 }

diff --git a/packages/hooks/src/useResultsPerPage/types.ts b/packages/hooks/src/useResultsPerPage/types.ts
@@ -1,4 +1,6 @@
 export interface UseResultsPerPageResult {
+  /** The default number of results per page */
+  defaultResultsPerPage: number;
   /** The number of results per page */
   resultsPerPage: number;
   /** Set the number of results per page */