Create ReactRouter7Adapter to use

apps/hpc-ftsadmin/src/libs/useQueryParams.ts

@@ -0,0 +1,44 @@
+import { useContext } from 'react';
+import {
+  useNavigate,
+  useLocation,
+  UNSAFE_DataRouterContext,
+  UNSAFE_LocationContext,
+} from 'react-router';
+import { type QueryParamAdapter, type PartialLocation } from 'use-query-params';
+
+export const ReactRouter7Adapter = ({
+  children,
+}: {
+  children: (adapter: QueryParamAdapter) => React.ReactElement | null;
+}) => {
+  // we need the navigator directly so we can access the current version
+  // of location in case of multiple updates within a render (e.g. #233)
+  // but we will limit our usage of it and have a backup to just use
+  // useLocation() output in case of some kind of breaking change we miss.
+  // see: https://github.com/remix-run/react-router/blob/f3d87dcc91fbd6fd646064b88b4be52c15114603/packages/react-router-dom/index.tsx#L113-L131
+  const { location: unsafeLocation } = useContext(UNSAFE_LocationContext);
+  const navigate = useNavigate();
+  const router = useContext(UNSAFE_DataRouterContext)?.router;
+  const location = useLocation();
+
+  const adapter: QueryParamAdapter = {
+    replace(location2: PartialLocation) {
+      navigate(location2.search || '?', {
+        replace: true,
+        state: location2.state,
+      });
+    },
+    push(location2: PartialLocation) {
+      navigate(location2.search || '?', {
+        replace: false,
+        state: location2.state,
+      });
+    },
+    get location() {
+      return router?.state?.location ?? unsafeLocation ?? location;
+    },
+  };
+
+  return children(adapter);
+};

apps/hpc-ftsadmin/src/main.tsx

@@ -14,7 +14,7 @@ import PageOrganization from './app/pages/organizations/organization';
 
 import { RouteParamsValidator } from './app/components/route-params-validator';
 import { QueryParamProvider } from 'use-query-params';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+import { ReactRouter7Adapter } from './libs/useQueryParams';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
@@ -26,7 +26,7 @@ const router = createBrowserRouter([
   {
     path: paths.home(),
     element: (
-      <QueryParamProvider adapter={ReactRouter6Adapter}>
+      <QueryParamProvider adapter={ReactRouter7Adapter}>
         <App />
       </QueryParamProvider>
     ),