Set current aggregator in url in explorer

And save it to the local storage if it's not known.

Author: Alenar

mithril-explorer/components/AggregatorSetter/AddAggregatorModal.js

@@ -8,6 +8,7 @@ export default function AddAggregatorModal(props) {
   function handleClose() {
     props.onAskClose();
     setIsInvalid(false);
+    setValue("");
   }
 
   function handleSave(event) {

mithril-explorer/components/AggregatorSetter/index.js

@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from 'react';
-import {Button, Col, Form, InputGroup, OverlayTrigger, Tooltip} from "react-bootstrap";
+import React, { useEffect, useState } from 'react';
+import { Button, Col, Form, InputGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import AddAggregatorModal from "./AddAggregatorModal";
 
 export default function AggregatorSetter(props) {
@@ -9,27 +9,38 @@ export default function AggregatorSetter(props) {
   const [canRemoveSelected, setCanRemoveSelected] = useState(false);
 
   useEffect(() => {
-    let aggregators = props.defaultAvailableAggregators;
-    
-    const storedAggregators = JSON.parse(localStorage.getItem(CUSTOM_AGGREGATORS_KEY));
-    if (storedAggregators) {
-      aggregators = aggregators.concat(storedAggregators);
-    }
-    
-    setAvailableAggregators(aggregators);
+    setAvailableAggregators(getAggregatorsList());
   }, [props.defaultAvailableAggregators]);
 
   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) {
     props.onAggregatorChange(aggregator);
   }
 
   function copySelected() {
     if (window.isSecureContext && props.aggregator) {
-      navigator.clipboard.writeText(props.aggregator).then(() => {});
+      navigator.clipboard.writeText(props.aggregator).then(() => { });
     }
   }
 
@@ -62,10 +73,9 @@ export default function AggregatorSetter(props) {
     handleChange(availableAggregators.at(0));
     saveCustomAggregatorSources(aggregators);
   }
-  
+
   function saveCustomAggregatorSources(aggregators) {
     const customAggregators = aggregators.filter(a => !props.defaultAvailableAggregators.includes(a));
-    console.log("save", customAggregators, aggregators, props.defaultAvailableAggregators);
     localStorage.setItem(CUSTOM_AGGREGATORS_KEY, JSON.stringify(customAggregators));
   }
 
@@ -74,7 +84,7 @@ export default function AggregatorSetter(props) {
       <AddAggregatorModal
         show={showAddModal}
         onAdd={addAggregatorSource}
-        onAskClose={hideAddAggregatorSourceModal}/>
+        onAskClose={hideAddAggregatorSourceModal} />
 
       <Form.Group as={Col} className={props.className}>
         <Form.Label>Aggregator:</Form.Label>
@@ -83,9 +93,16 @@ export default function AggregatorSetter(props) {
             <i className="bi bi-plus-circle"></i>
           </Button>
           {canRemoveSelected &&
-            <Button variant="outline-danger" onClick={deleteSelectedAggregatorSource}>
-              <i className="bi bi-dash-circle"></i>
-            </Button>
+            <>
+              <Button variant="outline-danger" onClick={deleteSelectedAggregatorSource}>
+                <i className="bi bi-dash-circle"></i>
+              </Button>
+              <OverlayTrigger overlay={<Tooltip>Unofficial Aggregator</Tooltip>}>
+                <Button variant="outline-warning" onClick={copySelected}>
+                  <i className="bi bi-exclamation-triangle"></i>
+                </Button>
+              </OverlayTrigger>
+            </>
           }
           <Form.Select value={props.aggregator} onChange={e => handleChange(e.target.value)}>
             {availableAggregators.map((aggregator, index) =>

mithril-explorer/pages/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import PendingCertificate from '../components/PendingCertificate';
 import SnapshotsList from '../components/SnapshotsList';
 import Head from "next/head";
@@ -7,6 +7,7 @@ import { Form, Stack, Button, Row, Col, InputGroup } from "react-bootstrap";
 import styles from "../styles/Home.module.css";
 import AggregatorSetter from "../components/AggregatorSetter";
 import available_aggregators from "../aggregators-list";
+import {useRouter} from "next/router";
 
 function IntervalSetter(props) {
   function handleChange(event) {
@@ -35,12 +36,24 @@ function IntervalSetter(props) {
 }
 
 export default function Explorer() {
+  const router = useRouter();
   const [aggregator, setAggregator] = useState(available_aggregators[0]);
   const [interval, setInterval] = useState(10000);
   const [autoUpdate, setAutoUpdate] = useState(true);
+  
+  useEffect(() => {
+    if (router.query?.aggregator && router.query?.aggregator !== aggregator) {
+      const autoUpdateState = autoUpdate;
+      
+      setAutoUpdate(false);
+      setAggregator(router.query.aggregator);
+      setAutoUpdate(autoUpdateState);
+    }
+  }, [router.query]);
 
   function handleApiChange(api) {
     setAggregator(api);
+    router.push({query: {aggregator: api}}).then(() => {});
   }
 
   function handleStartStopButtonPress(isPressed) {