Cache calls to /signers/tickers in Explorer

Author: Alenar

mithril-explorer/src/app/page.js

@@ -11,7 +11,7 @@ import SnapshotsList from '../components/Artifacts/SnapshotsList';
 import MithrilStakeDistributionsList from "../components/Artifacts/MithrilStakeDistributionsList";
 import {aggregatorSearchParam} from "../constants";
 import {selectAggregator, selectedAggregator as currentlySelectedAggregator} from "../store/settingsSlice";
-import {updatePoolsForAggregator} from "../store/poolsSlice";
+import {refreshPoolsCaches, updatePoolsForAggregator} from "../store/poolsSlice";
 
 // Disable SSR for the following components since they use data from the store that are not
 // available server sides (because those data can be read from the local storage).
@@ -27,7 +27,6 @@ export default function Explorer() {
   const [isUpdatingAggregatorInUrl, setIsUpdatingAggregatorInUrl] = useState(false);
   const selectedAggregator = useSelector(currentlySelectedAggregator);
 
-
   // Update the aggregator in the url query
   useEffect(() => {
     const aggregatorInUrl = searchParams.get(aggregatorSearchParam);
@@ -40,6 +39,7 @@ export default function Explorer() {
       router.push("?" + params.toString(), undefined, {shallow: true});
     }
 
+    dispatch(refreshPoolsCaches());
     dispatch(updatePoolsForAggregator(selectedAggregator));
   }, [selectedAggregator]);
 

mithril-explorer/src/app/registrations/page.js

@@ -13,7 +13,7 @@ import Stake from "../../components/Stake";
 import RawJsonButton from "../../components/RawJsonButton";
 import VerifiedBadge from "../../components/VerifiedBadge";
 import PoolTicker from "../../components/PoolTicker";
-import {updatePoolsForAggregator} from "../../store/poolsSlice";
+import {refreshPoolsCaches, updatePoolsForAggregator} from "../../store/poolsSlice";
 import PartyId from "../../components/PartyId";
 
 Chart.register(
@@ -80,6 +80,7 @@ export default function Registrations() {
           console.error("Fetch current epoch in epoch-settings error:", error);
         });
 
+      dispatch(refreshPoolsCaches());
       dispatch(updatePoolsForAggregator(aggregator));
     } else {
       setCurrentError(error);

mithril-explorer/src/store/poolsSlice.js

@@ -1,14 +1,34 @@
 import {createAsyncThunk, createSelector, createSlice} from "@reduxjs/toolkit";
 
+const CACHE_NAME = "v1";
+// Delete all caches older than 6 hours
+const cacheRefreshIntervalInMilliseconds = 6 * 3600 * 1000;
+
 export const poolsSlice = createSlice({
     name: 'pools',
     initialState: { list: [] },
-    reducers: {},
+    reducers: {
+        refreshPoolsCaches: (state) => {
+            const now = Date.now();
+            for (const entry of state.list.map(p => ({date: p.date, url: poolTickersUrl(p.aggregator)}))) {
+                const millisecondsSinceLastRefresh = now - entry.date;
+
+                if (millisecondsSinceLastRefresh > cacheRefreshIntervalInMilliseconds) {
+                    caches.open(CACHE_NAME).then(async (cache) => {
+                        const deletionSuccessful = await cache.delete(entry.url);
+                        if (!deletionSuccessful) {
+                            console.error(`Failed to delete cache: ${entry.url}`);
+                        }
+                    });
+                }
+            }
+        }
+    },
     extraReducers: builder => builder.addCase(updatePoolsForAggregator.fulfilled, (state, action) => {
         let existing = poolsForAggregator(state, action.payload.aggregator);
 
         if (existing) {
-            existing.date = action.payload.date;
+            existing.network = action.payload.network;
             existing.pools = action.payload.pools;
         } else {
             state.list.push({
@@ -21,22 +41,53 @@ export const poolsSlice = createSlice({
     })
 });
 
+export const {
+    refreshPoolsCaches
+} = poolsSlice.actions;
+
+const poolTickersUrl = aggregator => `${aggregator}/signers/tickers`;
+
 export const updatePoolsForAggregator = createAsyncThunk('pools/updateForAggregator', aggregator => {
-    return fetch(`${aggregator}/signers/tickers`)
+    const url = poolTickersUrl(aggregator);
+    return caches.match(url)
+        .then(cached => {
+            // Cache hit
+            if (cached) {
+                return cached;
+            }
+
+            // Cache miss
+            return fetch(url).then(response => {
+                if (response.status === 200) {
+                    caches.open(CACHE_NAME).then(async (cache) => {
+                        const putSuccessful = await cache.put(url, response);
+                        if (!putSuccessful) {
+                            console.error(`Failed to put cache: ${url}`);
+                        }
+                    });
+                }
+                return response.clone();
+            })
+        })
         .then(response => response.status === 200 ? response.json() : {})
         .then(data => {
             return {
                 aggregator: aggregator,
                 date: Date.now(),
                 network: data.network,
-                pools: data.signers,
+                pools: data.signers ?? [],
             };
         });
 });
 
-const poolsForAggregator = (state, aggregator) => {
-    return state.list.find(poolsData => poolsData.aggregator === aggregator);
-};
+const poolsForAggregator = createSelector( [
+        state => state.pools,
+        (state, aggregator) => aggregator
+    ],
+    (pools, aggregator) => {
+        return pools.list.find(poolsData => poolsData.aggregator === aggregator);
+    }
+);
 
 export const getPool = createSelector([
         state => state.pools,