From 0f2ebbcbc7ae44cf46ddb1bbc9dbd83a4e0f3f80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 20 Jul 2018 11:23:05 +0200
Subject: [PATCH] refactor(ui): split settings into dedicated classes

---
 ui/src/App.js                                 |  4 +-
 ui/src/Components/Fetcher/index.js            |  4 +-
 ui/src/Components/MainModal/Configuration.js  |  4 +-
 .../Components/NavBar/FilterInput/History.js  |  4 +-
 ui/src/Stores/Settings.js                     | 57 +++++++++++--------
 5 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/ui/src/App.js b/ui/src/App.js
index 9237f8afe..2d1be1474 100644
--- a/ui/src/App.js
+++ b/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;
       }
diff --git a/ui/src/Components/Fetcher/index.js b/ui/src/Components/Fetcher/index.js
index b4a39cbd7..f1f85e896 100644
--- a/ui/src/Components/Fetcher/index.js
+++ b/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}
         />
       );
     }
diff --git a/ui/src/Components/MainModal/Configuration.js b/ui/src/Components/MainModal/Configuration.js
index 827b46c4f..edab86199 100644
--- a/ui/src/Components/MainModal/Configuration.js
+++ b/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) {
diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index 4e66dc437..936e42361 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/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();
             }}
           >
diff --git a/ui/src/Stores/Settings.js b/ui/src/Stores/Settings.js
index ea7e05960..3e53dd987 100644
--- a/ui/src/Stores/Settings.js
+++ b/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 };