Persist selected camera group for live (#10448)

* Persist camera group selected

* Cleanup

web/src/hooks/use-overlay-state.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import { usePersistence } from "./use-persistence";
 
 export default function useOverlayState<S extends string>(
   key: string,
@@ -27,3 +28,38 @@ export default function useOverlayState<S extends string>(
 
   return [overlayStateValue ?? defaultValue, setOverlayStateValue];
 }
+
+export function usePersistedOverlayState<S extends string>(
+  key: string,
+  defaultValue: S | undefined = undefined,
+): [S | undefined, (value: S | undefined, replace?: boolean) => void] {
+  const [persistedValue, setPersistedValue] = usePersistence<S>(
+    key,
+    defaultValue,
+  );
+  const location = useLocation();
+  const navigate = useNavigate();
+  const currentLocationState = location.state;
+
+  const setOverlayStateValue = useCallback(
+    (value: S | undefined, replace: boolean = false) => {
+      setPersistedValue(value);
+      const newLocationState = { ...currentLocationState };
+      newLocationState[key] = value;
+      navigate(location.pathname, { state: newLocationState, replace });
+    },
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [key, navigate],
+  );
+
+  const overlayStateValue = useMemo<S | undefined>(
+    () => location.state && location.state[key],
+    [location, key],
+  );
+
+  return [
+    overlayStateValue ?? persistedValue ?? defaultValue,
+    setOverlayStateValue,
+  ];
+}

web/src/hooks/use-persistence.ts

@@ -3,7 +3,7 @@ import { get as getData, set as setData } from "idb-keyval";
 
 type usePersistenceReturn<S> = [
   value: S | undefined,
-  setValue: (value: S) => void,
+  setValue: (value: S | undefined) => void,
   loaded: boolean,
 ];
 
@@ -15,7 +15,7 @@ export function usePersistence<S>(
   const [loaded, setLoaded] = useState<boolean>(false);
 
   const setValue = useCallback(
-    (value: S) => {
+    (value: S | undefined) => {
       setInternalValue(value);
       async function update() {
         await setData(key, value);