Pull id search key and open recordings to review item

Author: NickM-27

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { usePersistence } from "./use-persistence";
 
@@ -91,3 +91,30 @@ export function useHashState<S extends string>(): [
 
   return [hash, setHash];
 }
+
+export function useSearchEffect(
+  key: string,
+  callback: (value: string) => void,
+) {
+  const location = useLocation();
+
+  const param = useMemo(() => {
+    if (!location || !location.search || location.search.length == 0) {
+      return undefined;
+    }
+
+    const params = location.search.substring(1).split("&");
+
+    return params
+      .find((p) => p.includes("=") && p.split("=")[0] == key)
+      ?.split("=");
+  }, [location, key]);
+
+  useEffect(() => {
+    if (!param) {
+      return;
+    }
+
+    callback(param[1]);
+  }, [param, callback]);
+}

web/src/pages/Events.tsx

@@ -1,7 +1,7 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import useApiFilter from "@/hooks/use-api-filter";
 import { useTimezone } from "@/hooks/use-date-utils";
-import { useOverlayState } from "@/hooks/use-overlay-state";
+import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import { RecordingStartingPoint } from "@/types/record";
@@ -33,6 +33,24 @@ export default function Events() {
   const [recording, setRecording] =
     useOverlayState<RecordingStartingPoint>("recording");
 
+  useSearchEffect("id", (reviewId: string) => {
+    axios
+      .get(`review/${reviewId}`)
+      .then((resp) => {
+        if (resp.status == 200 && resp.data) {
+          setRecording(
+            {
+              camera: resp.data.camera,
+              startTime: resp.data.start_time,
+              severity: resp.data.severity,
+            },
+            true,
+          );
+        }
+      })
+      .catch(() => {});
+  });
+
   const [startTime, setStartTime] = useState<number>();
 
   useEffect(() => {