Reworked aggregator add/remove to use the redux store

This heavily simplify the code, the only remaining complicted bit is the default
state management

Author: Alenar

mithril-explorer/components/AggregatorSetter/AddAggregatorModal.js

@@ -1,10 +1,13 @@
 import React, {useState} from 'react';
 import {Button, Form, FormGroup, Modal} from "react-bootstrap";
+import {useDispatch} from "react-redux";
+import {selectAggregator} from "../../store/settingsSlice";
 
 export default function AddAggregatorModal(props) {
   const [value, setValue] = useState("");
   const [isInvalid, setIsInvalid] = useState(false);
-
+  const dispatch = useDispatch();
+  
   function handleClose() {
     props.onAskClose();
     setIsInvalid(false);
@@ -18,8 +21,8 @@ export default function AddAggregatorModal(props) {
     try {
       // Use the url constructor to check if the value is an url
       new URL(value);
-      props.onAdd(value);
       handleClose();
+      dispatch(selectAggregator(value));
     } catch (ex) {
       console.warn("invalid url", ex);
       setIsInvalid(true);

mithril-explorer/components/AggregatorSetter/index.js

@@ -1,47 +1,26 @@
-import React, {useEffect, useReducer, useState} from 'react';
+import React, {useState} from 'react';
 import { Button, Col, Form, InputGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
+import {useDispatch, useSelector} from "react-redux";
+import {removeCustomAggregator, selectAggregator} from "../../store/settingsSlice";
 import AddAggregatorModal from "./AddAggregatorModal";
-import { initAggregatorList, aggregatorListReducer } from "./reducer";
 
 export default function AggregatorSetter(props) {
   const [showAddModal, toggleAddModal] = useState(false);
-  const [state, dispatch] =
-    useReducer(
-      aggregatorListReducer,
-      [props.aggregator, props.defaultAvailableAggregators],
-      initAggregatorList);
-  
-  useEffect(() => {
-    const aggregator = props.aggregator;
-    dispatch({type: 'addAggregator', aggregator: aggregator});
-    props.onAggregatorChange(aggregator);
-  }, [props.aggregator]);
+  const selectedAggregator = useSelector((state) => state.settings.selectedAggregator);
+  const availableAggregators = useSelector((state) => state.settings.availableAggregators);
+  const canRemoveSelected = useSelector((state) => state.settings.canRemoveSelected);
+  const dispatch = useDispatch();
 
   function copySelected() {
-    if (window.isSecureContext && props.aggregator) {
-      navigator.clipboard.writeText(props.aggregator).then(() => { });
+    if (window.isSecureContext && selectedAggregator) {
+      navigator.clipboard.writeText(selectedAggregator).then(() => { });
     }
   }
 
-  function handleChange(aggregator) {
-    dispatch({type: 'aggregatorSelected', aggregator: aggregator});
-    props.onAggregatorChange(aggregator);
-  }
-
-  function addAggregatorSource(aggregator) {
-    props.onAggregatorChange(aggregator);
-  }
-
-  function deleteSelectedAggregatorSource() {
-    dispatch({type: 'deleteSelected', aggregator: props.aggregator});
-    props.onAggregatorChange(state.availableAggregators.at(0));
-  }
-
   return (
     <>
       <AddAggregatorModal
         show={showAddModal}
-        onAdd={addAggregatorSource}
         onAskClose={() => toggleAddModal(false)} />
 
       <Form.Group as={Col} className={props.className}>
@@ -50,20 +29,20 @@ export default function AggregatorSetter(props) {
           <Button variant="outline-success" onClick={() => toggleAddModal(true)}>
             <i className="bi bi-plus-circle"></i>
           </Button>
-          {state.canRemoveSelected &&
+          {canRemoveSelected &&
             <>
-              <Button variant="outline-danger" onClick={deleteSelectedAggregatorSource}>
+              <Button variant="outline-danger" onClick={() => dispatch(removeCustomAggregator())}>
                 <i className="bi bi-dash-circle"></i>
               </Button>
               <OverlayTrigger overlay={<Tooltip>Unofficial Aggregator</Tooltip>}>
-                <Button variant="outline-warning" onClick={copySelected}>
+                <Button variant="outline-warning">
                   <i className="bi bi-exclamation-triangle"></i>
                 </Button>
               </OverlayTrigger>
             </>
           }
-          <Form.Select value={props.aggregator} onChange={e => handleChange(e.target.value)}>
-            {state.availableAggregators.map((aggregator, index) =>
+          <Form.Select value={selectedAggregator} onChange={(e) => dispatch(selectAggregator(e.target.value))}>
+            {availableAggregators.map((aggregator, index) =>
               <option key={"agg-" + index} value={aggregator}>{aggregator}</option>
             )}
           </Form.Select>

mithril-explorer/components/AggregatorSetter/reducer.js

@@ -1,24 +1,26 @@
 import React, { useState, useEffect } from 'react';
 import { Badge, Button, Container, Col, ListGroup, Modal, OverlayTrigger, Row, Table, Tooltip } from "react-bootstrap";
+import {useSelector} from "react-redux";
 import RawJsonButton from "../RawJsonButton";
 import VerifiedBadge from '../VerifiedBadge';
 
 export default function CertificateModal(props) {
   const [certificate, setCertificate] = useState({});
+  const aggregator = useSelector((state) => state.settings.selectedAggregator);
 
   useEffect(() => {
     if (!props.hash) {
       return;
     }
 
-    fetch(`${props.aggregator}/certificate/${props.hash}`)
+    fetch(`${aggregator}/certificate/${props.hash}`)
       .then(response => response.status === 200 ? response.json() : {})
       .then(data => setCertificate(data))
       .catch(error => {
         setCertificate({});
         console.error("Fetch certificate error:", error);
       });
-  }, [props.aggregator, props.hash]);
+  }, [aggregator, props.hash]);
 
   function showPrevious() {
     props.onHashChange(certificate.previous_hash);
@@ -110,7 +112,7 @@ export default function CertificateModal(props) {
             <Button size="sm" onClick={showPrevious} className="text-break">Previous hash: {certificate.previous_hash}</Button>
           </>
         }
-        <RawJsonButton href={`${props.aggregator}/certificate/${props.hash}`} size="sm" />
+        <RawJsonButton href={`${aggregator}/certificate/${props.hash}`} size="sm" />
       </Modal.Footer>
     </Modal>
   );

mithril-explorer/components/CertificateModal/index.js

@@ -5,6 +5,7 @@ import {useSelector} from "react-redux";
 
 export default function EpochSettings(props) {
   const [epochSettings, setEpochSettings] = useState({});
+  const aggregator = useSelector((state) => state.settings.selectedAggregator);
   const autoUpdate = useSelector((state) => state.settings.autoUpdate);
   const updateInterval = useSelector((state) => state.settings.updateInterval);
 
@@ -14,7 +15,7 @@ export default function EpochSettings(props) {
     }
 
     let fetchEpochSettings = () => {
-      fetch(`${props.aggregator}/epoch-settings`)
+      fetch(`${aggregator}/epoch-settings`)
         .then(response => response.status === 200 ? response.json() : {})
         .then(data => setEpochSettings(data))
         .catch(error => {
@@ -28,13 +29,13 @@ export default function EpochSettings(props) {
 
     const interval = setInterval(fetchEpochSettings, updateInterval);
     return () => clearInterval(interval);
-  }, [props.aggregator, updateInterval, autoUpdate]);
+  }, [aggregator, updateInterval, autoUpdate]);
 
   return (
     <div>
       <h2>
         Epoch Settings
-        <RawJsonButton href={`${props.aggregator}/epoch-settings`} variant="outline-light" size="sm" />
+        <RawJsonButton href={`${aggregator}/epoch-settings`} variant="outline-light" size="sm" />
       </h2>
 
       <Card>

mithril-explorer/components/EpochSettings/index.js

@@ -0,0 +1,25 @@
+import {useDispatch, useSelector} from "react-redux";
+import {Button, InputGroup, Form, Col} from "react-bootstrap";
+import {setUpdateInterval, toggleAutoUpdate} from "../../store/settingsSlice";
+
+export default function IntervalSetter(props) {
+  const autoUpdate = useSelector((state) => state.settings.autoUpdate);
+  const updateInterval = useSelector((state) => state.settings.updateInterval);
+  const dispatch = useDispatch();
+
+  return (
+    <Form.Group as={Col} className={props.className}>
+      <Form.Label>Update Interval:</Form.Label>
+      <InputGroup>
+        <Button type="button" onClick={() => dispatch(toggleAutoUpdate())} variant={autoUpdate ? "primary" : "success"}>
+          {autoUpdate ? "Pause ⏸" : "Resume ▶"}
+        </Button>
+        <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>
+        </Form.Select>
+      </InputGroup>
+    </Form.Group>
+  );
+}

mithril-explorer/components/IntervalSetter/index.js

@@ -6,6 +6,7 @@ import {useSelector} from "react-redux";
 
 export default function PendingCertificate(props) {
   const [pendingCertificate, setPendingCertificate] = useState({});
+  const aggregator = useSelector((state) => state.settings.selectedAggregator);
   const autoUpdate = useSelector((state) => state.settings.autoUpdate);
   const updateInterval = useSelector((state) => state.settings.updateInterval);
 
@@ -15,7 +16,7 @@ export default function PendingCertificate(props) {
     }
 
     let fetchPendingCertificate = () => {
-      fetch(`${props.aggregator}/certificate-pending`)
+      fetch(`${aggregator}/certificate-pending`)
         .then(response => response.status === 200 ? response.json() : {})
         .then(data => setPendingCertificate(data))
         .catch(error => {
@@ -29,15 +30,15 @@ export default function PendingCertificate(props) {
 
     const interval = setInterval(fetchPendingCertificate, updateInterval);
     return () => clearInterval(interval);
-  }, [props.aggregator, updateInterval, autoUpdate]);
+  }, [aggregator, updateInterval, autoUpdate]);
 
   return (
     <div className={props.className}>
       <h2>
         Pending Certificate
         {Object.entries(pendingCertificate).length !== 0 &&
           <RawJsonButton
-            href={`${props.aggregator}/certificate-pending`}
+            href={`${aggregator}/certificate-pending`}
             variant="outline-light"
             size="sm" />
         }

mithril-explorer/components/PendingCertificate/index.js

@@ -22,6 +22,7 @@ function formatBytes(bytes, decimals = 2) {
 export default function SnapshotsList(props) {
   const [snapshots, setSnapshots] = useState([]);
   const [selectedCertificateHash, setSelectedCertificateHash] = useState(undefined);
+  const aggregator = useSelector((state) => state.settings.selectedAggregator);
   const autoUpdate = useSelector((state) => state.settings.autoUpdate);
   const updateInterval = useSelector((state) => state.settings.updateInterval);
 
@@ -31,7 +32,7 @@ export default function SnapshotsList(props) {
     }
 
     let fetchSnapshots = () => {
-      fetch(`${props.aggregator}/snapshots`)
+      fetch(`${aggregator}/snapshots`)
         .then(response => response.json())
         .then(data => setSnapshots(data))
         .catch(error => {
@@ -45,7 +46,7 @@ export default function SnapshotsList(props) {
 
     const interval = setInterval(fetchSnapshots, updateInterval);
     return () => clearInterval(interval);
-  }, [props.aggregator, updateInterval, autoUpdate]);
+  }, [aggregator, updateInterval, autoUpdate]);
 
   function handleCertificateHashChange(hash) {
     setSelectedCertificateHash(hash);
@@ -58,12 +59,12 @@ export default function SnapshotsList(props) {
   return (
     <>
       <CertificateModal
-        aggregator={props.aggregator}
+        aggregator={aggregator}
         hash={selectedCertificateHash}
         onHashChange={handleCertificateHashChange} />
 
       <div className={props.className}>
-        <h2>Snapshots <RawJsonButton href={`${props.aggregator}/snapshots`} variant="outline-light" size="sm" /></h2>
+        <h2>Snapshots <RawJsonButton href={`${aggregator}/snapshots`} variant="outline-light" size="sm" /></h2>
         {Object.entries(snapshots).length === 0
           ? <p>No snapshot available</p>
           :
@@ -92,7 +93,7 @@ export default function SnapshotsList(props) {
                         }
                         <Badge bg="secondary">{snapshot.beacon.network}</Badge>
 
-                        <RawJsonButton href={`${props.aggregator}/snapshot/${snapshot.digest}`} size="sm" className="ms-auto" />
+                        <RawJsonButton href={`${aggregator}/snapshot/${snapshot.digest}`} size="sm" className="ms-auto" />
                       </Stack>
                     </Card.Footer>
                   </Card>