Use useSearchParams in useQueryParamState

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

packages/core/src/hooks/useQueryParamState.ts

@@ -17,7 +17,7 @@
 import { isEqual } from 'lodash';
 import qs from 'qs';
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useDebounce } from 'react-use';
 
 function stringify(queryParams: any): string {
@@ -59,39 +59,34 @@ type SetQueryParams<T> = (params: T) => void;
 export function useQueryParamState<T>(
   stateName: string,
 ): [T | undefined, SetQueryParams<T>] {
-  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchParamsString = searchParams.toString();
   const [queryParamState, setQueryParamState] = useState<T>(
-    extractState(location.search, stateName),
+    extractState(searchParamsString, stateName),
   );
 
   useEffect(() => {
-    const newState = extractState(location.search, stateName);
+    const newState = extractState(searchParamsString, stateName);
 
     setQueryParamState(oldState =>
       isEqual(newState, oldState) ? oldState : newState,
     );
-  }, [location, stateName]);
+  }, [searchParamsString, setQueryParamState, stateName]);
 
   useDebounce(
     () => {
       const queryString = joinQueryString(
-        location.search,
+        searchParamsString,
         stateName,
         queryParamState,
       );
 
-      if (location.search !== queryString) {
-        // We fallback to the history API, as navigate from react-router causes
-        // input elements to loose focus.
-        history.replaceState(
-          undefined,
-          document.title,
-          `${location.pathname}?${queryString}`,
-        );
+      if (searchParamsString !== queryString) {
+        setSearchParams(queryString, { replace: true });
       }
     },
     100,
-    [queryParamState],
+    [setSearchParams, queryParamState, searchParamsString, stateName],
   );
 
   return [queryParamState, setQueryParamState];