fix: the refresh button on stats page (#203)

balaji-jr · web-flow · commit 5bdf539979f9 · 2024-02-19T13:58:49.000+05:30
fixes #202
diff --git a/src/components/Header/SubHeader.tsx b/src/components/Header/SubHeader.tsx
@@ -18,6 +18,7 @@ import { IconCodeCircle } from '@tabler/icons-react';
 import styles from './styles/LogQuery.module.css';
 import headerStyles from './styles/Header.module.css';
 import Querier from './Querier';
+import { useStatsPageContext } from '@/pages/Stats/Context';
 
 type HeaderLayoutProps = {
 	children: React.ReactNode;
@@ -39,8 +40,8 @@ export const StatsHeader: FC = () => {
 	const classes = styles;
 	const { container, innerContainer } = classes;
 	const {
-		methods: { resetTimeInterval },
-	} = useHeaderContext();
+		methods: { resetFetchStartTime },
+	} = useStatsPageContext();
 	return (
 		<HeaderLayout>
 			<Box className={container}>
@@ -52,7 +53,7 @@ export const StatsHeader: FC = () => {
 
 				<Box>
 					<Box className={innerContainer}>
-						<RefreshNow onRefresh={resetTimeInterval} />
+						<RefreshNow onRefresh={resetFetchStartTime} />
 					</Box>
 				</Box>
 			</Box>
diff --git a/src/hooks/useAlertsEditor.tsx b/src/hooks/useAlertsEditor.tsx
@@ -3,8 +3,9 @@ import { getLogStreamAlerts, putLogStreamAlerts } from '@/api/logStream';
 import { IconFileAlert } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
 import useMountedState from './useMountedState';
+import { Dayjs } from 'dayjs';
 
-export const useAlertsEditor = (streamName: string) => {
+export const useAlertsEditor = (streamName: string, fetchStartTime?: Dayjs) => {
 	const [alertQuery, setAlertQuery] = useMountedState<string | undefined>('');
 
 	const {
@@ -18,7 +19,7 @@ export const useAlertsEditor = (streamName: string) => {
 		isError: getLogAlertIsError,
 		isSuccess: getLogAlertIsSuccess,
 		isLoading: getLogAlertIsLoading,
-	} = useQuery(['fetch-log-stream-alert', streamName, updateLogStreamIsSuccess], () => getLogStreamAlerts(streamName), {
+	} = useQuery(['fetch-log-stream-alert', streamName, updateLogStreamIsSuccess, fetchStartTime], () => getLogStreamAlerts(streamName), {
 		onSuccess: (data) => {
 			setAlertQuery(JSON.stringify(data?.data));
 		},
diff --git a/src/hooks/useLogStreamStats.tsx b/src/hooks/useLogStreamStats.tsx
@@ -1,13 +1,14 @@
 import { useQuery } from 'react-query';
 import { getLogStreamStats } from '@/api/logStream';
+import { Dayjs } from 'dayjs';
 
-export const useLogStreamStats = (streamName: string) => {
+export const useLogStreamStats = (streamName: string, fetchStartTime?: Dayjs) => {
 	const {
 		data: getLogStreamStatsData,
 		isSuccess: getLogStreamStatsDataIsSuccess,
 		isError: getLogStreamStatsDataIsError,
 		isLoading: getLogStreamStatsDataIsLoading,
-	} = useQuery(['fetch-log-stream-stats', streamName], () => getLogStreamStats(streamName), {
+	} = useQuery(['fetch-log-stream-stats', streamName, fetchStartTime], () => getLogStreamStats(streamName), {
 		retry: false,
 		enabled: streamName !== '',
 	});
diff --git a/src/hooks/useRetentionEditor.tsx b/src/hooks/useRetentionEditor.tsx
@@ -3,8 +3,9 @@ import { getLogStreamRetention, putLogStreamRetention } from '@/api/logStream';
 import { IconFileAlert } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
 import useMountedState from './useMountedState';
+import { Dayjs } from 'dayjs';
 
-export const useRetentionEditor = (streamName: string) => {
+export const useRetentionEditor = (streamName: string, fetchStartTime?: Dayjs) => {
 	const [retentionQuery, setRetentionQuery] = useMountedState<string | undefined>('');
 
 	const {
@@ -19,7 +20,7 @@ export const useRetentionEditor = (streamName: string) => {
 		isLoading: getLogRetentionIsLoading,
 		isSuccess: getLogRetentionIsSuccess,
 	} = useQuery(
-		['fetch-log-stream-retention', streamName, updateLogRetentionIsSuccess],
+		['fetch-log-stream-retention', streamName, updateLogRetentionIsSuccess, fetchStartTime],
 		() => getLogStreamRetention(streamName),
 		{
 			onSuccess: (data) => {
diff --git a/src/pages/Stats/Alerts.tsx b/src/pages/Stats/Alerts.tsx
@@ -9,14 +9,17 @@ import { useAlertsEditor } from '@/hooks/useAlertsEditor';
 import { useParams } from 'react-router-dom';
 import alertStyles from './styles/Alerts.module.css'
 import { CodeHighlight } from '@mantine/code-highlight';
+import { useStatsPageContext } from './Context';
 
 const Alerts: FC = () => {
 	const {
 		state: { subLogQuery },
 	} = useHeaderContext();
 	const { streamName } = useParams();
-
-	const { getLogAlertData, getLogAlertIsError, getLogAlertIsLoading } = useAlertsEditor(streamName || '');
+	const {
+		state: { fetchStartTime },
+	} = useStatsPageContext();
+	const { getLogAlertData, getLogAlertIsError, getLogAlertIsLoading } = useAlertsEditor(streamName || '', fetchStartTime);
 
 	const [opened, { open, close }] = useDisclosure(false);
 	const [Alert, setAlert] = useMountedState({ name: 'Loading....' });
diff --git a/src/pages/Stats/Context.tsx b/src/pages/Stats/Context.tsx
@@ -0,0 +1,53 @@
+import type { Dispatch, FC, SetStateAction } from 'react';
+import { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+
+const Context = createContext({});
+
+const { Provider } = Context;
+
+interface StatsPageProvider {
+	children: ReactNode;
+} 
+
+interface LogsPageContextValue {
+	state: StatsPageContextState;
+	methods: StatsPageContextMethods;
+}
+
+type StatsPageContextState = {
+	fetchStartTime: Dayjs;
+	statusFixedDurations: number;
+}
+
+type StatsPageContextMethods = {
+	resetFetchStartTime: () => void;
+	setStatusFixedDurations: Dispatch<SetStateAction<number>>;
+}
+
+const StatsPageProvider: FC<StatsPageProvider> = ({ children }) => {
+	const [fetchStartTime, setFetchStartTime] = useState<Dayjs>(dayjs());
+	const [statusFixedDurations, setStatusFixedDurations] = useState<number>(0);
+
+	const resetFetchStartTime = useCallback(() => {
+		setFetchStartTime(dayjs())
+	}, [])
+
+	const state: StatsPageContextState = {
+		fetchStartTime,
+		statusFixedDurations
+	};
+
+	const methods: StatsPageContextMethods = {
+		resetFetchStartTime,
+		setStatusFixedDurations
+	}
+
+	const value = useMemo(() => ({ state, methods }), [state, methods]);
+
+	return <Provider value={value}>{children}</Provider>;
+};
+
+export const useStatsPageContext = () => useContext(Context) as LogsPageContextValue;
+
+export default StatsPageProvider;
diff --git a/src/pages/Stats/Status.tsx b/src/pages/Stats/Status.tsx
@@ -19,38 +19,42 @@ import { useLogStreamStats } from '@/hooks/useLogStreamStats';
 import { useParams } from 'react-router-dom';
 import statusStyles from './styles/Status.module.css';
 import statCardStyles from './styles/StatsCard.module.css';
+import { useStatsPageContext } from './Context';
 
 const Status: FC = () => {
 	const { streamName } = useParams();
 
-	const [statusFixedDurations, setStatusFixedDurations] = useMountedState<number>(0);
+	const {
+		state: { statusFixedDurations, fetchStartTime },
+		methods: { setStatusFixedDurations },
+	} = useStatsPageContext();
+
 	const [fetchQueryStatus, setFetchQueryStatus] = useMountedState<string>('');
 
 	const { getLogRetentionIsError, getLogRetentionData, getLogRetentionIsSuccess, getLogRetentionIsLoading } =
-		useRetentionEditor(streamName || '');
+		useRetentionEditor(streamName || '', fetchStartTime);
 
 	const {
 		getLogStreamStatsData,
 		getLogStreamStatsDataIsSuccess,
 		getLogStreamStatsDataIsLoading,
 		getLogStreamStatsDataIsError,
-	} = useLogStreamStats(streamName || '');
+	} = useLogStreamStats(streamName || '', fetchStartTime);
 	const { fetchQueryMutation } = useQueryResult();
 
 	useEffect(() => {
 		if (streamName) {
 			getStatus();
 			setStatusFixedDurations(0);
 		}
-	}, [streamName]);
+	}, [streamName, fetchStartTime]);
 
 	const getStatus = async () => {
-		const now = dayjs();
 		setStatusFixedDurations(statusFixedDurations + 1);
 		const LogQuery = {
 			streamName: streamName || '',
-			startTime: now.subtract(FIXED_DURATIONS[statusFixedDurations].milliseconds, 'milliseconds').toDate(),
-			endTime: now.toDate(),
+			startTime: fetchStartTime.subtract(FIXED_DURATIONS[statusFixedDurations].milliseconds, 'milliseconds').toDate(),
+			endTime: fetchStartTime.toDate(),
 			access: [],
 		};
 		fetchQueryMutation.mutate({
diff --git a/src/routes/elements.tsx b/src/routes/elements.tsx
@@ -1,5 +1,4 @@
 import Home from '@/pages/Home';
-import LogsPageProvider from '@/pages/Logs/Context';
 import type { FC } from 'react';
 import { lazy } from 'react';
 import SuspensePage from './SuspensePage';
@@ -13,6 +12,12 @@ import {
 	StatsHeader,
 	UsersManagementHeader,
 } from '@/components/Header/SubHeader';
+
+// page-wise providers
+import LogsPageProvider from '@/pages/Logs/Context';
+import StatsPageProvider from '@/pages/Stats/Context';
+
+// component-wise providers
 import QueryFilterProvider from '@/providers/QueryFilterProvider';
 
 export const HomeElement: FC = () => {
@@ -73,8 +78,10 @@ const Stats = lazy(() => import('@/pages/Stats'));
 export const StatsElement: FC = () => {
 	return (
 		<SuspensePage>
-			<StatsHeader />
-			<Stats />
+			<StatsPageProvider>
+				<StatsHeader />
+				<Stats />
+			</StatsPageProvider>
 		</SuspensePage>
 	);
 };
