diff --git a/web/src/components/filter/SearchFilterGroup.tsx b/web/src/components/filter/SearchFilterGroup.tsx index 1702fcc2a..b96ed7dd7 100644 --- a/web/src/components/filter/SearchFilterGroup.tsx +++ b/web/src/components/filter/SearchFilterGroup.tsx @@ -24,9 +24,9 @@ import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog"; import SearchFilterDialog from "../overlay/dialog/SearchFilterDialog"; import { CalendarRangeFilterButton } from "./CalendarFilterButton"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; - import { useTranslation } from "react-i18next"; import { getTranslatedLabel } from "@/utils/i18n"; +import { useAllowedCameras } from "@/hooks/use-allowed-cameras"; type SearchFilterGroupProps = { className: string; @@ -46,6 +46,7 @@ export default function SearchFilterGroup({ const { data: config } = useSWR("config", { revalidateOnFocus: false, }); + const allowedCameras = useAllowedCameras(); const allLabels = useMemo(() => { if (filterList?.labels) { @@ -57,7 +58,9 @@ export default function SearchFilterGroup({ } const labels = new Set(); - const cameras = filter?.cameras || Object.keys(config.cameras); + const cameras = (filter?.cameras || allowedCameras).filter((camera) => + allowedCameras.includes(camera), + ); cameras.forEach((camera) => { if (camera == "birdseye") { @@ -87,7 +90,7 @@ export default function SearchFilterGroup({ }); return [...labels].sort(); - }, [config, filterList, filter]); + }, [config, filterList, filter, allowedCameras]); const allZones = useMemo(() => { if (filterList?.zones) { @@ -99,7 +102,9 @@ export default function SearchFilterGroup({ } const zones = new Set(); - const cameras = filter?.cameras || Object.keys(config.cameras); + const cameras = (filter?.cameras || allowedCameras).filter((camera) => + allowedCameras.includes(camera), + ); cameras.forEach((camera) => { if (camera == "birdseye") { @@ -118,16 +123,16 @@ export default function SearchFilterGroup({ }); return [...zones].sort(); - }, [config, filterList, filter]); + }, [config, filterList, filter, allowedCameras]); const filterValues = useMemo( () => ({ - cameras: Object.keys(config?.cameras || {}), + cameras: allowedCameras, labels: Object.values(allLabels || {}), zones: Object.values(allZones || {}), search_type: ["thumbnail", "description"] as SearchSource[], }), - [config, allLabels, allZones], + [allLabels, allZones, allowedCameras], ); const availableSortTypes = useMemo(() => { diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx index 6ca2a0f6d..2bb726bad 100644 --- a/web/src/views/search/SearchView.tsx +++ b/web/src/views/search/SearchView.tsx @@ -33,6 +33,7 @@ import { TooltipPortal } from "@radix-ui/react-tooltip"; import SearchActionGroup from "@/components/filter/SearchActionGroup"; import { Trans, useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; +import { useAllowedCameras } from "@/hooks/use-allowed-cameras"; type SearchViewProps = { search: string; @@ -96,6 +97,7 @@ export default function SearchView({ ); // suggestions values + const allowedCameras = useAllowedCameras(); const allLabels = useMemo(() => { if (!config) { @@ -103,7 +105,9 @@ export default function SearchView({ } const labels = new Set(); - const cameras = searchFilter?.cameras || Object.keys(config.cameras); + const cameras = (searchFilter?.cameras || allowedCameras).filter((camera) => + allowedCameras.includes(camera), + ); cameras.forEach((camera) => { if (camera == "birdseye") { @@ -128,7 +132,7 @@ export default function SearchView({ }); return [...labels].sort(); - }, [config, searchFilter]); + }, [config, searchFilter, allowedCameras]); const { data: allSubLabels } = useSWR("sub_labels"); const { data: allRecognizedLicensePlates } = useSWR( @@ -141,7 +145,9 @@ export default function SearchView({ } const zones = new Set(); - const cameras = searchFilter?.cameras || Object.keys(config.cameras); + const cameras = (searchFilter?.cameras || allowedCameras).filter((camera) => + allowedCameras.includes(camera), + ); cameras.forEach((camera) => { if (camera == "birdseye") { @@ -160,11 +166,11 @@ export default function SearchView({ }); return [...zones].sort(); - }, [config, searchFilter]); + }, [config, searchFilter, allowedCameras]); const suggestionsValues = useMemo( () => ({ - cameras: Object.keys(config?.cameras || {}), + cameras: allowedCameras, labels: Object.values(allLabels || {}), zones: Object.values(allZones || {}), sub_labels: allSubLabels, @@ -192,6 +198,7 @@ export default function SearchView({ allSubLabels, allRecognizedLicensePlates, searchFilter, + allowedCameras, ], );