From e7ec01450232c4c959f89c45e0a855e81c671c64 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 12 Jul 2024 10:07:01 -0500
Subject: [PATCH] Ensure detections are cleared when limit box is unchecked
 (#12412)

---
 web/src/views/settings/CameraSettingsView.tsx | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/web/src/views/settings/CameraSettingsView.tsx b/web/src/views/settings/CameraSettingsView.tsx
index d19cedde9..e99180a35 100644
--- a/web/src/views/settings/CameraSettingsView.tsx
+++ b/web/src/views/settings/CameraSettingsView.tsx
@@ -110,33 +110,36 @@ export default function CameraSettingsView({
       if (!isChecked) {
         form.reset({
           alerts_zones: watchedAlertsZones,
-          detections_zones:
-            cameraConfig?.review.detections.required_zones || [],
+          detections_zones: [],
         });
       }
       setChangedValue(true);
       setSelectDetections(isChecked as boolean);
     },
-    [watchedAlertsZones, cameraConfig, form],
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [watchedAlertsZones],
   );
 
   const saveToConfig = useCallback(
     async (
       { alerts_zones, detections_zones }: CameraReviewSettingsValueType, // values submitted via the form
     ) => {
-      const alertQueries = [...alerts_zones]
-        .map(
-          (zone) =>
-            `&cameras.${selectedCamera}.review.alerts.required_zones=${zone}`,
-        )
-        .join("");
+      const createQuery = (zones: string[], type: "alerts" | "detections") =>
+        zones.length
+          ? zones
+              .map(
+                (zone) =>
+                  `&cameras.${selectedCamera}.review.${type}.required_zones=${zone}`,
+              )
+              .join("")
+          : cameraConfig?.review[type]?.required_zones &&
+              cameraConfig?.review[type]?.required_zones.length > 0
+            ? `&cameras.${selectedCamera}.review.${type}.required_zones`
+            : "";
 
-      const detectionQueries = [...detections_zones]
-        .map(
-          (zone) =>
-            `&cameras.${selectedCamera}.review.detections.required_zones=${zone}`,
-        )
-        .join("");
+      const alertQueries = createQuery(alerts_zones, "alerts");
+      const detectionQueries = createQuery(detections_zones, "detections");
 
       axios
         .put(`config/set?${alertQueries}${detectionQueries}`, {
@@ -167,7 +170,7 @@ export default function CameraSettingsView({
           setIsLoading(false);
         });
     },
-    [updateConfig, setIsLoading, selectedCamera],
+    [updateConfig, setIsLoading, selectedCamera, cameraConfig],
   );
 
   const onCancel = useCallback(() => {
@@ -188,7 +191,9 @@ export default function CameraSettingsView({
     setSelectDetections(
       !!cameraConfig?.review.detections.required_zones?.length,
     );
-  }, [removeMessage, selectedCamera, setUnsavedChanges, form, cameraConfig]);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [removeMessage, selectedCamera, setUnsavedChanges, cameraConfig]);
 
   useEffect(() => {
     onCancel();