fix: fetch count when new logs are being fetched

parseablehq · Aug 18, 2024 · ac75833 · ac75833
1 parent e30df8c
commit ac75833
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/src/pages/Stream/Views/Explore/Footer.tsx b/src/pages/Stream/Views/Explore/Footer.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useState, useEffect } from 'react';
+import { FC, useCallback } from 'react';
 import { useLogsStore, logsStoreReducers, LOAD_LIMIT, LOG_QUERY_LIMITS } from '../../providers/LogsProvider';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { usePagination } from '@mantine/hooks';
@@ -10,7 +10,6 @@ import { HumanizeNumber } from '@/utils/formatBytes';
 import IconButton from '@/components/Button/IconButton';
 import { IconDownload, IconSelector } from '@tabler/icons-react';
 import useMountedState from '@/hooks/useMountedState';
-import { useQueryResult } from '@/hooks/useQueryResult';
 import classes from '../../styles/Footer.module.css';
 
 const { setPageAndPageData, setCurrentPage, setCurrentOffset, makeExportData } = logsStoreReducers;
@@ -93,18 +92,11 @@ const LimitControl: FC = () => {
 	);
 };
 
-const Footer = (props: { loaded: boolean; hasNoData: boolean }) => {
-	const [isFetchingCount, setIsFetchingCount] = useState<boolean>(false);
+const Footer = (props: { loaded: boolean; hasNoData: boolean; isFetchingCount: boolean }) => {
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const [tableOpts, setLogsStore] = useLogsStore((store) => store.tableOpts);
 	const [filteredData] = useLogsStore((store) => store.data.filteredData);
 	const { totalPages, currentOffset, currentPage, perPage, headers, totalCount } = tableOpts;
-	const { useFetchFooterCount } = useQueryResult();
-
-	const { footerCountLoading, footerCountRefetching } = useFetchFooterCount();
-	useEffect(() => {
-		setIsFetchingCount(footerCountLoading || footerCountRefetching);
-	}, [footerCountLoading, footerCountRefetching]);
 
 	const onPageChange = useCallback((page: number) => {
 		setLogsStore((store) => setPageAndPageData(store, page));
@@ -147,7 +139,7 @@ const Footer = (props: { loaded: boolean; hasNoData: boolean }) => {
 			<Stack w="100%" justify="center" align="flex-start">
 				<TotalLogsCount
 					hasTableLoaded={props.loaded}
-					isFetchingCount={isFetchingCount}
+					isFetchingCount={props.isFetchingCount}
 					isTableEmpty={props.hasNoData}
 				/>
 			</Stack>

diff --git a/src/pages/Stream/Views/Explore/JSONView.tsx b/src/pages/Stream/Views/Explore/JSONView.tsx
@@ -174,7 +174,12 @@ const TableContainer = (props: { children: ReactNode }) => {
 	return <Box className={classes.container}>{props.children}</Box>;
 };
 
-const JsonView = (props: { errorMessage: string | null; hasNoData: boolean; showTable: boolean }) => {
+const JsonView = (props: {
+	errorMessage: string | null;
+	hasNoData: boolean;
+	showTable: boolean;
+	isFetchingCount: boolean;
+}) => {
 	const [maximized] = useAppStore((store) => store.maximized);
 
 	const { errorMessage, hasNoData, showTable } = props;
@@ -209,7 +214,7 @@ const JsonView = (props: { errorMessage: string | null; hasNoData: boolean; show
 			) : (
 				<ErrorView message={errorMessage} />
 			)}
-			<Footer loaded={showTable} hasNoData={hasNoData} />
+			<Footer loaded={showTable} hasNoData={hasNoData} isFetchingCount={props.isFetchingCount} />
 		</TableContainer>
 	);
 };

diff --git a/src/pages/Stream/Views/Explore/LogsView.tsx b/src/pages/Stream/Views/Explore/LogsView.tsx
@@ -5,13 +5,16 @@ import useLogsFetcher from './useLogsFetcher';
 
 const LogsView = (props: { schemaLoading: boolean }) => {
 	const { schemaLoading } = props;
-	const { errorMessage, hasNoData, showTable } = useLogsFetcher({ schemaLoading });
+	const { errorMessage, hasNoData, showTable, footerCountLoading, footerCountRefetching } = useLogsFetcher({
+		schemaLoading,
+	});
 	const [viewMode] = useLogsStore((store) => store.viewMode);
-
+	const isFetchingCount = footerCountLoading || footerCountRefetching;
 	const viewOpts = {
 		errorMessage,
 		hasNoData,
 		showTable,
+		isFetchingCount,
 	};
 	return viewMode === 'table' ? <LogTable {...viewOpts} /> : <JsonView {...viewOpts} />;
 };

diff --git a/src/pages/Stream/Views/Explore/StaticLogTable.tsx b/src/pages/Stream/Views/Explore/StaticLogTable.tsx
@@ -141,7 +141,12 @@ interface SectionRefs {
 	pinnedContainerRef: HTMLDivRef;
 }
 
-const LogTable = (props: { errorMessage: string | null; hasNoData: boolean; showTable: boolean }) => {
+const LogTable = (props: {
+	errorMessage: string | null;
+	hasNoData: boolean;
+	showTable: boolean;
+	isFetchingCount: boolean;
+}) => {
 	const { errorMessage, hasNoData, showTable } = props;
 	const [containerRefs, _setContainerRefs] = useState<SectionRefs>({
 		activeSectionRef: useRef<'left' | 'right'>('left'),
@@ -175,7 +180,7 @@ const LogTable = (props: { errorMessage: string | null; hasNoData: boolean; show
 			) : (
 				<ErrorView message={errorMessage} />
 			)}
-			<Footer loaded={showTable} hasNoData={hasNoData} />
+			<Footer loaded={showTable} hasNoData={hasNoData} isFetchingCount={props.isFetchingCount} />
 		</TableContainer>
 	);
 };

diff --git a/src/pages/Stream/Views/Explore/useLogsFetcher.ts b/src/pages/Stream/Views/Explore/useLogsFetcher.ts
@@ -13,7 +13,7 @@ const useLogsFetcher = (props: { schemaLoading: boolean }) => {
 	const { currentOffset, currentPage, pageData } = tableOpts;
 	const { getQueryData, loading: logsLoading, error: errorMessage } = useQueryLogs();
 	const { useFetchFooterCount } = useQueryResult();
-	const { footerCountRefetch } = useFetchFooterCount();
+	const { footerCountRefetch, footerCountLoading, footerCountRefetching } = useFetchFooterCount();
 	const hasContentLoaded = schemaLoading === false && logsLoading === false;
 	const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0;
 	const showTable = hasContentLoaded && !hasNoData && !errorMessage;
@@ -41,6 +41,8 @@ const useLogsFetcher = (props: { schemaLoading: boolean }) => {
 		hasContentLoaded,
 		hasNoData,
 		showTable,
+		footerCountLoading,
+		footerCountRefetching,
 	};
 };