[nav-bug] fixing router bug

Signed-off-by: David Echelberger <[email protected]>

src/components/Pickers/DatePicker.tsx

@@ -17,14 +17,15 @@
 import { MenuItem, TextField } from '@mui/material';
 import React, { useContext, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { StringParam, useQueryParam } from 'use-query-params';
+import { useSearchParams } from 'react-router-dom';
 import { ApplicationContext } from '../../contexts/ApplicationContext';
 import { CreatedFilterOptions } from '../../interfaces';
 
 export const DatePicker: React.FC = () => {
   const { t } = useTranslation();
   const { createdFilter, setCreatedFilter } = useContext(ApplicationContext);
-  const [time, setTime] = useQueryParam('time', StringParam);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const time = searchParams.get('time');
 
   const createdQueryOptions = useMemo(
     () => [
@@ -56,8 +57,14 @@ export const DatePicker: React.FC = () => {
     }
 
     // use time from state and update the url
-    setTime(createdFilter, 'replaceIn');
-  }, [time, setTime, setCreatedFilter, createdQueryOptions, createdFilter]);
+    setSearchParams({ time: createdFilter });
+  }, [
+    time,
+    setSearchParams,
+    setCreatedFilter,
+    createdQueryOptions,
+    createdFilter,
+  ]);
 
   return (
     <>
@@ -67,7 +74,7 @@ export const DatePicker: React.FC = () => {
         variant="outlined"
         value={createdFilter}
         onChange={(event) => {
-          setTime(event.target.value as CreatedFilterOptions);
+          setSearchParams({ time: event.target.value as CreatedFilterOptions });
           setCreatedFilter(event.target.value as CreatedFilterOptions);
         }}
         sx={{ pr: 2 }}

src/components/Router.tsx

@@ -14,7 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import {
   BrowserRouter,
@@ -43,24 +43,6 @@ const queryClient = new QueryClient({
 });
 
 export const Router: () => JSX.Element = () => {
-  const RouteAdapter = ({ children }: any) => {
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    const adaptedHistory = useMemo(
-      () => ({
-        replace(location: any) {
-          navigate(location, { replace: true, state: location.state });
-        },
-        push(location: any) {
-          navigate(location, { replace: false, state: location.state });
-        },
-      }),
-      [navigate]
-    );
-    return children({ history: adaptedHistory, location });
-  };
-
   return (
     <QueryClientProvider client={queryClient}>
       <BrowserRouter basename={NAV_BASENAME}>
@@ -94,3 +76,27 @@ export function getAllRoutes(): RouteObject[] {
     MyNodeRoutes,
   ];
 }
+
+/**
+ * This is the main thing you need to use to adapt the react-router v6
+ * API to what use-query-params expects.
+ *
+ * Pass this as the `ReactRouterRoute` prop to QueryParamProvider.
+ */
+const RouteAdapter = ({ children }: any) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const adaptedHistory = React.useMemo(
+    () => ({
+      replace(location: any) {
+        navigate(location, { replace: true, state: location.state });
+      },
+      push(location: any) {
+        navigate(location, { replace: false, state: location.state });
+      },
+    }),
+    [navigate]
+  );
+  return children({ history: adaptedHistory, location });
+};