Allow customizing if search is preserved for overlay state

blakeblackshear · Dec 12, 2024 · 1a23fde · 1a23fde
1 parent 9f0d29f
commit 1a23fde
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx
@@ -5,6 +5,7 @@ import { usePersistence } from "./use-persistence";
 export function useOverlayState<S>(
   key: string,
   defaultValue: S | undefined = undefined,
+  preserveSearch: boolean = true,
 ): [S | undefined, (value: S, replace?: boolean) => void] {
   const location = useLocation();
   const navigate = useNavigate();
@@ -15,7 +16,7 @@ export function useOverlayState<S>(
     (value: S, replace: boolean = false) => {
       const newLocationState = { ...currentLocationState };
       newLocationState[key] = value;
-      navigate(location.pathname + location.search, {
+      navigate(location.pathname + (preserveSearch ? location.search : ""), {
         state: newLocationState,
         replace,
       });

diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
@@ -39,8 +39,11 @@ export default function Events() {
 
   const [showReviewed, setShowReviewed] = usePersistence("showReviewed", false);
 
-  const [recording, setRecording] =
-    useOverlayState<RecordingStartingPoint>("recording");
+  const [recording, setRecording] = useOverlayState<RecordingStartingPoint>(
+    "recording",
+    undefined,
+    false,
+  );
 
   useSearchEffect("id", (reviewId: string) => {
     axios
@@ -50,18 +53,20 @@ export default function Events() {
           const startTime = resp.data.start_time - REVIEW_PADDING;
           const date = new Date(startTime * 1000);
 
-          setReviewFilter({
-            after: getBeginningOfDayTimestamp(date),
-            before: getEndOfDayTimestamp(date),
-          });
-          setRecording(
-            {
-              camera: resp.data.camera,
-              startTime,
-              severity: resp.data.severity,
-            },
-            true,
-          );
+          setTimeout(() => {
+            setReviewFilter({
+              after: getBeginningOfDayTimestamp(date),
+              before: getEndOfDayTimestamp(date),
+            });
+            setRecording(
+              {
+                camera: resp.data.camera,
+                startTime,
+                severity: resp.data.severity,
+              },
+              true,
+            );
+          }, 100);
         }
       })
       .catch(() => {});