yashwin/VMS-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix CamerasTransferList query key

Browse Source
This commit is contained in:
NlightN22 2025-02-01 19:07:11 +07:00
parent 566e69e509
commit 09af9acb95
2 changed files with 54 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/pages/MainPage.tsx
View File

@ -18,7 +18,6 @@ import CameraCard from '../widgets/card/CameraCard';
import MainFiltersRightSide from '../widgets/sidebars/MainFiltersRightSide'; import MainFiltersRightSide from '../widgets/sidebars/MainFiltersRightSide';
import { SideBarContext } from '../widgets/sidebars/SideBarContext'; import { SideBarContext } from '../widgets/sidebars/SideBarContext';
import RetryErrorPage from './RetryErrorPage'; import RetryErrorPage from './RetryErrorPage';
import { useIntersection } from '@mantine/hooks';
export const mainPageParams = { export const mainPageParams = {
hostId: 'hostId', hostId: 'hostId',
@ -43,55 +42,55 @@ const MainPage = () => {
const pageSize = 20; const pageSize = 20;
// const { const {
// data, data,
// isLoading, isLoading,
// isError, isError,
// fetchNextPage, fetchNextPage,
// hasNextPage, hasNextPage,
// isFetching, isFetching,
// isFetchingNextPage, isFetchingNextPage,
// refetch, refetch,
// } = useInfiniteQuery<GetCameraWHostWConfig[]>({ } = useInfiniteQuery<GetCameraWHostWConfig[]>({
// queryKey: [frigateQueryKeys.getCamerasWHost, selectedHostId, searchQuery, selectedTags], queryKey: [frigateQueryKeys.getCamerasWHost, selectedHostId, searchQuery, selectedTags],
// queryFn: ({ pageParam = 0 }) => queryFn: ({ pageParam = 0 }) =>
// // Pass pagination parameters to the backend // Pass pagination parameters to the backend
// frigateApi.getCamerasWHost({ frigateApi.getCamerasWHost({
// name: searchQuery, name: searchQuery,
// frigateHostId: selectedHostId, frigateHostId: selectedHostId,
// tagIds: selectedTags, tagIds: selectedTags,
// offset: pageParam, offset: pageParam,
// limit: pageSize, limit: pageSize,
// }), }),
// getNextPageParam: (lastPage, pages) => { getNextPageParam: (lastPage, pages) => {
// // If last page size is less than pageSize, no more pages // If last page size is less than pageSize, no more pages
// if (lastPage.length < pageSize) return undefined; if (lastPage.length < pageSize) return undefined;
// // Next page offset is pages.length * pageSize // Next page offset is pages.length * pageSize
// return pages.length * pageSize; return pages.length * pageSize;
// }, },
// initialPageParam: 0, initialPageParam: 0,
// }); });
// const cameras: GetCameraWHostWConfig[] = data?.pages.flat() || []; const cameras: GetCameraWHostWConfig[] = data?.pages.flat() || [];
const cameras: GetCameraWHostWConfig[] = []; // const cameras: GetCameraWHostWConfig[] = [];
const [visibleCount, setVisibleCount] = useState(pageSize) const [visibleCount, setVisibleCount] = useState(pageSize)
// useEffect(() => { useEffect(() => {
// if (inView && !isFetching) { if (inView && !isFetching) {
// if (visibleCount < cameras.length) { if (visibleCount < cameras.length) {
// setVisibleCount(prev => Math.min(prev + pageSize, cameras.length)); setVisibleCount(prev => Math.min(prev + pageSize, cameras.length));
// } else if (hasNextPage && !isFetchingNextPage) { } else if (hasNextPage && !isFetchingNextPage) {
// loadTriggered.current = true; loadTriggered.current = true;
// fetchNextPage().then(() => { fetchNextPage().then(() => {
// // Add a small delay before resetting the flag // Add a small delay before resetting the flag
// setTimeout(() => { setTimeout(() => {
// loadTriggered.current = false; loadTriggered.current = false;
// }, 300); // delay in milliseconds; adjust as needed }, 300); // delay in milliseconds; adjust as needed
// }); });
// } }
// } }
// }, [inView, cameras, visibleCount, hasNextPage, isFetchingNextPage, isFetching, fetchNextPage]) }, [inView, cameras, visibleCount, hasNextPage, isFetchingNextPage, isFetching, fetchNextPage])
useEffect(() => { useEffect(() => {
const hostId = searchParams.get(mainPageParams.hostId) || '' const hostId = searchParams.get(mainPageParams.hostId) || ''
@ -110,8 +109,8 @@ const MainPage = () => {
selectedTags: deSerializedTags, selectedTags: deSerializedTags,
}) })
// setRightChildren(<MainFiltersRightSide />); setRightChildren(<MainFiltersRightSide />);
// return () => setRightChildren(null); return () => setRightChildren(null);
}, []); }, []);
@ -123,8 +122,8 @@ const MainPage = () => {
debouncedHandleSearchQuery(event.currentTarget.value) debouncedHandleSearchQuery(event.currentTarget.value)
} }
// if (isLoading) return <CogwheelLoader />; if (isLoading) return <CogwheelLoader />;
// if (isError) return <RetryErrorPage onRetry={refetch} /> if (isError) return <RetryErrorPage onRetry={refetch} />
if (!isProduction) console.log('MainPage rendered') if (!isProduction) console.log('MainPage rendered')
@ -133,7 +132,7 @@ const MainPage = () => {
<Flex w='100%' <Flex w='100%'
justify='center' justify='center'
> >
{/* <ClearableTextInput <ClearableTextInput
clearable clearable
maw={400} maw={400}
style={{ flexGrow: 1 }} style={{ flexGrow: 1 }}
@ -141,17 +140,17 @@ const MainPage = () => {
icon={<IconSearch size="0.9rem" stroke={1.5} />} icon={<IconSearch size="0.9rem" stroke={1.5} />}
value={searchQuery || undefined} value={searchQuery || undefined}
onChange={onInputChange} onChange={onInputChange}
/> */} />
</Flex> </Flex>
<Flex justify='center' h='100%' direction='column' w='100%' > <Flex justify='center' h='100%' direction='column' w='100%' >
{/* <Grid mt='sm' justify="center" mb='sm' align='stretch'> <Grid mt='sm' justify="center" mb='sm' align='stretch'>
{cameras.slice(0, visibleCount).map(camera => ( {cameras.slice(0, visibleCount).map(camera => (
<CameraCard key={camera.id} camera={camera} /> <CameraCard key={camera.id} camera={camera} />
))} ))}
</Grid> </Grid>
{ isFetching && !isFetchingNextPage ? <CogwheelLoader /> : null} { isFetching && !isFetchingNextPage ? <CogwheelLoader /> : null}
{/* trigger point. Rerender twice when enabled */} {/* trigger point. Rerender twice when enabled */}
{/* <div ref={ref} style={{ height: '50px' }} /> */} <div ref={ref} style={{ height: '50px' }} />
</Flex> </Flex>
</Flex> </Flex>
); );

2
src/shared/components/CamerasTransferList.tsx
View File

@ -17,7 +17,7 @@ const CamerasTransferList = ({
const { t } = useTranslation() const { t } = useTranslation()
const queryClient = useQueryClient() const queryClient = useQueryClient()
const { data: cameras, isPending, isError, refetch } = useQuery({ const { data: cameras, isPending, isError, refetch } = useQuery({
queryKey: [frigateQueryKeys.getCamerasWHost, roleId], queryKey: [frigateQueryKeys.getCamerasWHost],
queryFn: () => frigateApi.getCamerasWHost() queryFn: () => frigateApi.getCamerasWHost()
}) })