From 115b63cecd9b00163c65b2f854b1df67cb8e1bc3 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 2 Apr 2024 16:43:21 -0500
Subject: [PATCH] use separate state for switch

---
 web/src/components/filter/ReviewFilterGroup.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 1803cac81..4d2e1db8e 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 { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -631,16 +631,21 @@ function ShowMotionOnlyButton({
   motionOnly,
   setMotionOnly,
 }: ShowMotionOnlyButtonProps) {
+  const [motionOnlyButton, setMotionOnlyButton] = useState(motionOnly);
+
+  useEffect(
+    () => setMotionOnly(motionOnlyButton),
+    [motionOnlyButton, setMotionOnly],
+  );
+
   return (
     <>
       <div className="hidden md:inline-flex items-center justify-center whitespace-nowrap text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground h-9 rounded-md px-3 mx-1 cursor-pointer">
         <Switch
           className="ml-1"
           id="collapse-motion"
-          checked={motionOnly}
-          onCheckedChange={() => {
-            setMotionOnly(!motionOnly);
-          }}
+          checked={motionOnlyButton}
+          onCheckedChange={setMotionOnlyButton}
         />
         <Label
           className="mx-2 text-secondary-foreground cursor-pointer"