From f35cb39515240bec1fa7314aa01a0c0699e20fbf Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 13 Sep 2024 06:24:51 -0600
Subject: [PATCH] Fix filter args in events

---
 .../components/filter/CamerasFilterButton.tsx | 16 ++++++++++-
 .../components/filter/ReviewFilterGroup.tsx   | 14 +++++++++-
 web/src/pages/Events.tsx                      | 28 +++++++++++++++++--
 3 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/web/src/components/filter/CamerasFilterButton.tsx b/web/src/components/filter/CamerasFilterButton.tsx
index 1b36102b8..5a7372954 100644
--- a/web/src/components/filter/CamerasFilterButton.tsx
+++ b/web/src/components/filter/CamerasFilterButton.tsx
@@ -1,6 +1,6 @@
 import { Button } from "../ui/button";
 import { CameraGroupConfig } from "@/types/frigateConfig";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -53,6 +53,20 @@ export function CamerasFilterButton({
     }`;
   }, [allCamerasSelected, currentCameras]);
 
+  // ui
+
+  useEffect(
+    () => {
+      setCurrentCameras(
+        selectedCameras === undefined ? [...allCameras] : selectedCameras,
+      );
+      setAllCamerasSelected(selectedCameras === undefined);
+    },
+    // only refresh when state changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedCameras],
+  );
+
   const trigger = (
     <Button
       className="flex items-center gap-2 capitalize"
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 30c2212c7..ec77b8de6 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -2,7 +2,7 @@ import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
@@ -321,6 +321,18 @@ function GeneralFilterButton({
     selectedZones,
   );
 
+  // ui
+
+  useEffect(
+    () => {
+      setCurrentLabels(selectedLabels);
+      setCurrentZones(selectedZones);
+    },
+    // only refresh when state changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedLabels, selectedZones],
+  );
+
   const trigger = (
     <Button
       size="sm"
diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index cbdd246f3..bf9105131 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -1,5 +1,5 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { useApiFilterArgs } from "@/hooks/use-api-filter";
+import useApiFilter from "@/hooks/use-api-filter";
 import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { useTimezone } from "@/hooks/use-date-utils";
 import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
@@ -71,7 +71,31 @@ export default function Events() {
   // review filter
 
   const [reviewFilter, setReviewFilter, reviewSearchParams] =
-    useApiFilterArgs<ReviewFilter>();
+    useApiFilter<ReviewFilter>();
+
+  useSearchEffect("cameras", (cameras: string) => {
+    setReviewFilter({
+      ...reviewFilter,
+      cameras: cameras.includes(",") ? cameras.split(",") : [cameras],
+    });
+    return true;
+  });
+
+  useSearchEffect("labels", (labels: string) => {
+    setReviewFilter({
+      ...reviewFilter,
+      labels: labels.includes(",") ? labels.split(",") : [labels],
+    });
+    return true;
+  });
+
+  useSearchEffect("zones", (zones: string) => {
+    setReviewFilter({
+      ...reviewFilter,
+      zones: zones.includes(",") ? zones.split(",") : [zones],
+    });
+    return true;
+  });
 
   useSearchEffect("group", (reviewGroup) => {
     if (config && reviewGroup && reviewGroup != "default") {