Refactor to use addParams instead of addParam

addParam only adds one keyValue pair to url at a time and commits this to the url

addParams can add several keyValue pairs in a single call before commiting to url

packages/react-utils/src/hooks/tests/useSearchParams.test.tsx

@@ -26,9 +26,12 @@ test('useSimpleSearch works correctly', () => {
   } = renderHook(() => useSearchParams(), { wrapper });
 
   expect(current.sParams.toString()).toEqual('');
-  current.addParam('key', 'value');
-  current.addParam('key1', 'value1');
-  current.addParam('key2', 'value2');
+  const params = {
+    key: 'value',
+    key1: 'value1',
+    key2: 'value2',
+  };
+  current.addParams(params);
   expect(current.sParams.toString()).toEqual('key=value&key1=value1&key2=value2');
 
   //Test that when we call addParams to an existing key we replace it instead of appending
@@ -39,8 +42,7 @@ test('useSimpleSearch works correctly', () => {
     hash: '',
     key: expect.any(String),
     pathname: '/qr',
-    search:
-      '?key=value?key=value&key1=value1?key=value&key1=value1&key2=value2?key=value&key1=newValue3&key2=value2',
+    search: '?key=value&key1=newValue3&key2=value2',
     state: undefined,
   });
 
@@ -50,8 +52,7 @@ test('useSimpleSearch works correctly', () => {
     hash: '',
     key: expect.any(String),
     pathname: '/qr',
-    search:
-      '?key=value?key=value&key1=value1?key=value&key1=value1&key2=value2?key=value&key1=newValue3&key2=value2?key=value&key2=value2',
+    search: '?key=value&key2=value2',
     state: undefined,
   });
 });

packages/react-utils/src/hooks/useSearchParams.ts

@@ -1,5 +1,7 @@
 import { useHistory, useLocation, useRouteMatch } from 'react-router';
+import { deprecate } from 'util';
 
+export type ParamKeyValuePairs = Record<string, string | undefined>;
 /**
  * Commit search param changes directly to history.
  * TODO: - can be replaced with useSearchParams equivalent once we update to react-router v6.4.0
@@ -9,30 +11,40 @@ export function useSearchParams() {
   const history = useHistory();
   const match = useRouteMatch();
 
-  let nextUrl = match.path;
   const sParams = new URLSearchParams(location.search);
 
-  const addParam = (queryKey: string, value?: string) => {
+  const addParam = deprecate((queryKey: string, value?: string) => {
     if (!value) {
       return;
     }
+    const params = {
+      [queryKey]: value,
+    };
+    addParams(params);
+  }, 'addParam is now deprecated, and will be removed in the future, consider using addParams');
 
-    sParams.set(queryKey, value);
-    const newParams = sParams.toString();
-    nextUrl = ''.concat(nextUrl, '?').concat(newParams.toString());
+  const addParams = (keyValues: ParamKeyValuePairs) => {
+    let nextUrl = match.path;
+    for (const [key, value] of Object.entries(keyValues)) {
+      if (value) {
+        sParams.set(key, value);
+      }
+    }
+    nextUrl = ''.concat(nextUrl, '?').concat(sParams.toString());
     history.push(nextUrl);
   };
 
   const removeParam = (queryKey: string) => {
     sParams.delete(queryKey);
     const newParams = sParams.toString();
-    nextUrl = ''.concat(nextUrl, '?').concat(newParams.toString());
+    const nextUrl = ''.concat(match.path, '?').concat(newParams.toString());
     history.push(nextUrl);
   };
 
   return {
     sParams,
     addParam,
+    addParams,
     removeParam,
   };
 }