refactor(ui): split settings into dedicated classes

ui/src/App.js

@@ -31,8 +31,8 @@ class App extends Component {
     // p.defaultsUsed means that unsee URI didn't have ?q=foo query args
     if (p.defaultsUsed) {
       // no ?q=foo set, use defaults saved by the user or from backend config
-      if (this.settingsStore.savedFilters.present) {
-        filters = this.settingsStore.savedFilters.filters;
+      if (this.settingsStore.savedFilters.config.present) {
+        filters = this.settingsStore.savedFilters.config.filters;
       } else {
         filters = defaultFilters;
       }

ui/src/Components/Fetcher/index.js

@@ -21,7 +21,7 @@ const Fetcher = observer(
     setTimer() {
       const { alertStore, settingsStore } = this.props;
 
-      const newInterval = toJS(settingsStore.fetchConfig.interval);
+      const newInterval = toJS(settingsStore.fetchConfig.config.interval);
 
       if (this.interval !== newInterval) {
         if (this.timer !== null) clearInterval(this.timer);
@@ -62,7 +62,7 @@ const Fetcher = observer(
         // data-filters is there to register filters for observation in mobx
         <span
           data-filters={alertStore.filters.values.map(f => f.raw).join(" ")}
-          data-interval={settingsStore.fetchConfig.interval}
+          data-interval={settingsStore.fetchConfig.config.interval}
         />
       );
     }

ui/src/Components/MainModal/Configuration.js

@@ -20,7 +20,7 @@ const Configuration = observer(
       super(props);
 
       this.config = observable({
-        fetchInterval: toJS(props.settingsStore.fetchConfig.interval)
+        fetchInterval: toJS(props.settingsStore.fetchConfig.config.interval)
       });
     }
 
@@ -31,7 +31,7 @@ const Configuration = observer(
     onChangeComplete = action(value => {
       const { settingsStore } = this.props;
 
-      settingsStore.setFetchInterval(value);
+      settingsStore.fetchConfig.setInterval(value);
     });
 
     formatLabel(value) {

ui/src/Components/NavBar/FilterInput/History.js

@@ -82,7 +82,7 @@ const HistoryMenu = onClickOutside(
             <FontAwesomeIcon
               icon={faSave}
               onClick={() => {
-                settingsStore.saveFilters(
+                settingsStore.savedFilters.save(
                   alertStore.filters.values.map(f => f.raw)
                 );
                 afterClick();
@@ -92,7 +92,7 @@ const HistoryMenu = onClickOutside(
           <button
             className="btn btn-sm btn-danger mr-4"
             onClick={() => {
-              settingsStore.clearSavedFilters();
+              settingsStore.savedFilters.clear();
               afterClick();
             }}
           >

ui/src/Stores/Settings.js

@@ -1,35 +1,42 @@
 import { action } from "mobx";
 import { localStored } from "mobx-stored";
 
-const defaultSavedFilters = {
-  filters: [],
-  present: false
-};
+class SavedFilters {
+  config = localStored(
+    "savedFilters",
+    {
+      filters: [],
+      present: false
+    },
+    {
+      delay: 100
+    }
+  );
 
-const defaultFetchConfig = {
-  interval: 30
-};
-
-class Settings {
-  savedFilters = localStored("savedFilters", defaultSavedFilters, {
-    delay: 100
+  save = action(newFilters => {
+    this.config.filters = newFilters;
+    this.config.present = true;
   });
 
-  saveFilters = action(newFilters => {
-    this.savedFilters.filters = newFilters;
-    this.savedFilters.present = true;
-  });
-
-  clearSavedFilters = action(() => {
-    this.savedFilters.filters = [];
-    this.savedFilters.present = false;
-  });
-
-  fetchConfig = localStored("fetchConfig", defaultFetchConfig, { delay: 100 });
-
-  setFetchInterval = action(newInterval => {
-    this.fetchConfig.interval = newInterval;
+  clear = action(() => {
+    this.config.filters = [];
+    this.config.present = false;
   });
 }
 
+class FetchConfig {
+  config = localStored("fetchConfig", { interval: 30 }, { delay: 100 });
+
+  setInterval = action(newInterval => {
+    this.config.interval = newInterval;
+  });
+}
+
+class Settings {
+  constructor() {
+    this.savedFilters = new SavedFilters();
+    this.fetchConfig = new FetchConfig();
+  }
+}
+
 export { Settings };