fix: improve handling of project query state

Author: OliverDudgeon

components/navigation/Logo.tsx

@@ -10,7 +10,7 @@ export const Logo = () => {
   const { query } = useRouter();
 
   return (
-    <Link passHref href={{ pathname: "/", query: { project: query.project } }}>
+    <Link passHref href={{ pathname: "/", query: query.project ? { project: query.project } : {} }}>
       <LogoLink>
         <Image
           alt="Squonk (animal) logo with title text 'Squonk' and subtitle 'Data Manager'"

hooks/useBindProjectFromLSToQParams.ts

@@ -1,30 +1,39 @@
 import { useEffect } from "react";
 
+import compare from "just-compare";
 import { useRouter } from "next/router";
 
 import { PROJECT_LOCAL_STORAGE_KEY } from "../constants";
 import { getFromLocalStorage } from "../utils/localStorage";
 import type { ProjectLocalStoragePayload } from "./projectHooks";
 
-const PATHS_FOR_UPDATE = ["/datasets", "/project", "/executions", "/results"];
-
+/**
+ * Hook to synchronise the project local storage to query params.
+ * E.g. if the user visits example-ui.com/data-manager-ui/sub/path, the url will be *replaced* with
+ * example-ui.com/data-manager-ui/sub/path?project=project-blah-blah-blah-blah using the project ID
+ * loaded from local storage.
+ *
+ * @private
+ * It could be better to use a local storage event listener here but I find those unreliable
+ * If the project was stored server-side this could be done in a middleware but alas.
+ */
 export const useBindProjectFromLSToQParams = () => {
   const router = useRouter();
 
-  const { isReady, pathname, query, push } = router;
-
-  const shouldNavigate = PATHS_FOR_UPDATE.map((s) => pathname.startsWith(s)).some((b) => b);
+  const { isReady, pathname, query, replace } = router;
 
   useEffect(() => {
     const { projectId } = getFromLocalStorage<
       ProjectLocalStoragePayload | Record<string, undefined>
     >(PROJECT_LOCAL_STORAGE_KEY, {});
 
-    if (isReady && shouldNavigate && projectId) {
-      push({ pathname, query: { project: projectId, ...query } }, undefined, {
-        shallow: true,
-      });
+    if (isReady && projectId) {
+      const newQuery = { ...query, project: projectId };
+      if (!compare(query, newQuery)) {
+        replace({ pathname, query: newQuery }, undefined, {
+          shallow: true,
+        });
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isReady, pathname, replace, query]);
 };

package.json

@@ -62,6 +62,7 @@
     "formik-mui-lab": "1.0.0",
     "immer": "9.0.15",
     "jotai": "1.7.6",
+    "just-compare": "^2.2.2",
     "lodash-es": "4.17.21",
     "material-ui-popup-state": "4.0.1",
     "next": "12.2.4",