Merge pull request #1286 from input-output-hk/djo/1185/cache_spo_tickers_calls_in_explorer

Cache `/signers/tickers` calls in explorer

Author: Alenar

mithril-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-explorer",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "private": true,
   "scripts": {
     "dev": "next dev",

mithril-explorer/src/app/page.js

@@ -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);

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 {updatePoolsForAggregator} from "../../store/poolsSlice";
 import PartyId from "../../components/PartyId";
 
 Chart.register(

mithril-explorer/src/store/poolsSlice.js

@@ -1,15 +1,22 @@
 import {createAsyncThunk, createSelector, createSlice} from "@reduxjs/toolkit";
 
+// Delete all caches older than 6 hours
+const cacheRefreshIntervalInMilliseconds = 6 * 3600 * 1000;
+
 export const poolsSlice = createSlice({
     name: 'pools',
     initialState: { list: [] },
     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.date = action.payload.date;
+            existing.network = action.payload.network;
             existing.pools = action.payload.pools;
+            existing.date = action.payload.date;
         } else {
             state.list.push({
                 aggregator: action.payload.aggregator,
@@ -21,30 +28,36 @@ export const poolsSlice = createSlice({
     })
 });
 
-export const updatePoolsForAggregator = createAsyncThunk('pools/updateForAggregator', aggregator => {
-    return fetch(`${aggregator}/signers/tickers`)
-        .then(response => response.status === 200 ? response.json() : {})
-        .then(data => {
-            return {
-                aggregator: aggregator,
-                date: Date.now(),
-                network: data.network,
-                pools: data.signers,
-            };
-        });
+export const updatePoolsForAggregator = createAsyncThunk('pools/updateForAggregator', (aggregator, thunkAPI) => {
+    const state = thunkAPI.getState();
+    const aggregatorPools = poolsForAggregator(state.pools, aggregator);
+    const now = Date.now();
+
+    const millisecondsSinceLastRefresh = now - (aggregatorPools?.date ?? 0);
+
+    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 ?? [],
+              };
+          });
+    }
+
+    return { keep_cached_data: true };
 });
 
-const poolsForAggregator = (state, aggregator) => {
-    return state.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);