Clear cache on unmount (#8907)

* Clear cache on unmount

* Cleanup value return

packages/page-staking2/src/Validators/useExposure.ts

@@ -10,7 +10,7 @@ import { useMemo } from 'react';
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 import { BN } from '@polkadot/util';
 
-import { useCacheMap } from '../useCacheMap';
+import { useCacheMap } from '../useCache';
 
 const OPT_EXPOSURE = {
   transform: ({ others, own, total }: PalletStakingExposure): UseExposureExposure => ({

packages/page-staking2/src/Validators/useHeartbeat.ts

@@ -11,7 +11,7 @@ import { useMemo } from 'react';
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 import { isBoolean, isNumber } from '@polkadot/util';
 
-import { useCacheMap } from '../useCacheMap';
+import { useCacheMap } from '../useCache';
 
 const EMPTY: UseHeartbeat = {};
 

packages/page-staking2/src/Validators/usePoints.ts

@@ -10,7 +10,7 @@ import { useMemo } from 'react';
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
-import { useCacheValue } from '../useCacheValue';
+import { useCacheValue } from '../useCache';
 
 const OPT_POINTS = {
   transform: ({ individual }: PalletStakingEraRewardPoints): UsePoints =>

packages/page-staking2/src/index.tsx

@@ -3,7 +3,7 @@
 
 import type { AppProps as Props } from '@polkadot/react-components/types';
 
-import React, { useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { Route, Switch } from 'react-router';
 
 import { Tabs } from '@polkadot/react-components';
@@ -11,12 +11,23 @@ import { useApi, useFavorites } from '@polkadot/react-hooks';
 
 import { STORE_FAVS_BASE } from './constants';
 import { useTranslation } from './translate';
+import { clearCache } from './useCache';
 import useSessionInfo from './useSessionInfo';
 import Validators from './Validators';
 
 function StakingApp ({ basePath }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
+
+  // on unmount anything else, ensure that for the next round we
+  // are starting with a fresh cache (there could be large delays)
+  // between opening up staking (excuted inline, not via effect)
+  useEffect((): () => void => {
+    return (): void => {
+      clearCache();
+    };
+  }, []);
+
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
   const sessionInfo = useSessionInfo();
 

packages/page-staking2/src/types.ts

@@ -3,10 +3,6 @@
 
 import type { BN } from '@polkadot/util';
 
-export interface CacheValue<T> {
-  value?: T;
-}
-
 export interface SessionInfo {
   activeEra?: BN | null;
   currentEra?: BN | null;

packages/page-staking2/src/useCache.ts

@@ -0,0 +1,57 @@
+// Copyright 2017-2023 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect } from 'react';
+
+export interface CacheValue<T> {
+  value?: T;
+}
+
+type CacheMapKey = `use${'Exposure' | 'Heartbeat'}`;
+
+type CacheValKey = `use${'ElectedValidators' | 'Points' | 'ValidatorsActive' | 'ValidatorsAll' | 'ValidatorsWaiting'}`;
+
+const cacheMap: Record<CacheMapKey, Record<string, CacheValue<any>>> = {
+  useExposure: {},
+  useHeartbeat: {}
+};
+
+const cacheVal: Record<CacheValKey, CacheValue<any>> = {
+  useElectedValidators: {},
+  usePoints: {},
+  useValidatorsActive: {},
+  useValidatorsAll: {},
+  useValidatorsWaiting: {}
+};
+
+export function clearCache (): void {
+  for (const k of Object.keys(cacheMap)) {
+    cacheMap[k as CacheMapKey] = {};
+  }
+
+  for (const k of Object.keys(cacheVal)) {
+    cacheVal[k as CacheValKey] = {};
+  }
+}
+
+export function useCacheMap <T> (section: CacheMapKey, id: string, value?: T): T | undefined {
+  // update the cached result on value changes
+  useEffect((): void => {
+    if (value) {
+      cacheMap[section][id] = { value };
+    }
+  }, [id, section, value]);
+
+  return value || (cacheMap[section][id] as CacheValue<T>)?.value;
+}
+
+export function useCacheValue <T> (section: CacheValKey, value?: T): T | undefined {
+  // update the cached result on value changes
+  useEffect((): void => {
+    if (value) {
+      cacheVal[section] = { value };
+    }
+  }, [section, value]);
+
+  return value || (cacheVal[section] as CacheValue<T>)?.value;
+}

packages/page-staking2/src/useCacheMap.ts

@@ -1,26 +0,0 @@
-// Copyright 2017-2023 @polkadot/app-staking authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { CacheValue } from './types';
-
-import { useEffect } from 'react';
-
-import { getResultValue } from './useCacheValue';
-
-type CacheSection = `use${'Exposure' | 'Heartbeat'}`;
-
-const cache: Record<CacheSection, Record<string, CacheValue<any>>> = {
-  useExposure: {},
-  useHeartbeat: {}
-};
-
-export function useCacheMap <T> (section: CacheSection, id: string, value?: T): T | undefined {
-  // update the cached result on value changes
-  useEffect((): void => {
-    if (value) {
-      cache[section][id] = { value };
-    }
-  }, [id, section, value]);
-
-  return getResultValue(cache[section][id] as CacheValue<T>, value);
-}

packages/page-staking2/src/useCacheValue.ts

@@ -1,31 +0,0 @@
-// Copyright 2017-2023 @polkadot/app-staking authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { CacheValue } from './types';
-
-import { useEffect } from 'react';
-
-type CacheSection = `use${'ElectedValidators' | 'Points' | 'ValidatorsActive' | 'ValidatorsAll' | 'ValidatorsWaiting'}`;
-
-const cache: Record<CacheSection, CacheValue<any>> = {
-  useElectedValidators: {},
-  usePoints: {},
-  useValidatorsActive: {},
-  useValidatorsAll: {},
-  useValidatorsWaiting: {}
-};
-
-export function getResultValue <T> (cached?: CacheValue<T>, value?: T): T | undefined {
-  return value || cached?.value;
-}
-
-export function useCacheValue <T> (section: CacheSection, value?: T): T | undefined {
-  // update the cached result on value changes
-  useEffect((): void => {
-    if (value) {
-      cache[section] = { value };
-    }
-  }, [section, value]);
-
-  return getResultValue(cache[section] as CacheValue<T>, value);
-}

packages/page-staking2/src/useElectedValidators.ts

@@ -9,7 +9,7 @@ import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useMapKeys } from '@polkadot/react-hooks';
 
-import { useCacheValue } from './useCacheValue';
+import { useCacheValue } from './useCache';
 
 const OPT_ELECTED = {
   transform: (keys: StorageKey<[u32, AccountId32]>[]): string[] =>

packages/page-staking2/src/useValidatorsActive.ts

@@ -6,7 +6,7 @@ import type { SessionInfo, Validator } from './types';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
-import { useCacheValue } from './useCacheValue';
+import { useCacheValue } from './useCache';
 import useTaggedValidators from './useTaggedValidators';
 
 const OPT_VALIDATORS = {

packages/page-staking2/src/useValidatorsAll.ts

@@ -10,7 +10,7 @@ import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useEventChanges, useMapKeys } from '@polkadot/react-hooks';
 
-import { useCacheValue } from './useCacheValue';
+import { useCacheValue } from './useCache';
 import useTaggedValidators from './useTaggedValidators';
 
 const EMPTY_PARAMS: unknown[] = [];

packages/page-staking2/src/useValidatorsWaiting.ts

@@ -7,7 +7,7 @@ import { useMemo } from 'react';
 
 import { createNamedHook } from '@polkadot/react-hooks';
 
-import { useCacheValue } from './useCacheValue';
+import { useCacheValue } from './useCache';
 import useValidatorsAll from './useValidatorsAll';
 
 function excludeValidators (from: Validator[], exclude: Validator[]): Validator[] {