add backend filters

src/pages/MainPage.tsx

@@ -42,10 +42,21 @@ const MainPage = () => {
     if (!isProduction) console.log('Realmuser:', realmUser)
 
     const { data: cameras, isPending, isError, refetch } = useQuery({
-        queryKey: [frigateQueryKeys.getCamerasWHost],
+        queryKey: [frigateQueryKeys.getCamerasWHost, selectedHostId, searchQuery, selectedTags],
-        queryFn: frigateApi.getCamerasWHost
+        queryFn: () =>
+            frigateApi.getCamerasWHost({
+                name: searchQuery,            // filter by camera name
+                frigateHostId: selectedHostId,  // filter by host id
+                tagIds: selectedTags,            // filter by tag id(s)
+                // offset and limit can be added later for pagination
+            }),
     })
 
+    useEffect(() => {
+        setFilteredCameras(cameras || []);
+        setVisibleCameras([]); // reset visible cameras for pagination
+    }, [cameras]);
+
     useEffect(() => {
         const pageSize = 20; 
         if (inView && filteredCameras.length > visibleCameras.length) {
@@ -75,23 +86,6 @@ const MainPage = () => {
         return () => setRightChildren(null);
     }, []);
 
-    useEffect(() => {
-        if (!cameras) {
-            setFilteredCameras([])
-            return
-        }
-
-        const filterCameras = (camera: GetCameraWHostWConfig) => {
-            const matchesHostId = selectedHostId ? camera.frigateHost?.id === selectedHostId : true
-            const matchesSearchQuery = searchQuery ? camera.name.toLowerCase().includes(searchQuery.toLowerCase()) : true
-            const matchesTags = selectedTags ? selectedTags.length === 0 || camera.tags.some(tag => selectedTags.includes(tag.id)) : true
-            return matchesHostId && matchesSearchQuery && matchesTags
-        }
-
-        setFilteredCameras(cameras.filter(filterCameras))
-        setVisibleCameras([])
-    }, [searchQuery, cameras, selectedHostId, selectedTags])
-
 
     const debouncedHandleSearchQuery = useDebounce((value: string) => {
         mainStore.setSearchQuery(value, navigate);

src/services/frigate.proxy/frigate.api.ts

@@ -46,7 +46,16 @@ export const frigateApi = {
     getHost: (id: string) => instanceApi.get<GetFrigateHost>(`apiv1/frigate-hosts/${id}`).then(res => res.data),
     getCameraById: (cameraId: string) => instanceApi.get<GetCameraWHostWConfig>(`apiv1/cameras/${cameraId}`).then(res => res.data),
     getCamerasByHostId: (hostId: string) => instanceApi.get<GetCameraWHostWConfig[]>(`apiv1/cameras/host/${hostId}`).then(res => res.data),
-    getCamerasWHost: () => instanceApi.get<GetCameraWHostWConfig[]>(`apiv1/cameras`).then(res => res.data),
+    getCamerasWHost: (params: {
+        name?: string | null | undefined;
+        frigateHostId?: string | null | undefined;
+        tagIds?: string | string[];
+        offset?: number;
+        limit?: number;
+    } = {}) =>
+        instanceApi
+            .get<GetCameraWHostWConfig[]>('apiv1/cameras', { params })
+            .then(res => res.data),
     getCameraWHost: (id: string) => instanceApi.get<GetCameraWHostWConfig>(`apiv1/cameras/${id}`).then(res => res.data),
     putHosts: (hosts: PutFrigateHost[]) => instanceApi.put<GetFrigateHost[]>('apiv1/frigate-hosts', hosts).then(res => res.data),
     deleteHosts: (hosts: DeleteFrigateHost[]) => instanceApi.delete<GetFrigateHost[]>('apiv1/frigate-hosts', { data: hosts }).then(res => res.data),

src/shared/components/CamerasTransferList.tsx

@@ -18,7 +18,7 @@ const CamerasTransferList = ({
     const queryClient = useQueryClient()
     const { data: cameras, isPending, isError, refetch } = useQuery({
         queryKey: [frigateQueryKeys.getCamerasWHost, roleId],
-        queryFn: frigateApi.getCamerasWHost
+        queryFn: () => frigateApi.getCamerasWHost()
     })
 
     const [lists, setLists] = useState<[TransferListItem[], TransferListItem[]]>([[], []])