From 1a23fdeff2b772078d782b44bca8b85e5ad71625 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 12 Dec 2024 06:26:04 -0700
Subject: [PATCH] Allow customizing if search is preserved for overlay state

---
 web/src/hooks/use-overlay-state.tsx |  3 ++-
 web/src/pages/Events.tsx            | 33 +++++++++++++++++------------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx
index 841585b25d..7a43383d47 100644
--- 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
index 8c6f3cd381..d13cd6e10b 100644
--- 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(() => {});