diff --git a/src/hooks/useAdminRole.ts b/src/hooks/useAdminRole.ts index 4c263b0..0c7e81e 100644 --- a/src/hooks/useAdminRole.ts +++ b/src/hooks/useAdminRole.ts @@ -8,10 +8,11 @@ import { getConfigSchema } from "../services/frigate.proxy/frigate.schema"; export interface AdminRole { isLoading: boolean isAdmin: boolean + isError: boolean } export const useAdminRole = (): AdminRole => { - const { data: adminConfig, isError, isLoading } = useQuery({ + const { data: adminConfig, isError, isLoading, error } = useQuery({ queryKey: [frigateQueryKeys.getAdminRole], queryFn: frigateApi.getAdminRole, staleTime: 1000 * 60 * 60, @@ -21,9 +22,9 @@ export const useAdminRole = (): AdminRole => { const roles = useRealmAccessRoles() const [isAdmin, setIsAdmin] = useState(false) - if (isError) setIsAdmin(false) - useEffect(() => { + if (isLoading) return + const parsedConfig = getConfigSchema.safeParse(adminConfig) if (!isProduction) console.log('useAdminRole parsedConfig success:', parsedConfig.success) if (!parsedConfig.success) { @@ -38,5 +39,12 @@ export const useAdminRole = (): AdminRole => { } }, [roles, adminConfig, isLoading]) - return { isLoading, isAdmin } + useEffect(() => { + if (isError) { + console.error("useAdminRole error: ", error.message); + setIsAdmin(false); + } + }, [isError]); + + return { isLoading, isAdmin, isError } } \ No newline at end of file diff --git a/src/pages/AccessSettingsPage.tsx b/src/pages/AccessSettingsPage.tsx index 0c640f1..cfbc785 100644 --- a/src/pages/AccessSettingsPage.tsx +++ b/src/pages/AccessSettingsPage.tsx @@ -20,7 +20,7 @@ const AccessSettings = () => { queryKey: [frigateQueryKeys.getRoles], queryFn: frigateApi.getRoles }) - const { isAdmin, isLoading: adminLoading } = useAdminRole() + const { isAdmin, isLoading: adminLoading, isError: adminError } = useAdminRole() @@ -29,7 +29,7 @@ const AccessSettings = () => { if (isPending || adminLoading) return - if (isError || !data) return + if (isError || adminError || !data) return if (!isAdmin) return const handleSelectRole = (value: string) => { diff --git a/src/pages/EditCameraPage.tsx b/src/pages/EditCameraPage.tsx index 5dc44e3..5b479db 100644 --- a/src/pages/EditCameraPage.tsx +++ b/src/pages/EditCameraPage.tsx @@ -101,11 +101,11 @@ const EditCameraPage = () => { }, }) - const { isAdmin, isLoading: adminLoading } = useAdminRole() + const { isAdmin, isLoading: adminLoading, isError: adminError } = useAdminRole() if (isPending || adminLoading) return if (!isAdmin) return - if (isError) return + if (isError || adminError) return const hostName = mapHostToHostname(camera.frigateHost) diff --git a/src/pages/FrigateHostsPage.tsx b/src/pages/FrigateHostsPage.tsx index 7420b98..729a432 100644 --- a/src/pages/FrigateHostsPage.tsx +++ b/src/pages/FrigateHostsPage.tsx @@ -24,7 +24,7 @@ const FrigateHostsPage = () => { queryFn: frigateApi.getHosts, }) - const { isAdmin, isLoading: adminLoading } = useAdminRole() + const { isAdmin, isLoading: adminLoading, isError: adminError } = useAdminRole() const [pageData, setPageData] = useState(data) useEffect(() => { @@ -90,7 +90,7 @@ const FrigateHostsPage = () => { if (hostsPending || adminLoading) return if (!isAdmin) return - if (hostsError) return + if (hostsError || adminError) return if (!pageData) return Empty server response return ( diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 30b6eeb..393a77b 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -43,55 +43,55 @@ const MainPage = () => { const pageSize = 20; - const { - data, - isLoading, - isError, - fetchNextPage, - hasNextPage, - isFetching, - isFetchingNextPage, - refetch, - } = useInfiniteQuery({ - queryKey: [frigateQueryKeys.getCamerasWHost, selectedHostId, searchQuery, selectedTags], - queryFn: ({ pageParam = 0 }) => - // Pass pagination parameters to the backend - frigateApi.getCamerasWHost({ - name: searchQuery, - frigateHostId: selectedHostId, - tagIds: selectedTags, - offset: pageParam, - limit: pageSize, - }), - getNextPageParam: (lastPage, pages) => { - // If last page size is less than pageSize, no more pages - if (lastPage.length < pageSize) return undefined; - // Next page offset is pages.length * pageSize - return pages.length * pageSize; - }, - initialPageParam: 0, - }); + // const { + // data, + // isLoading, + // isError, + // fetchNextPage, + // hasNextPage, + // isFetching, + // isFetchingNextPage, + // refetch, + // } = useInfiniteQuery({ + // queryKey: [frigateQueryKeys.getCamerasWHost, selectedHostId, searchQuery, selectedTags], + // queryFn: ({ pageParam = 0 }) => + // // Pass pagination parameters to the backend + // frigateApi.getCamerasWHost({ + // name: searchQuery, + // frigateHostId: selectedHostId, + // tagIds: selectedTags, + // offset: pageParam, + // limit: pageSize, + // }), + // getNextPageParam: (lastPage, pages) => { + // // If last page size is less than pageSize, no more pages + // if (lastPage.length < pageSize) return undefined; + // // Next page offset is pages.length * pageSize + // return pages.length * pageSize; + // }, + // initialPageParam: 0, + // }); - const cameras: GetCameraWHostWConfig[] = data?.pages.flat() || []; - // const cameras: GetCameraWHostWConfig[] = []; + // const cameras: GetCameraWHostWConfig[] = data?.pages.flat() || []; + const cameras: GetCameraWHostWConfig[] = []; const [visibleCount, setVisibleCount] = useState(pageSize) - useEffect(() => { - if (inView && !isFetching) { - if (visibleCount < cameras.length) { - setVisibleCount(prev => Math.min(prev + pageSize, cameras.length)); - } else if (hasNextPage && !isFetchingNextPage) { - loadTriggered.current = true; - fetchNextPage().then(() => { - // Add a small delay before resetting the flag - setTimeout(() => { - loadTriggered.current = false; - }, 300); // delay in milliseconds; adjust as needed - }); - } - } - }, [inView, cameras, visibleCount, hasNextPage, isFetchingNextPage, isFetching, fetchNextPage]) + // useEffect(() => { + // if (inView && !isFetching) { + // if (visibleCount < cameras.length) { + // setVisibleCount(prev => Math.min(prev + pageSize, cameras.length)); + // } else if (hasNextPage && !isFetchingNextPage) { + // loadTriggered.current = true; + // fetchNextPage().then(() => { + // // Add a small delay before resetting the flag + // setTimeout(() => { + // loadTriggered.current = false; + // }, 300); // delay in milliseconds; adjust as needed + // }); + // } + // } + // }, [inView, cameras, visibleCount, hasNextPage, isFetchingNextPage, isFetching, fetchNextPage]) useEffect(() => { const hostId = searchParams.get(mainPageParams.hostId) || '' @@ -110,8 +110,8 @@ const MainPage = () => { selectedTags: deSerializedTags, }) - setRightChildren(); - return () => setRightChildren(null); + // setRightChildren(); + // return () => setRightChildren(null); }, []); @@ -123,34 +123,35 @@ const MainPage = () => { debouncedHandleSearchQuery(event.currentTarget.value) } - if (isLoading) return ; - if (isError) return + // if (isLoading) return ; + // if (isError) return if (!isProduction) console.log('MainPage rendered') + return ( - } value={searchQuery || undefined} - // onChange={onInputChange} - /> + onChange={onInputChange} + /> */} - + {/* {cameras.slice(0, visibleCount).map(camera => ( ))} { isFetching && !isFetchingNextPage ? : null} {/* trigger point. Rerender twice when enabled */} -
+ {/*
*/} ); diff --git a/src/services/frigate.proxy/frigate.api.ts b/src/services/frigate.proxy/frigate.api.ts index 311ed4f..92c4e10 100644 --- a/src/services/frigate.proxy/frigate.api.ts +++ b/src/services/frigate.proxy/frigate.api.ts @@ -50,7 +50,7 @@ export const frigateApi = { name?: string | null | undefined; frigateHostId?: string | null | undefined; tagIds?: string | string[]; - offset?: any; + offset?: number | unknown; limit?: number; } = {}) => instanceApi