From 8cf08ed2f301165204a138dc5bcb5b702efec392 Mon Sep 17 00:00:00 2001 From: WhiteMind Date: Fri, 10 Nov 2023 14:36:12 +0800 Subject: [PATCH] Refactored chart cache from localstroage-based to http-based (#135) * refactor: remove the local caching mechanism for the chart * refactor: remove the unnecessary hook useChartQueryWithCache * refactor: use a safer key for the chart query --- .../Home/AverageBlockTimeChart/index.tsx | 14 ++--- src/pages/Home/HashRateChart/index.tsx | 8 +-- .../activities/AddressBalanceRank.tsx | 3 +- .../activities/AddressCount.tsx | 3 +- .../activities/BalanceDistribution.tsx | 3 +- .../StatisticsChart/activities/CellCount.tsx | 3 +- .../activities/TransactionCount.tsx | 3 +- .../activities/TxFeeHistory.tsx | 3 +- .../block/AverageBlockTime.tsx | 5 +- .../block/BlockTimeDistribution.tsx | 3 +- .../block/EpochTimeDistribution.tsx | 3 +- src/pages/StatisticsChart/common/index.tsx | 14 +++-- .../StatisticsChart/mining/Difficulty.tsx | 3 +- .../mining/DifficultyHashRate.tsx | 3 +- .../mining/DifficultyUncleRateEpoch.tsx | 3 +- src/pages/StatisticsChart/mining/HashRate.tsx | 5 +- .../mining/MinerAddressDistribution.tsx | 3 +- .../mining/MinerVersionDistribution.tsx | 3 +- .../StatisticsChart/mining/UncleRate.tsx | 3 +- .../monetary/AnnualPercentageCompensation.tsx | 3 +- .../monetary/InflationRate.tsx | 3 +- .../StatisticsChart/monetary/Liquidity.tsx | 3 +- .../monetary/SecondaryIssuance.tsx | 3 +- .../StatisticsChart/monetary/TotalSupply.tsx | 3 +- .../nervosDao/CirculationRatio.tsx | 3 +- .../nervosDao/NewDaoDeposit.tsx | 3 +- .../nervosDao/TotalDaoDeposit.tsx | 3 +- src/utils/hook.ts | 53 +------------------ 28 files changed, 45 insertions(+), 120 deletions(-) diff --git a/src/pages/Home/AverageBlockTimeChart/index.tsx b/src/pages/Home/AverageBlockTimeChart/index.tsx index 261c9899b..f338ea72a 100644 --- a/src/pages/Home/AverageBlockTimeChart/index.tsx +++ b/src/pages/Home/AverageBlockTimeChart/index.tsx @@ -3,15 +3,15 @@ import 'echarts/lib/chart/line' import 'echarts/lib/component/title' import echarts from 'echarts/lib/echarts' import { useTranslation } from 'react-i18next' +import { useQuery } from '@tanstack/react-query' import { parseDateNoTime } from '../../../utils/date' import { localeNumberString } from '../../../utils/number' import SmallLoading from '../../../components/Loading/SmallLoading' import { HomeChartLink, ChartLoadingPanel } from './styled' import ChartNoDataImage from '../../../assets/chart_no_data_white.png' -import { useChartQueryWithCache, useIsLGScreen } from '../../../utils/hook' +import { useIsLGScreen } from '../../../utils/hook' import { ChartItem, explorerService } from '../../../services/ExplorerService' import { ReactChartCore } from '../../StatisticsChart/common' -import { AverageBlockTimeCacheKey } from '../../StatisticsChart/block/AverageBlockTime' const useOption = () => { const { t } = useTranslation() @@ -109,10 +109,12 @@ export default memo(() => { const isLG = useIsLGScreen() const parseOption = useOption() - const query = useChartQueryWithCache( - explorerService.api.fetchStatisticAverageBlockTimes, - AverageBlockTimeCacheKey, - 'date', + const query = useQuery( + ['fetchStatisticAverageBlockTimes'], + () => explorerService.api.fetchStatisticAverageBlockTimes(), + { + refetchOnWindowFocus: false, + }, ) const fullStatisticAverageBlockTimes = useMemo(() => query.data ?? [], [query.data]) diff --git a/src/pages/Home/HashRateChart/index.tsx b/src/pages/Home/HashRateChart/index.tsx index e67d068cd..21f3d46b0 100644 --- a/src/pages/Home/HashRateChart/index.tsx +++ b/src/pages/Home/HashRateChart/index.tsx @@ -4,15 +4,15 @@ import 'echarts/lib/chart/line' import 'echarts/lib/component/title' import echarts from 'echarts/lib/echarts' import { useTranslation } from 'react-i18next' +import { useQuery } from '@tanstack/react-query' import { handleAxis } from '../../../utils/chart' import { parseDateNoTime } from '../../../utils/date' import SmallLoading from '../../../components/Loading/SmallLoading' import { HomeChartLink, ChartLoadingPanel } from './styled' import ChartNoDataImage from '../../../assets/chart_no_data_white.png' -import { useChartQueryWithCache, useIsLGScreen } from '../../../utils/hook' +import { useIsLGScreen } from '../../../utils/hook' import { ChartItem, explorerService } from '../../../services/ExplorerService' import { ReactChartCore } from '../../StatisticsChart/common' -import { HashRateCacheKey } from '../../StatisticsChart/mining/HashRate' const useOption = () => { const { t } = useTranslation() @@ -103,7 +103,9 @@ const useOption = () => { } export default memo(() => { const isLG = useIsLGScreen() - const query = useChartQueryWithCache(explorerService.api.fetchStatisticHashRate, HashRateCacheKey, 'date') + const query = useQuery(['fetchStatisticHashRate'], () => explorerService.api.fetchStatisticHashRate(), { + refetchOnWindowFocus: false, + }) const fullStatisticHashRates = useMemo(() => query.data ?? [], [query.data]) const parseOption = useOption() diff --git a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx index c50ce3647..488d0e173 100644 --- a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx +++ b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx @@ -143,8 +143,7 @@ export const AddressBalanceRankChart = ({ isThumbnail = false }: { isThumbnail?: onFetched={setStatisticAddressBalanceRanks} getEChartOption={getEChartOption} toCSV={toCSV} - cacheKey="AddressBalanceRank" - cacheMode="date" + queryKey="fetchStatisticAddressBalanceRank" /> ) } diff --git a/src/pages/StatisticsChart/activities/AddressCount.tsx b/src/pages/StatisticsChart/activities/AddressCount.tsx index 31e0393d2..90f35e522 100644 --- a/src/pages/StatisticsChart/activities/AddressCount.tsx +++ b/src/pages/StatisticsChart/activities/AddressCount.tsx @@ -108,8 +108,7 @@ export const AddressCountChart = ({ isThumbnail = false }: { isThumbnail?: boole fetchData={explorerService.api.fetchStatisticAddressCount} getEChartOption={useOption} toCSV={toCSV} - cacheKey="AddressCount" - cacheMode="date" + queryKey="fetchStatisticAddressCount" /> ) } diff --git a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx index a003f2a47..f1ac41ba4 100644 --- a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx +++ b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx @@ -187,8 +187,7 @@ export const BalanceDistributionChart = ({ isThumbnail = false }: { isThumbnail? fetchData={explorerService.api.fetchStatisticBalanceDistribution} getEChartOption={useOption} toCSV={toCSV} - cacheKey="BalanceDistribution" - cacheMode="date" + queryKey="fetchStatisticBalanceDistribution" /> ) } diff --git a/src/pages/StatisticsChart/activities/CellCount.tsx b/src/pages/StatisticsChart/activities/CellCount.tsx index d65638888..d42a75093 100644 --- a/src/pages/StatisticsChart/activities/CellCount.tsx +++ b/src/pages/StatisticsChart/activities/CellCount.tsx @@ -194,8 +194,7 @@ export const CellCountChart = ({ isThumbnail = false }: { isThumbnail?: boolean fetchData={explorerService.api.fetchStatisticCellCount} getEChartOption={useOption} toCSV={toCSV} - cacheKey="CellCount" - cacheMode="date" + queryKey="fetchStatisticCellCount" /> ) } diff --git a/src/pages/StatisticsChart/activities/TransactionCount.tsx b/src/pages/StatisticsChart/activities/TransactionCount.tsx index f85e99713..c5f831849 100644 --- a/src/pages/StatisticsChart/activities/TransactionCount.tsx +++ b/src/pages/StatisticsChart/activities/TransactionCount.tsx @@ -106,8 +106,7 @@ export const TransactionCountChart = ({ isThumbnail = false }: { isThumbnail?: b fetchData={explorerService.api.fetchStatisticTransactionCount} getEChartOption={useOption} toCSV={toCSV} - cacheKey="TransactionCount" - cacheMode="date" + queryKey="fetchStatisticTransactionCount" /> ) } diff --git a/src/pages/StatisticsChart/activities/TxFeeHistory.tsx b/src/pages/StatisticsChart/activities/TxFeeHistory.tsx index aa7edaddd..d2c2682c5 100644 --- a/src/pages/StatisticsChart/activities/TxFeeHistory.tsx +++ b/src/pages/StatisticsChart/activities/TxFeeHistory.tsx @@ -112,8 +112,7 @@ export const TxFeeHistoryChart = ({ isThumbnail = false }: { isThumbnail?: boole fetchData={explorerService.api.fetchStatisticTxFeeHistory} getEChartOption={useOption} toCSV={toCSV} - cacheKey="TransactionFee" - cacheMode="date" + queryKey="fetchStatisticTxFeeHistory" /> ) } diff --git a/src/pages/StatisticsChart/block/AverageBlockTime.tsx b/src/pages/StatisticsChart/block/AverageBlockTime.tsx index 1b72c92e6..4baa619dc 100644 --- a/src/pages/StatisticsChart/block/AverageBlockTime.tsx +++ b/src/pages/StatisticsChart/block/AverageBlockTime.tsx @@ -7,8 +7,6 @@ import { ChartItem, explorerService } from '../../../services/ExplorerService' import { useCurrentLanguage } from '../../../utils/i18n' import { ChartColorConfig } from '../../../constants/common' -export const AverageBlockTimeCacheKey = 'AverageBlockTime' - const useOption = ( statisticAverageBlockTimes: ChartItem.AverageBlockTime[], chartColor: ChartColorConfig, @@ -183,8 +181,7 @@ export const AverageBlockTimeChart = ({ isThumbnail = false }: { isThumbnail?: b fetchData={explorerService.api.fetchStatisticAverageBlockTimes} getEChartOption={useOption} toCSV={toCSV} - cacheKey={AverageBlockTimeCacheKey} - cacheMode="date" + queryKey="fetchStatisticAverageBlockTimes" /> ) } diff --git a/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx b/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx index f017e0648..135259e4c 100644 --- a/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx +++ b/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx @@ -104,8 +104,7 @@ export const BlockTimeDistributionChart = ({ isThumbnail = false }: { isThumbnai fetchData={explorerService.api.fetchStatisticBlockTimeDistribution} getEChartOption={useOption} toCSV={toCSV} - cacheKey="BlockTimeDistribution" - cacheMode="date" + queryKey="fetchStatisticBlockTimeDistribution" /> ) } diff --git a/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx b/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx index d51c8afcf..9353ba1f1 100644 --- a/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx +++ b/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx @@ -111,8 +111,7 @@ export const EpochTimeDistributionChart = ({ isThumbnail = false }: { isThumbnai fetchData={explorerService.api.fetchStatisticEpochTimeDistribution} getEChartOption={useOption} toCSV={toCSV} - cacheKey="EpochTimeDistribution" - cacheMode="date" + queryKey="fetchStatisticEpochTimeDistribution" /> ) } diff --git a/src/pages/StatisticsChart/common/index.tsx b/src/pages/StatisticsChart/common/index.tsx index 002b6e05c..0915dfd1c 100644 --- a/src/pages/StatisticsChart/common/index.tsx +++ b/src/pages/StatisticsChart/common/index.tsx @@ -13,6 +13,7 @@ import 'echarts/lib/component/brush' import echarts from 'echarts/lib/echarts' import { EChartOption, ECharts } from 'echarts' import { useTranslation } from 'react-i18next' +import { useQuery } from '@tanstack/react-query' import { LoadingPanel, ChartNoDataPanel, ChartDetailTitle, ChartDetailPanel, ChartNotePanel } from './styled' import Loading from '../../../components/Loading' import ChartNoDataImage from '../../../assets/chart_no_data.png' @@ -20,11 +21,10 @@ import ChartNoDataAggronImage from '../../../assets/chart_no_data_aggron.png' import { isMainnet } from '../../../utils/chain' import SmallLoading from '../../../components/Loading/SmallLoading' import Content from '../../../components/Content' -import { useChartQueryWithCache, useIsMobile, usePrevious, useWindowResize } from '../../../utils/hook' +import { useIsMobile, usePrevious, useWindowResize } from '../../../utils/hook' import { isDeepEqual } from '../../../utils/util' import { HelpTip } from '../../../components/HelpTip' import { ChartColor, ChartColorConfig } from '../../../constants/common' -import { Response } from '../../../services/ExplorerService' const LoadingComp = ({ isThumbnail }: { isThumbnail?: boolean }) => (isThumbnail ? : ) @@ -161,7 +161,7 @@ export interface SmartChartPageProps { note?: string isThumbnail?: boolean chartProps?: Partial> - fetchData: () => Promise[]>> + fetchData: () => Promise onFetched?: (dataList: T[]) => void getEChartOption: ( dataList: T[], @@ -170,8 +170,7 @@ export interface SmartChartPageProps { isThumbnail?: boolean, ) => echarts.EChartOption toCSV: (dataList: T[]) => (string | number)[][] - cacheKey?: string - cacheMode?: 'forever' | 'date' | 'epoch' + queryKey?: string } export function SmartChartPage({ @@ -184,12 +183,11 @@ export function SmartChartPage({ onFetched, getEChartOption, toCSV, - cacheKey, - cacheMode = 'forever', + queryKey, }: SmartChartPageProps): ReactElement { const isMobile = useIsMobile() - const query = useChartQueryWithCache(fetchData, cacheKey, cacheMode) + const query = useQuery(['SmartChartPage', queryKey], () => fetchData(), { refetchOnWindowFocus: false }) const dataList = useMemo(() => query.data ?? [], [query.data]) useEffect(() => { if (onFetched && query.data) { diff --git a/src/pages/StatisticsChart/mining/Difficulty.tsx b/src/pages/StatisticsChart/mining/Difficulty.tsx index da7890285..1c91a506d 100644 --- a/src/pages/StatisticsChart/mining/Difficulty.tsx +++ b/src/pages/StatisticsChart/mining/Difficulty.tsx @@ -108,8 +108,7 @@ export const DifficultyChart = ({ isThumbnail = false }: { isThumbnail?: boolean fetchData={explorerService.api.fetchStatisticDifficulty} getEChartOption={useOption} toCSV={toCSV} - cacheKey="Difficulty" - cacheMode="date" + queryKey="fetchStatisticDifficulty" /> ) } diff --git a/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx b/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx index 40f8532ac..05799bf64 100644 --- a/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx +++ b/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx @@ -201,8 +201,7 @@ export const DifficultyHashRateChart = ({ isThumbnail = false }: { isThumbnail?: fetchData={explorerService.api.fetchStatisticDifficultyHashRate} getEChartOption={useOption} toCSV={toCSV} - cacheKey="DifficultyHashRate" - cacheMode="epoch" + queryKey="fetchStatisticDifficultyHashRate" /> ) } diff --git a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx index 7229f9b0e..a3f6a9373 100644 --- a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx +++ b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx @@ -217,8 +217,7 @@ export const DifficultyUncleRateEpochChart: FC<{ isThumbnail?: boolean }> = ({ i fetchData={explorerService.api.fetchStatisticDifficultyUncleRateEpoch} getEChartOption={useOption} toCSV={toCSV} - cacheKey="DifficultyUncleRateEpoch" - cacheMode="epoch" + queryKey="fetchStatisticDifficultyUncleRateEpoch" /> ) } diff --git a/src/pages/StatisticsChart/mining/HashRate.tsx b/src/pages/StatisticsChart/mining/HashRate.tsx index a0b6d2930..7a580852a 100644 --- a/src/pages/StatisticsChart/mining/HashRate.tsx +++ b/src/pages/StatisticsChart/mining/HashRate.tsx @@ -8,8 +8,6 @@ import { ChartItem, explorerService } from '../../../services/ExplorerService' import { useCurrentLanguage } from '../../../utils/i18n' import { ChartColorConfig } from '../../../constants/common' -export const HashRateCacheKey = 'HashRate' - const useOption = ( statisticHashRates: ChartItem.HashRate[], chartColor: ChartColorConfig, @@ -109,8 +107,7 @@ export const HashRateChart = ({ isThumbnail = false }: { isThumbnail?: boolean } fetchData={explorerService.api.fetchStatisticHashRate} getEChartOption={useOption} toCSV={toCSV} - cacheKey={HashRateCacheKey} - cacheMode="date" + queryKey="fetchStatisticHashRate" /> ) } diff --git a/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx b/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx index ce6e70499..d6c30de05 100644 --- a/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx +++ b/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx @@ -122,8 +122,7 @@ export const MinerAddressDistributionChart = ({ isThumbnail = false }: { isThumb fetchData={explorerService.api.fetchStatisticMinerAddressDistribution} getEChartOption={getEChartOption} toCSV={toCSV} - cacheKey="MinerAddressDistribution" - cacheMode="date" + queryKey="fetchStatisticMinerAddressDistribution" /> ) } diff --git a/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx b/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx index c0e012016..977ab36bf 100644 --- a/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx +++ b/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx @@ -121,8 +121,7 @@ export const MinerVersionDistributionChart = ({ isThumbnail = false }: { isThumb fetchData={fetchData} getEChartOption={useOption} toCSV={toCSV} - cacheKey="MinerVersionDistribution" - cacheMode="date" + queryKey="fetchStatisticMinerVersionDistribution" /> ) } diff --git a/src/pages/StatisticsChart/mining/UncleRate.tsx b/src/pages/StatisticsChart/mining/UncleRate.tsx index 8241f77dc..ff3f7abb1 100644 --- a/src/pages/StatisticsChart/mining/UncleRate.tsx +++ b/src/pages/StatisticsChart/mining/UncleRate.tsx @@ -123,8 +123,7 @@ export const UncleRateChart = ({ isThumbnail = false }: { isThumbnail?: boolean fetchData={explorerService.api.fetchStatisticUncleRate} getEChartOption={useOption} toCSV={toCSV} - cacheKey="UncleRate" - cacheMode="date" + queryKey="fetchStatisticUncleRate" /> ) } diff --git a/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx b/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx index c74ac19b7..e9b0c30c5 100644 --- a/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx +++ b/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx @@ -108,8 +108,7 @@ export const AnnualPercentageCompensationChart = ({ isThumbnail = false }: { isT fetchData={explorerService.api.fetchStatisticAnnualPercentageCompensation} getEChartOption={useOption} toCSV={toCSV} - cacheKey="APC" - cacheMode="forever" + queryKey="fetchStatisticAnnualPercentageCompensation" /> ) } diff --git a/src/pages/StatisticsChart/monetary/InflationRate.tsx b/src/pages/StatisticsChart/monetary/InflationRate.tsx index ca1266fc4..c16c3eea4 100644 --- a/src/pages/StatisticsChart/monetary/InflationRate.tsx +++ b/src/pages/StatisticsChart/monetary/InflationRate.tsx @@ -167,8 +167,7 @@ export const InflationRateChart = ({ isThumbnail = false }: { isThumbnail?: bool fetchData={explorerService.api.fetchStatisticInflationRate} getEChartOption={useOption} toCSV={toCSV} - cacheKey="InflationRate" - cacheMode="forever" + queryKey="fetchStatisticInflationRate" /> ) } diff --git a/src/pages/StatisticsChart/monetary/Liquidity.tsx b/src/pages/StatisticsChart/monetary/Liquidity.tsx index e10e59925..e915cef39 100644 --- a/src/pages/StatisticsChart/monetary/Liquidity.tsx +++ b/src/pages/StatisticsChart/monetary/Liquidity.tsx @@ -197,8 +197,7 @@ export const LiquidityChart = ({ isThumbnail = false }: { isThumbnail?: boolean fetchData={explorerService.api.fetchStatisticLiquidity} getEChartOption={useOption} toCSV={toCSV} - cacheKey="Liquidity" - cacheMode="date" + queryKey="fetchStatisticLiquidity" /> ) } diff --git a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx index 08b489ca1..fe6206da5 100644 --- a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx +++ b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx @@ -191,8 +191,7 @@ export const SecondaryIssuanceChart = ({ isThumbnail = false }: { isThumbnail?: fetchData={explorerService.api.fetchStatisticSecondaryIssuance} getEChartOption={useOption} toCSV={toCSV} - cacheKey="SecondaryIssuance" - cacheMode="date" + queryKey="fetchStatisticSecondaryIssuance" /> ) } diff --git a/src/pages/StatisticsChart/monetary/TotalSupply.tsx b/src/pages/StatisticsChart/monetary/TotalSupply.tsx index 344600b62..ddb0773a1 100644 --- a/src/pages/StatisticsChart/monetary/TotalSupply.tsx +++ b/src/pages/StatisticsChart/monetary/TotalSupply.tsx @@ -207,8 +207,7 @@ export const TotalSupplyChart = ({ isThumbnail = false }: { isThumbnail?: boolea fetchData={explorerService.api.fetchStatisticTotalSupply} getEChartOption={useOption} toCSV={toCSV} - cacheKey="TotalSupply" - cacheMode="date" + queryKey="fetchStatisticTotalSupply" /> ) } diff --git a/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx b/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx index 50920129f..0979a33c8 100644 --- a/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx +++ b/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx @@ -109,8 +109,7 @@ export const CirculationRatioChart = ({ isThumbnail = false }: { isThumbnail?: b fetchData={explorerService.api.fetchStatisticCirculationRatio} getEChartOption={useOption} toCSV={toCSV} - cacheKey="DepositCirculationRatio" - cacheMode="date" + queryKey="fetchStatisticCirculationRatio" /> ) } diff --git a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx index 8d908acae..1c470fee3 100644 --- a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx +++ b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx @@ -196,8 +196,7 @@ export const NewDaoDepositChart = ({ isThumbnail = false }: { isThumbnail?: bool fetchData={explorerService.api.fetchStatisticNewDaoDeposit} getEChartOption={useOption} toCSV={toCSV} - cacheKey="DailyDeposit" - cacheMode="date" + queryKey="fetchStatisticNewDaoDeposit" /> ) } diff --git a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx index 641c92a17..a68ed9478 100644 --- a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx +++ b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx @@ -195,8 +195,7 @@ export const TotalDaoDepositChart = ({ isThumbnail = false }: { isThumbnail?: bo fetchData={explorerService.api.fetchStatisticTotalDaoDeposit} getEChartOption={useOption} toCSV={toCSV} - cacheKey="TotalDeposit" - cacheMode="date" + queryKey="fetchStatisticTotalDaoDeposit" /> ) } diff --git a/src/utils/hook.ts b/src/utils/hook.ts index 7f19c7b89..d03ea95ab 100644 --- a/src/utils/hook.ts +++ b/src/utils/hook.ts @@ -8,24 +8,15 @@ import { systemScripts, } from '@nervosnetwork/ckb-sdk-utils' import { useHistory, useLocation } from 'react-router-dom' -import { useQuery } from '@tanstack/react-query' import { useResizeDetector } from 'react-resize-detector' import { interval, share } from 'rxjs' -import dayjs from 'dayjs' import { deprecatedAddrToNewAddr } from './util' import { startEndEllipsis } from './string' -import { - ListPageParams, - PageParams, - THEORETICAL_EPOCH_TIME, - EPOCHS_PER_HALVING, - ONE_YEAR_MILLISECOND, - ONE_HOUR_MILLISECOND, -} from '../constants/common' +import { ListPageParams, PageParams, THEORETICAL_EPOCH_TIME, EPOCHS_PER_HALVING } from '../constants/common' import { omit } from './object' // TODO: This file depends on higher-level abstractions, so it should not be in the utils folder. It should be moved to `src/hooks/index.ts`. import { useParseDate } from './date' -import { Response, useStatistics } from '../services/ExplorerService' +import { useStatistics } from '../services/ExplorerService' import { cacheService } from '../services/CacheService' /** @@ -509,46 +500,6 @@ export const useDeprecatedAddr = (addr: string) => } }, [addr]) -export function useChartQueryWithCache( - fetchData: () => Promise[]>>, - cacheKey?: string, - cacheMode: 'forever' | 'date' | 'epoch' = 'forever', -) { - return useQuery([fetchData, cacheKey, cacheMode], async () => { - if (cacheKey) { - const dataList = cacheService.get(cacheKey) - if (dataList) return dataList - } - - let dataList = await fetchData() - if ('data' in dataList) { - dataList = dataList.data.map(wrapper => wrapper.attributes) - } - if (cacheKey && dataList.length > 0) { - let expireAt: Date | number - switch (cacheMode) { - case 'epoch': - expireAt = Date.now() + ONE_HOUR_MILLISECOND * 3 - break - case 'date': { - // Chart data will be updated at 08:10(CST) every day - const now = dayjs().utc() - const todayUpdateTime = now.hour(8).minute(11).second(0).millisecond(0) - const nextUpdateTime = now.isBefore(todayUpdateTime) ? todayUpdateTime : todayUpdateTime.add(1, 'day') - expireAt = nextUpdateTime.toDate() - break - } - case 'forever': - default: - expireAt = Date.now() + ONE_YEAR_MILLISECOND * 100 - break - } - cacheService.set(cacheKey, dataList, { expireAt }) - } - return dataList - }) -} - export const useAnimationFrame = (callback: () => void, running: boolean = true) => { const savedCallback = useRef(callback)