Use react reducer for AggregatorSetter

Author: Alenar

mithril-explorer/components/AggregatorSetter/index.js

@@ -1,98 +1,56 @@
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useReducer, useState} from 'react';
 import { Button, Col, Form, InputGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import AddAggregatorModal from "./AddAggregatorModal";
+import { initAggregatorList, aggregatorListReducer } from "./reducer";
 
 export default function AggregatorSetter(props) {
-  const CUSTOM_AGGREGATORS_KEY = "CUSTOM_AGGREGATORS";
-  const [availableAggregators, setAvailableAggregators] = useState([]);
   const [showAddModal, toggleAddModal] = useState(false);
-  const [canRemoveSelected, setCanRemoveSelected] = useState(false);
-
-  useEffect(() => {
-    setAvailableAggregators(getAggregatorsList());
-  }, [props.defaultAvailableAggregators]);
-
+  const [state, dispatch] =
+    useReducer(
+      aggregatorListReducer,
+      [props.aggregator, props.defaultAvailableAggregators],
+      initAggregatorList);
+  
   useEffect(() => {
-    setCanRemoveSelected(!props.defaultAvailableAggregators.includes(props.aggregator));
-
-    let aggregators = getAggregatorsList();
-    if (!aggregators.includes(props.aggregator)) {
-      aggregators.push(props.aggregator);
-      saveCustomAggregatorSources(aggregators);
-      setAvailableAggregators(aggregators);
-    }
-  }, [props.aggregator]);
-
-  function getAggregatorsList() {
-    let aggregators = [...props.defaultAvailableAggregators];
-
-    const storedAggregators = JSON.parse(localStorage.getItem(CUSTOM_AGGREGATORS_KEY));
-    if (storedAggregators) {
-      aggregators = aggregators.concat(storedAggregators);
-    }
-
-    return aggregators;
-  }
-
-  function handleChange(aggregator) {
+    const aggregator = props.aggregator;
+    dispatch({type: 'addAggregator', aggregator: aggregator});
     props.onAggregatorChange(aggregator);
-  }
+  }, [props.aggregator]);
 
   function copySelected() {
     if (window.isSecureContext && props.aggregator) {
       navigator.clipboard.writeText(props.aggregator).then(() => { });
     }
   }
 
-  function showAddAggregatorSourceModal() {
-    toggleAddModal(true);
-  }
-
-  function hideAddAggregatorSourceModal() {
-    toggleAddModal(false);
+  function handleChange(aggregator) {
+    dispatch({type: 'aggregatorSelected', aggregator: aggregator});
+    props.onAggregatorChange(aggregator);
   }
 
   function addAggregatorSource(aggregator) {
-    if (availableAggregators.includes(aggregator)) {
-      return;
-    }
-
-    const aggregators = [...availableAggregators, aggregator];
-    setAvailableAggregators(aggregators);
-    handleChange(aggregator);
-    saveCustomAggregatorSources(aggregators);
+    props.onAggregatorChange(aggregator);
   }
 
   function deleteSelectedAggregatorSource() {
-    if (!canRemoveSelected) {
-      return;
-    }
-
-    const aggregators = availableAggregators.filter(a => a !== props.aggregator);
-    setAvailableAggregators(aggregators);
-    handleChange(availableAggregators.at(0));
-    saveCustomAggregatorSources(aggregators);
-  }
-
-  function saveCustomAggregatorSources(aggregators) {
-    const customAggregators = aggregators.filter(a => !props.defaultAvailableAggregators.includes(a));
-    localStorage.setItem(CUSTOM_AGGREGATORS_KEY, JSON.stringify(customAggregators));
+    dispatch({type: 'deleteSelected', aggregator: props.aggregator});
+    props.onAggregatorChange(state.availableAggregators.at(0));
   }
 
   return (
     <>
       <AddAggregatorModal
         show={showAddModal}
         onAdd={addAggregatorSource}
-        onAskClose={hideAddAggregatorSourceModal} />
+        onAskClose={() => toggleAddModal(false)} />
 
       <Form.Group as={Col} className={props.className}>
         <Form.Label>Aggregator:</Form.Label>
         <InputGroup>
-          <Button variant="outline-success" onClick={showAddAggregatorSourceModal}>
+          <Button variant="outline-success" onClick={() => toggleAddModal(true)}>
             <i className="bi bi-plus-circle"></i>
           </Button>
-          {canRemoveSelected &&
+          {state.canRemoveSelected &&
             <>
               <Button variant="outline-danger" onClick={deleteSelectedAggregatorSource}>
                 <i className="bi bi-dash-circle"></i>
@@ -105,7 +63,7 @@ export default function AggregatorSetter(props) {
             </>
           }
           <Form.Select value={props.aggregator} onChange={e => handleChange(e.target.value)}>
-            {availableAggregators.map((aggregator, index) =>
+            {state.availableAggregators.map((aggregator, index) =>
               <option key={"agg-" + index} value={aggregator}>{aggregator}</option>
             )}
           </Form.Select>

mithril-explorer/components/AggregatorSetter/reducer.js

@@ -0,0 +1,80 @@
+const CUSTOM_AGGREGATORS_KEY = "CUSTOM_AGGREGATORS";
+
+function init(args) {
+  const selected = args[0];
+  const defaultAvailableAggregators = args[1] ?? []
+  let aggregators = [...defaultAvailableAggregators];
+
+  if (typeof window !== 'undefined' && localStorage) {
+    const storedAggregators = JSON.parse(localStorage.getItem(CUSTOM_AGGREGATORS_KEY));
+
+    if (storedAggregators) {
+      aggregators = aggregators.concat(storedAggregators);
+    }
+  }
+
+  if (!aggregators.includes(selected)) {
+    aggregators.push(selected);
+    saveCustomAggregatorSources(aggregators, defaultAvailableAggregators);
+  }
+
+  return {
+    availableAggregators: aggregators,
+    defaultAvailableAggregators: defaultAvailableAggregators,
+    canRemoveSelected: canRemoveSelected(selected, defaultAvailableAggregators),
+  };
+}
+
+function canRemoveSelected(aggregator, defaultAvailableAggregators) {
+  return !defaultAvailableAggregators.includes(aggregator);
+}
+
+function saveCustomAggregatorSources(aggregators, defaultAvailableAggregators) {
+  if (typeof window !== 'undefined' && localStorage) {
+    const customAggregators = aggregators.filter(a => !defaultAvailableAggregators.includes(a));
+    localStorage.setItem(CUSTOM_AGGREGATORS_KEY, JSON.stringify(customAggregators));
+  }
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'aggregatorSelected':
+      return {
+        ...state,
+        canRemoveSelected: canRemoveSelected(action.aggregator, state.defaultAvailableAggregators),
+      };
+    case 'addAggregator': {
+      if (state.availableAggregators.includes(action.aggregator)) {
+        return state;
+      }
+
+      const availableAggregators = [...state.availableAggregators, action.aggregator];
+      saveCustomAggregatorSources(availableAggregators, state.defaultAvailableAggregators);
+      return {
+        ...state,
+        availableAggregators: availableAggregators,
+        canRemoveSelected: true
+      };
+    }
+    case 'deleteSelected': {
+      if (!canRemoveSelected(action.aggregator, state.defaultAvailableAggregators)) {
+        return state;
+      }
+      
+      const availableAggregators = state.availableAggregators.filter(a => a !== action.aggregator);
+      saveCustomAggregatorSources(availableAggregators, state.defaultAvailableAggregators);
+      return {
+        ...state,
+        availableAggregators: availableAggregators,
+        canRemoveSelected: canRemoveSelected(availableAggregators.at(0), state.defaultAvailableAggregators),
+      };
+    }
+    default:
+      throw new Error("Unknown action");
+  }
+}
+
+module.exports = {
+  aggregatorListReducer: reducer,
+  initAggregatorList: init
+}