refactor: implement cacheService to replace cache utils

src/__tests__/utils/date.test.ts

@@ -11,7 +11,6 @@ import {
   parseSimpleDate,
   parseSimpleDateNoSecond,
   getCurrentYear,
-  getCSTTime,
 } from '../../utils/date'
 
 describe('Date methods tests', () => {
@@ -81,13 +80,4 @@ describe('Date methods tests', () => {
     MockDate.set(1588694400000)
     expect(getCurrentYear()).toBe(2020)
   })
-
-  it('getCSTTime', async () => {
-    timezoneMock.register('UTC')
-    expect(parseSimpleDate(1588651000000)).toBe('2020/05/05 03:56:40')
-    MockDate.set(1588651000000, 0)
-    expect(getCSTTime()).toBe(1588679800000)
-    timezoneMock.register('UTC')
-    expect(parseSimpleDate(1588679800000)).toBe('2020/05/05 11:56:40')
-  })
 })

src/components/Header/BlockchainComp/index.tsx

@@ -8,10 +8,9 @@ import { HeaderBlockchainPanel, MobileSubMenuPanel } from './styled'
 import SimpleButton from '../../SimpleButton'
 import ChainDropdown from '../../Dropdown/ChainType'
 import { useIsMobile } from '../../../utils/hook'
-import { ChainName, MAINNET_URL, TESTNET_URL } from '../../../constants/common'
+import { ChainName, MAINNET_URL, ONE_DAY_MILLISECOND, TESTNET_URL } from '../../../constants/common'
 import { explorerService } from '../../../services/ExplorerService'
-import { AppCachedKeys } from '../../../constants/cache'
-import { fetchCachedData, storeCachedData } from '../../../utils/cache'
+import { cacheService } from '../../../services/CacheService'
 
 const getDropdownIcon = (showDropdown: boolean) => {
   if (!showDropdown) return WhiteDropdownIcon
@@ -123,24 +122,12 @@ export default memo(() => {
     ['node_version'],
     async () => {
       const { version } = await explorerService.api.fetchNodeVersion()
-      storeCachedData(AppCachedKeys.Version, `${version}&${new Date().getTime()}`)
+      cacheService.set<string>('node_version', version, { expireTime: ONE_DAY_MILLISECOND })
       return version
     },
     {
       keepPreviousData: true,
-      initialData: () => {
-        // version cache format: version&timestamp
-        const data = fetchCachedData<string>(AppCachedKeys.Version)
-        if (!data?.includes('&')) return undefined
-
-        const timestamp = Number(data.substring(data.indexOf('&') + 1))
-        const DAY_TIMESTAMP = 24 * 60 * 60 * 1000
-        const isStale = Date.now() - timestamp > DAY_TIMESTAMP
-        if (isStale) return undefined
-
-        const nodeVersion = data.substring(0, data.indexOf('&'))
-        return nodeVersion
-      },
+      initialData: () => cacheService.get<string>('node_version'),
     },
   )
   const nodeVersion = query.data ?? ''

src/constants/common.ts

@@ -11,7 +11,10 @@ export const PAGE_CELL_COUNT = 200
 export const NEXT_HARD_FORK_EPOCH = 5414
 export const EPOCH_HOURS = 4
 export const ONE_DAY_SECOND = 24 * 60 * 60
+export const ONE_DAY_MILLISECOND = ONE_DAY_SECOND * 1000
+export const ONE_YEAR_MILLISECOND = ONE_DAY_MILLISECOND * 365
 export const ONE_HOUR_SECOND = 60 * 60
+export const ONE_HOUR_MILLISECOND = ONE_HOUR_SECOND * 1000
 export const ONE_MINUTE_SECOND = 60
 export const EPOCHS_PER_HALVING = 8760
 export const THEORETICAL_EPOCH_TIME = 1000 * 60 * 60 * 4 // 4 hours

src/pages/Home/AverageBlockTimeChart/index.tsx

@@ -10,8 +10,8 @@ import { HomeChartLink, ChartLoadingPanel } from './styled'
 import ChartNoDataImage from '../../../assets/chart_no_data_white.png'
 import { useChartQueryWithCache, useIsLGScreen } from '../../../utils/hook'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ReactChartCore } from '../../StatisticsChart/common'
+import { AverageBlockTimeCacheKey } from '../../StatisticsChart/block/AverageBlockTime'
 
 const useOption = () => {
   const { t } = useTranslation()
@@ -111,7 +111,7 @@ export default memo(() => {
 
   const query = useChartQueryWithCache(
     explorerService.api.fetchStatisticAverageBlockTimes,
-    ChartCachedKeys.AverageBlockTime,
+    AverageBlockTimeCacheKey,
     'date',
   )
   const fullStatisticAverageBlockTimes = useMemo(() => query.data ?? [], [query.data])

src/pages/Home/HashRateChart/index.tsx

@@ -11,8 +11,8 @@ import { HomeChartLink, ChartLoadingPanel } from './styled'
 import ChartNoDataImage from '../../../assets/chart_no_data_white.png'
 import { useChartQueryWithCache, useIsLGScreen } from '../../../utils/hook'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ReactChartCore } from '../../StatisticsChart/common'
+import { HashRateCacheKey } from '../../StatisticsChart/mining/HashRate'
 
 const useOption = () => {
   const { t } = useTranslation()
@@ -103,7 +103,7 @@ const useOption = () => {
 }
 export default memo(() => {
   const isLG = useIsLGScreen()
-  const query = useChartQueryWithCache(explorerService.api.fetchStatisticHashRate, ChartCachedKeys.HashRate, 'date')
+  const query = useChartQueryWithCache(explorerService.api.fetchStatisticHashRate, HashRateCacheKey, 'date')
   const fullStatisticHashRates = useMemo(() => query.data ?? [], [query.data])
   const parseOption = useOption()
 

src/pages/StatisticsChart/activities/AddressBalanceRank.tsx

@@ -7,7 +7,6 @@ import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { localeNumberString } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage, SmartChartPageProps } from '../common'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { useAdaptPCEllipsis } from '../../../utils/hook'
 import { ChartColorConfig } from '../../../constants/common'
 
@@ -144,7 +143,7 @@ export const AddressBalanceRankChart = ({ isThumbnail = false }: { isThumbnail?:
       onFetched={setStatisticAddressBalanceRanks}
       getEChartOption={getEChartOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.AddressBalanceRank}
+      cacheKey="AddressBalanceRank"
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/activities/AddressCount.tsx

@@ -4,7 +4,6 @@ import { DATA_ZOOM_CONFIG, assertIsArray, handleAxis } from '../../../utils/char
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
 
@@ -109,7 +108,7 @@ export const AddressCountChart = ({ isThumbnail = false }: { isThumbnail?: boole
       fetchData={explorerService.api.fetchStatisticAddressCount}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.AddressCount}
+      cacheKey="AddressCount"
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/activities/BalanceDistribution.tsx

@@ -11,7 +11,6 @@ import {
 } from '../../../utils/chart'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { localeNumberString } from '../../../utils/number'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartColorConfig } from '../../../constants/common'
 
@@ -188,7 +187,7 @@ export const BalanceDistributionChart = ({ isThumbnail = false }: { isThumbnail?
       fetchData={explorerService.api.fetchStatisticBalanceDistribution}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.BalanceDistribution}
+      cacheKey="BalanceDistribution"
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/activities/CellCount.tsx

@@ -10,7 +10,6 @@ import {
 } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartColorConfig } from '../../../constants/common'
 
@@ -195,7 +194,7 @@ export const CellCountChart = ({ isThumbnail = false }: { isThumbnail?: boolean
       fetchData={explorerService.api.fetchStatisticCellCount}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.CellCount}
+      cacheKey="CellCount"
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/activities/TransactionCount.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { DATA_ZOOM_CONFIG, assertIsArray, handleAxis } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
@@ -107,7 +106,7 @@ export const TransactionCountChart = ({ isThumbnail = false }: { isThumbnail?: b
       fetchData={explorerService.api.fetchStatisticTransactionCount}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.TransactionCount}
+      cacheKey="TransactionCount"
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/activities/TxFeeHistory.tsx

@@ -5,7 +5,6 @@ import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { shannonToCkbDecimal } from '../../../utils/util'
 import { isMainnet } from '../../../utils/chain'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
@@ -113,7 +112,7 @@ export const TxFeeHistoryChart = ({ isThumbnail = false }: { isThumbnail?: boole
       fetchData={explorerService.api.fetchStatisticTxFeeHistory}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.TransactionFee}
+      cacheKey="TransactionFee"
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/block/AverageBlockTime.tsx

@@ -4,10 +4,11 @@ import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../commo
 import { localeNumberString } from '../../../utils/number'
 import { DATA_ZOOM_CONFIG, assertIsArray, assertSerialsDataIsString, assertSerialsItem } from '../../../utils/chart'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
 
+export const AverageBlockTimeCacheKey = 'AverageBlockTime'
+
 const useOption = (
   statisticAverageBlockTimes: ChartItem.AverageBlockTime[],
   chartColor: ChartColorConfig,
@@ -194,7 +195,7 @@ export const AverageBlockTimeChart = ({ isThumbnail = false }: { isThumbnail?: b
       fetchData={explorerService.api.fetchStatisticAverageBlockTimes}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.AverageBlockTime}
+      cacheKey={AverageBlockTimeCacheKey}
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/block/BlockTimeDistribution.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { DATA_ZOOM_CONFIG, assertIsArray } from '../../../utils/chart'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
@@ -105,7 +104,7 @@ export const BlockTimeDistributionChart = ({ isThumbnail = false }: { isThumbnai
       fetchData={explorerService.api.fetchStatisticBlockTimeDistribution}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.BlockTimeDistribution}
+      cacheKey="BlockTimeDistribution"
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/block/EpochTimeDistribution.tsx

@@ -4,7 +4,6 @@ import { localeNumberString } from '../../../utils/number'
 import { parseHourFromMinute } from '../../../utils/date'
 import { DATA_ZOOM_CONFIG, assertIsArray } from '../../../utils/chart'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
 
@@ -112,7 +111,7 @@ export const EpochTimeDistributionChart = ({ isThumbnail = false }: { isThumbnai
       fetchData={explorerService.api.fetchStatisticEpochTimeDistribution}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.EpochTimeDistribution}
+      cacheKey="EpochTimeDistribution"
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/mining/Difficulty.tsx

@@ -4,7 +4,6 @@ import { DATA_ZOOM_CONFIG, assertIsArray, handleAxis } from '../../../utils/char
 import { parseDateNoTime } from '../../../utils/date'
 import { handleDifficulty } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
@@ -109,7 +108,7 @@ export const DifficultyChart = ({ isThumbnail = false }: { isThumbnail?: boolean
       fetchData={explorerService.api.fetchStatisticDifficulty}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.Difficulty}
+      cacheKey="Difficulty"
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/mining/DifficultyHashRate.tsx

@@ -10,7 +10,6 @@ import {
 import { handleDifficulty, handleHashRate } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
 
@@ -202,7 +201,7 @@ export const DifficultyHashRateChart = ({ isThumbnail = false }: { isThumbnail?:
       fetchData={explorerService.api.fetchStatisticDifficultyHashRate}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.DifficultyHashRate}
+      cacheKey="DifficultyHashRate"
       cacheMode="epoch"
     />
   )

src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { assertSerialsDataIsString, assertIsArray, assertSerialsItem, handleAxis } from '../../../utils/chart'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { parseHourFromMillisecond } from '../../../utils/date'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { LanuageType, useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
@@ -217,7 +216,7 @@ export const DifficultyUncleRateEpochChart: FC<{ isThumbnail?: boolean }> = ({ i
       fetchData={explorerService.api.fetchStatisticDifficultyUncleRateEpoch}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.DifficultyUncleRateEpoch}
+      cacheKey="DifficultyUncleRateEpoch"
       cacheMode="epoch"
     />
   )

src/pages/StatisticsChart/mining/HashRate.tsx

@@ -5,10 +5,11 @@ import { parseDateNoTime } from '../../../utils/date'
 import { handleHashRate } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
 
+export const HashRateCacheKey = 'HashRate'
+
 const useOption = (
   statisticHashRates: ChartItem.HashRate[],
   chartColor: ChartColorConfig,
@@ -108,7 +109,7 @@ export const HashRateChart = ({ isThumbnail = false }: { isThumbnail?: boolean }
       fetchData={explorerService.api.fetchStatisticHashRate}
       getEChartOption={useOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.HashRate}
+      cacheKey={HashRateCacheKey}
       cacheMode="date"
     />
   )

src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx

@@ -2,7 +2,6 @@ import { useCallback } from 'react'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { tooltipColor, tooltipWidth, SmartChartPage, SmartChartPageProps } from '../common'
-import { ChartCachedKeys } from '../../../constants/cache'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useAdaptMobileEllipsis, useAdaptPCEllipsis, useIsMobile } from '../../../utils/hook'
 import { useCurrentLanguage } from '../../../utils/i18n'
@@ -123,7 +122,7 @@ export const MinerAddressDistributionChart = ({ isThumbnail = false }: { isThumb
       fetchData={explorerService.api.fetchStatisticMinerAddressDistribution}
       getEChartOption={getEChartOption}
       toCSV={toCSV}
-      cacheKey={ChartCachedKeys.MinerAddressDistribution}
+      cacheKey="MinerAddressDistribution"
       cacheMode="date"
     />
   )