diff --git a/src/pages/blocks/index.tsx b/src/pages/blocks/index.tsx index 96997eb48..69b5262ab 100644 --- a/src/pages/blocks/index.tsx +++ b/src/pages/blocks/index.tsx @@ -145,20 +145,30 @@ export const blocksRowSections = (block: IBlock): IRowSection[] => { const Blocks: React.FC> = () => { const blocksWatcherInterval = 4 * 1000; // 4 secs const [blocksInterval, setBlocksInterval] = useState(0); - const { data: blocksStatsToday, isLoading: isLoadingBlocksStatsToday } = - useQuery({ - queryKey: ['statisticsCall'], - queryFn: totalStatisticsCall, - }); + const { + data: blocksStatsToday, + isLoading: isLoadingBlocksStatsToday, + refetch: refetchTotal, + dataUpdatedAt: totalUpdatedAt, + } = useQuery({ + queryKey: ['statisticsCall'], + queryFn: totalStatisticsCall, + }); const { data: blocksStatsYesterday, - refetch, + refetch: refetchYesterday, isLoading: isLoadingBlocksStatsYesterday, + dataUpdatedAt: yesterdayUpdatedAt, } = useQuery({ queryKey: ['yesterdayStatisticsCall'], queryFn: yesterdayStatisticsCall, }); + const dataUpdatedAt = + totalUpdatedAt && yesterdayUpdatedAt + ? Math.min(totalUpdatedAt, yesterdayUpdatedAt) + : totalUpdatedAt || yesterdayUpdatedAt || 0; + const updateBlocks = useCallback(async () => { const newState = storageUpdateBlocks(!!blocksInterval); if (newState) { @@ -171,7 +181,8 @@ const Blocks: React.FC> = () => { useEffect(() => { if (blocksInterval) { const intervalId = setInterval(() => { - refetch(); + refetchYesterday(); + refetchTotal(); }, blocksWatcherInterval); return () => clearInterval(intervalId); } @@ -246,25 +257,29 @@ const Blocks: React.FC> = () => { }, ]; - const CardContent: React.FC> = ({ + interface CardContentProps extends ICard { + dataUpdatedAt: number; + } + + const CardContent: React.FC> = ({ title, headers, values, + dataUpdatedAt, }) => { - const [uptime] = useState(new Date().getTime()); - const [age, setAge] = useState(getAge(new Date())); + const [age, setAge] = useState( + dataUpdatedAt ? getAge(new Date(dataUpdatedAt)) : '', + ); useEffect(() => { const interval = setInterval(() => { - const newAge = getAge(new Date(uptime)); - - setAge(newAge); + setAge(dataUpdatedAt ? getAge(new Date(dataUpdatedAt)) : ''); }, 1 * 1000); // 1 sec return () => { clearInterval(interval); }; - }, []); + }, [dataUpdatedAt]); return ( @@ -272,7 +287,7 @@ const Blocks: React.FC> = () => { {title} -

{age} ago

+

{age ? `${age} ago` : ''}

@@ -308,7 +323,7 @@ const Blocks: React.FC> = () => { {cards.map((card, index) => ( - + ))} diff --git a/src/services/apiCalls.ts b/src/services/apiCalls.ts index 8ccb1591e..239c7d197 100644 --- a/src/services/apiCalls.ts +++ b/src/services/apiCalls.ts @@ -5,18 +5,17 @@ import { IBlockResponse, IBlockStats } from '@/types/blocks'; export const blockCall = async ( page = 1, limit = 10, -): Promise => - new Promise(async (resolve, reject) => { - const res = await api.get({ - route: `block/list?page=${page}&limit=${limit}`, - }); +): Promise => { + const res = await api.get({ + route: `block/list?page=${page}&limit=${limit}`, + }); - if (!res.error || res.error === '') { - resolve(res); - } + if (!res.error || res.error === '') { + return res; + } - reject(res.error); - }); + throw new Error(typeof res.error === 'string' ? res.error : 'Failed to fetch blocks'); +}; export const yesterdayStatisticsCall = async (): Promise => { const res = await api.get({ @@ -25,9 +24,9 @@ export const yesterdayStatisticsCall = async (): Promise => { if (!res.error || res.error === '') { return res.data.block_stats_by_day[0]; - } else { - return res.error; } + + throw new Error(typeof res.error === 'string' ? res.error : 'Failed to fetch yesterday statistics'); }; export const totalStatisticsCall = async (): Promise => { @@ -37,9 +36,9 @@ export const totalStatisticsCall = async (): Promise => { if (!res.error || res.error === '') { return res.data.block_stats_total; - } else { - return res.error; } + + throw new Error(typeof res.error === 'string' ? res.error : 'Failed to fetch total statistics'); }; export const defaultPagination: IPagination = {