Simplify pools cache to only rely on the store

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 {refreshPoolsCaches, updatePoolsForAggregator} from "../store/poolsSlice";
+import {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).
@@ -39,7 +39,6 @@ export default function Explorer() {
       router.push("?" + params.toString(), undefined, {shallow: true});
     }
 
-    dispatch(refreshPoolsCaches());
     dispatch(updatePoolsForAggregator(selectedAggregator));
   }, [selectedAggregator]);
 

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

@@ -8,12 +8,12 @@ import {Alert, ButtonGroup, Col, Row, Spinner, Stack, Table} from "react-bootstr
 import {ArcElement, BarElement, CategoryScale, Chart, Legend, LinearScale, Title, Tooltip} from 'chart.js';
 import {Bar, Pie} from "react-chartjs-2";
 import {aggregatorSearchParam} from "../../constants";
+import {updatePoolsForAggregator} from "../../store/poolsSlice";
 import LinkButton from "../../components/LinkButton";
 import Stake from "../../components/Stake";
 import RawJsonButton from "../../components/RawJsonButton";
 import VerifiedBadge from "../../components/VerifiedBadge";
 import PoolTicker from "../../components/PoolTicker";
-import {refreshPoolsCaches, updatePoolsForAggregator} from "../../store/poolsSlice";
 import PartyId from "../../components/PartyId";
 
 Chart.register(
@@ -80,7 +80,6 @@ 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,35 +1,22 @@
 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: {
-        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}`);
-                        }
-                    });
-                }
-            }
-        }
-    },
+    reducers: {},
     extraReducers: builder => builder.addCase(updatePoolsForAggregator.fulfilled, (state, action) => {
-        let existing = poolsForAggregator(state, action.payload.aggregator);
+        if (action.payload.keep_cached_data) {
+            return;
+        }
+        const existing = poolsForAggregator(state, action.payload.aggregator);
 
         if (existing) {
             existing.network = action.payload.network;
             existing.pools = action.payload.pools;
+            existing.date = action.payload.date;
         } else {
             state.list.push({
                 aggregator: action.payload.aggregator,
@@ -41,61 +28,36 @@ export const poolsSlice = createSlice({
     })
 });
 
-export const {
-    refreshPoolsCaches
-} = poolsSlice.actions;
+export const updatePoolsForAggregator = createAsyncThunk('pools/updateForAggregator', (aggregator, thunkAPI) => {
+    const state = thunkAPI.getState();
+    const aggregatorPools = poolsForAggregator(state.pools, aggregator);
+    const now = Date.now();
 
-const poolTickersUrl = aggregator => `${aggregator}/signers/tickers`;
+    const millisecondsSinceLastRefresh = now - (aggregatorPools?.date ?? 0);
 
-export const updatePoolsForAggregator = createAsyncThunk('pools/updateForAggregator', aggregator => {
-    const url = poolTickersUrl(aggregator);
-    return caches.match(url)
-        .then(cached => {
-            // Cache hit
-            if (cached) {
-                return cached;
-            }
+    if (millisecondsSinceLastRefresh > cacheRefreshIntervalInMilliseconds) {
+        return fetch(`${aggregator}/signers/tickers`)
+          .then(response => response.status === 200 ? response.json() : {})
+          .then(data => {
+              return {
+                  aggregator: aggregator,
+                  date: now,
+                  network: data.network,
+                  pools: data.signers ?? [],
+              };
+          });
+    }
 
-            // 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 ?? [],
-            };
-        });
+    return { keep_cached_data: true };
 });
 
-const poolsForAggregator = createSelector( [
-        state => state.pools,
-        (state, aggregator) => aggregator
-    ],
-    (pools, aggregator) => {
-        return pools.list.find(poolsData => poolsData.aggregator === aggregator);
-    }
-);
+const poolsForAggregator = (poolsSlice, aggregator) => {
+    return poolsSlice.list.find(poolsData => poolsData.aggregator === aggregator);
+}
 
 export const getPool = createSelector([
         state => state.pools,
-        (state, aggregator, poolId) => {
-    return {
-        aggregator: aggregator,
-        poolId: poolId
-    }},
+        (state, aggregator, poolId) => ({ aggregator: aggregator, poolId: poolId, }),
     ],
     (pools, args) => {
     const aggregator = poolsForAggregator(pools, args.aggregator);