From b20c7c7cb73cb0fd7f6c01996a79c93ff2f6ea72 Mon Sep 17 00:00:00 2001 From: Tien Nam Dao Date: Wed, 22 Feb 2023 09:06:41 +0700 Subject: [PATCH] perf: reduce call some APIs --- pages/charts.tsx | 2 +- slices/commonSlice.ts | 8 +++++++- views/block/hook/useBlock.ts | 7 +++++++ views/homepage/MarketStatistics.tsx | 13 ++++++++++--- views/homepage/Overview.tsx | 18 +++++++++++++----- 5 files changed, 38 insertions(+), 10 deletions(-) diff --git a/pages/charts.tsx b/pages/charts.tsx index fafb5db3..9501e4b6 100644 --- a/pages/charts.tsx +++ b/pages/charts.tsx @@ -17,7 +17,7 @@ const Charts: React.FC = _ => {
- +
diff --git a/slices/commonSlice.ts b/slices/commonSlice.ts index 9756dfa8..01c3676c 100644 --- a/slices/commonSlice.ts +++ b/slices/commonSlice.ts @@ -3,11 +3,13 @@ import { RootState } from 'store' // Define a type for the slice state export interface CommonState { + latestBlock: number astraSummary: AstraSummary | undefined validatorSummary: ValidatorData[] | [] } // Define the initial state using that type const initialState: CommonState = { + latestBlock: 0, astraSummary: undefined, validatorSummary: [] } @@ -16,6 +18,9 @@ export const commonSlice = createSlice({ name: 'common', initialState, reducers: { + setLatestBlock: (state, action: PayloadAction) => { + state.latestBlock = action.payload + }, setAstraSummary: (state, action: PayloadAction) => { state.astraSummary = action.payload }, @@ -26,10 +31,11 @@ export const commonSlice = createSlice({ } }) +export const getLatestBlock = (state: RootState): number => state['common'].latestBlock export const getAstraSummary = (state: RootState): AstraSummary => state['common'].astraSummary export const getValidatorSummary = (state: RootState): ValidatorData[] => state['common'].validatorSummary // Action creators are generated for each case reducer function -export const { setAstraSummary, setValidatorSummary } = commonSlice.actions +export const { setLatestBlock, setAstraSummary, setValidatorSummary } = commonSlice.actions export default commonSlice.reducer diff --git a/views/block/hook/useBlock.ts b/views/block/hook/useBlock.ts index 42c6b41c..f05237ff 100644 --- a/views/block/hook/useBlock.ts +++ b/views/block/hook/useBlock.ts @@ -2,9 +2,12 @@ import API_LIST from 'api/api_list' import usePagination from 'hooks/usePagination' import { differenceWith, isEmpty } from 'lodash' import { useCallback, useEffect, useState } from 'react' +import { useDispatch } from 'react-redux' +import { setLatestBlock } from 'slices/commonSlice' import useSWR from 'swr' export default function useBlock() { + const dispatch = useDispatch() const [_items, _setBlockItem] = useState() const { pagination, setPagination } = usePagination('/blocks') const _fetchCondition = () => { @@ -33,6 +36,10 @@ export default function useBlock() { useEffect(() => { if (data?.result) { + // Dispatch latest block for cache + // Do not call directly get eth-block-number -> It dumps BE + dispatch(setLatestBlock(data?.result?.[0].blockHeight + 1)) + if (pagination.page === 1 && isEmpty(_items)) { _setBlockItem(data?.result) setPagination({ diff --git a/views/homepage/MarketStatistics.tsx b/views/homepage/MarketStatistics.tsx index 68380880..26a8f45d 100644 --- a/views/homepage/MarketStatistics.tsx +++ b/views/homepage/MarketStatistics.tsx @@ -3,20 +3,23 @@ import API_LIST from 'api/api_list' import clsx from 'clsx' import StaticsCard from 'components/Card/Layout/StaticsCard' import numeral from 'numeral' +import { getLatestBlock } from 'slices/commonSlice' import useSWR from 'swr' import { Icon } from 'utils/enum' +import { useAppSelector } from '../../store/hooks' interface Props { classes?: string estimateCountedData: EstimateCountedInfo commonStatsData: CommonStats + hasFetchLatestBlock?: boolean } function getLastestBlock(latestBlock: LatestBlock) { return latestBlock ? parseInt(latestBlock.result.result) : undefined } -const MarketStatistics = ({ classes, commonStatsData, estimateCountedData }: Props) => { +const MarketStatistics = ({ classes, hasFetchLatestBlock, commonStatsData, estimateCountedData }: Props) => { const { isMobile } = useMobileLayout('small') const _fetchCondition = key => { switch (key) { @@ -27,10 +30,14 @@ const MarketStatistics = ({ classes, commonStatsData, estimateCountedData }: Pro const { data: latestBlockRaw, error: latestBlockError } = useSWR(_fetchCondition('latest_block'), { refreshInterval: 2000 }) - const latestBlock = getLastestBlock(latestBlockRaw) + + let latestBlock = useAppSelector(getLatestBlock) + if (hasFetchLatestBlock) { + latestBlock = getLastestBlock(latestBlockRaw) + } return ( -
+
{ +const Overview = ({ hasFetchLatestBlock = false }) => { const { isMobile } = useMobileLayout(1112) const _fetchCondition = key => { @@ -40,12 +40,16 @@ const Overview = () => { } } const { data: estimateCountedDataRaw, error: estimateCountedError } = useSWR( - _fetchCondition('estimate_counted_info') + _fetchCondition('estimate_counted_info'), + { refreshInterval: 60000 } ) const { data: commonStatsDataRaw, error: commonStatsError } = useSWR( - _fetchCondition('common-stats') + _fetchCondition('common-stats'), + { refreshInterval: 60000 } ) - const { data: gasAvgRaw, error: gasAvgError } = useSWR(_fetchCondition('gas_avg')) + const { data: gasAvgRaw, error: gasAvgError } = useSWR(_fetchCondition('gas_avg'), { + refreshInterval: 600000 + }) const estimateCountedData = getEstimateCountedData(estimateCountedDataRaw?.result) const commonStatsData = getCommonStatsData(commonStatsDataRaw?.result) @@ -69,7 +73,11 @@ const Overview = () => {
- + {!isMobile && (