diff --git a/web/src/components/filter/CamerasFilterButton.tsx b/web/src/components/filter/CamerasFilterButton.tsx index dfe3fdaa1..1b36102b8 100644 --- a/web/src/components/filter/CamerasFilterButton.tsx +++ b/web/src/components/filter/CamerasFilterButton.tsx @@ -29,7 +29,10 @@ export function CamerasFilterButton({ }: CameraFilterButtonProps) { const [open, setOpen] = useState(false); const [currentCameras, setCurrentCameras] = useState( - selectedCameras, + selectedCameras === undefined ? [...allCameras] : selectedCameras, + ); + const [allCamerasSelected, setAllCamerasSelected] = useState( + selectedCameras === undefined, ); const buttonText = useMemo(() => { @@ -37,12 +40,18 @@ export function CamerasFilterButton({ return "Cameras"; } - if (!selectedCameras || selectedCameras.length == 0) { + if (allCamerasSelected) { return "All Cameras"; } - return `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`; - }, [selectedCameras]); + if (!currentCameras || currentCameras.length === 0) { + return "No cameras"; + } + + return `${currentCameras.includes("birdseye") ? currentCameras.length - 1 : currentCameras.length} Camera${ + currentCameras.length !== 1 ? "s" : "" + }`; + }, [allCamerasSelected, currentCameras]); const trigger = (