Move updateInterval to redux store

Author: Alenar

mithril-explorer/components/EpochSettings/index.js

@@ -6,6 +6,7 @@ import {useSelector} from "react-redux";
 export default function EpochSettings(props) {
   const [epochSettings, setEpochSettings] = useState({});
   const autoUpdate = useSelector((state) => state.settings.autoUpdate);
+  const updateInterval = useSelector((state) => state.settings.updateInterval);
 
   useEffect(() => {
     if (!autoUpdate) {
@@ -25,9 +26,9 @@ export default function EpochSettings(props) {
     // Fetch it once without waiting
     fetchEpochSettings();
 
-    const interval = setInterval(fetchEpochSettings, props.updateInterval);
+    const interval = setInterval(fetchEpochSettings, updateInterval);
     return () => clearInterval(interval);
-  }, [props.aggregator, props.updateInterval, autoUpdate]);
+  }, [props.aggregator, updateInterval, autoUpdate]);
 
   return (
     <div>

mithril-explorer/components/PendingCertificate/index.js

@@ -7,6 +7,7 @@ import {useSelector} from "react-redux";
 export default function PendingCertificate(props) {
   const [pendingCertificate, setPendingCertificate] = useState({});
   const autoUpdate = useSelector((state) => state.settings.autoUpdate);
+  const updateInterval = useSelector((state) => state.settings.updateInterval);
 
   useEffect(() => {
     if (!autoUpdate) {
@@ -26,9 +27,9 @@ export default function PendingCertificate(props) {
     // Fetch it once without waiting
     fetchPendingCertificate();
 
-    const interval = setInterval(fetchPendingCertificate, props.updateInterval);
+    const interval = setInterval(fetchPendingCertificate, updateInterval);
     return () => clearInterval(interval);
-  }, [props.aggregator, props.updateInterval, autoUpdate]);
+  }, [props.aggregator, updateInterval, autoUpdate]);
 
   return (
     <div className={props.className}>

mithril-explorer/components/SnapshotsList/index.js

@@ -23,6 +23,7 @@ export default function SnapshotsList(props) {
   const [snapshots, setSnapshots] = useState([]);
   const [selectedCertificateHash, setSelectedCertificateHash] = useState(undefined);
   const autoUpdate = useSelector((state) => state.settings.autoUpdate);
+  const updateInterval = useSelector((state) => state.settings.updateInterval);
 
   useEffect(() => {
     if (!autoUpdate) {
@@ -42,9 +43,9 @@ export default function SnapshotsList(props) {
     // Fetch them once without waiting
     fetchSnapshots(); 
 
-    const interval = setInterval(fetchSnapshots, props.updateInterval);
+    const interval = setInterval(fetchSnapshots, updateInterval);
     return () => clearInterval(interval);
-  }, [props.aggregator, props.updateInterval, autoUpdate]);
+  }, [props.aggregator, updateInterval, autoUpdate]);
 
   function handleCertificateHashChange(hash) {
     setSelectedCertificateHash(hash);

mithril-explorer/pages/index.js

@@ -10,15 +10,12 @@ import available_aggregators from "../aggregators-list";
 import {useRouter} from "next/router";
 import EpochSettings from "../components/EpochSettings";
 import {useDispatch, useSelector} from "react-redux";
-import {toggleAutoUpdate} from "../store/settingsSlice";
+import {setUpdateInterval, toggleAutoUpdate} from "../store/settingsSlice";
 
 function IntervalSetter(props) {
   const autoUpdate = useSelector((state) => state.settings.autoUpdate);
+  const updateInterval = useSelector((state) => state.settings.updateInterval);
   const dispatch = useDispatch();
-  
-  function handleChange(event) {
-    props.onIntervalChange(parseInt(event.target.value));
-  }
 
   return (
     <Form.Group as={Col} className={props.className}>
@@ -27,7 +24,7 @@ function IntervalSetter(props) {
         <Button type="button" onClick={() => dispatch(toggleAutoUpdate())} variant={autoUpdate ? "primary" : "success"}>
           {autoUpdate ? "Pause ⏸" : "Resume ▶"}
         </Button>
-        <Form.Select value={props.interval} onChange={handleChange}>
+        <Form.Select value={updateInterval} onChange={(e) => dispatch(setUpdateInterval(e.target.value))}>
           <option value={1000}>1 seconds</option>
           <option value={5000}>5 seconds</option>
           <option value={10000}>10 seconds</option>
@@ -40,8 +37,6 @@ function IntervalSetter(props) {
 export default function Explorer() {
   const router = useRouter();
   const [aggregator, setAggregator] = useState(available_aggregators[0]);
-  const [interval, setInterval] = useState(10000);
-  const autoUpdate = useSelector((state) => state.settings.autoUpdate);
 
   useEffect(() => {
     if (router.query?.aggregator && router.query?.aggregator !== aggregator) {
@@ -80,20 +75,18 @@ export default function Explorer() {
                   aggregator={aggregator}
                   onAggregatorChange={handleApiChange}
                   defaultAvailableAggregators={available_aggregators} />
-                <IntervalSetter
-                  interval={interval}
-                  onIntervalChange={handleIntervalChange} />
+                <IntervalSetter />
               </Row>
             </Form>
             <Row>
               <Col>
-                <EpochSettings aggregator={aggregator} updateInterval={interval}  />
+                <EpochSettings aggregator={aggregator} />
               </Col>
               <Col xs={8}>
-                <PendingCertificate aggregator={aggregator} updateInterval={interval} />
+                <PendingCertificate aggregator={aggregator} />
               </Col>
             </Row>
-            <SnapshotsList aggregator={aggregator} updateInterval={interval} autoUpdate={autoUpdate} />
+            <SnapshotsList aggregator={aggregator} />
           </Stack>
         </main>
       </div>

mithril-explorer/store/settingsSlice.js

@@ -5,19 +5,19 @@ export const settingsSlice = createSlice({
   name: 'settings',
   initialState: {
     aggregator: available_aggregators[0],
-    interval: 10000,
+    updateInterval: 10000,
     autoUpdate: true,
   },
   reducers: {
-    setFetchInterval: (state, action) => {
-      state.interval = state.value;
+    setUpdateInterval: (state, action) => {
+      state.updateInterval = action.payload;
     },
     toggleAutoUpdate: (state) => {
       state.autoUpdate = !state.autoUpdate;
     },
   }
 });
 
-export const { setFetchInterval, toggleAutoUpdate } = settingsSlice.actions;
+export const { setUpdateInterval, toggleAutoUpdate } = settingsSlice.actions;
 
 export default settingsSlice.reducer;