From 3883aba9fb1981d2a9e5cddae1104add29c54a35 Mon Sep 17 00:00:00 2001
From: Wesley van der Sanden <wesley.vandersanden@coosto.com>
Date: Sat, 21 Oct 2017 21:31:01 +0200
Subject: [PATCH] Implement separate state for server and app settings

---
 src/browser/components/AutoSaveIndicator.jsx |  6 +-
 src/browser/components/SettingsPage.jsx      | 69 ++++++++++++--------
 2 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/browser/components/AutoSaveIndicator.jsx b/src/browser/components/AutoSaveIndicator.jsx
index ae764ccd..754678c3 100644
--- a/src/browser/components/AutoSaveIndicator.jsx
+++ b/src/browser/components/AutoSaveIndicator.jsx
@@ -21,11 +21,8 @@ function getClassNameAndMessage(savingState, errorMessage) {
 }
 
 function AutoSaveIndicator(props) {
-  const {show, savingState, errorMessage, ...rest} = props;
+  const {savingState, errorMessage, ...rest} = props;
   const {className, message} = getClassNameAndMessage(savingState, errorMessage);
-  if (!show) {
-    return null;
-  }
 
   return (
     <Alert
@@ -39,7 +36,6 @@ function AutoSaveIndicator(props) {
 }
 
 AutoSaveIndicator.propTypes = {
-  show: PropTypes.bool,
   savingState: PropTypes.string.isRequired,
   errorMessage: PropTypes.string
 };
diff --git a/src/browser/components/SettingsPage.jsx b/src/browser/components/SettingsPage.jsx
index 307c05fe..fb4bdd28 100644
--- a/src/browser/components/SettingsPage.jsx
+++ b/src/browser/components/SettingsPage.jsx
@@ -6,7 +6,6 @@ const {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} =
 
 const {ipcRenderer, remote} = require('electron');
 const AutoLaunch = require('auto-launch');
-const {debounce} = require('underscore');
 
 const settings = require('../../common/settings');
 
@@ -42,7 +41,10 @@ const SettingsPage = createReactClass({
     if (initialState.teams.length === 0) {
       initialState.showAddTeamForm = true;
     }
-    initialState.savingState = 'done';
+    initialState.status = {
+      app: 'done',
+      server: 'done'
+    };
 
     return initialState;
   },
@@ -65,31 +67,44 @@ const SettingsPage = createReactClass({
     });
   },
 
-  setSavingState(state, type) {
-    if (!this.setSavingStateSaved) {
-      this.setSavingStateSaved = debounce(() => {
-        this.saveConfig((err) => {
-          if (err) {
-            this.setState({savingState: 'error'});
-          } else {
-            this.setState({savingState: 'saved'});
-          }
-          this.setSavingStateDoneTimer = setTimeout(this.setState.bind(this, {savingState: 'done'}), 2000);
-        });
-      }, 500);
-    }
-    if (this.setSavingStateDoneTimer) {
-      clearTimeout(this.setSavingStateDoneTimer);
-      this.setSavingStateDoneTimer = null;
-    }
-    this.setState({savingState: state, savingType: type});
-    if (state === 'saving') {
-      this.setSavingStateSaved();
-    }
+  setSavingStatus(type) {
+    const status = this.state.status;
+    status[type] = 'saving';
+
+    this.setState({status}, () => {
+      this.saveConfig((err) => {
+        if (err) {
+          status[type] = 'error';
+        } else {
+          status[type] = 'saved';
+        }
+
+        this.setToDone(status, type);
+      });
+    });
+  },
+
+  setToDone(status, type) {
+    this.setState({status}, () => {
+      if (!this.doneTimeout) {
+        this.doneTimeout = [];
+      }
+
+      if (this.doneTimeout[type]) {
+        clearTimeout(this.doneTimeout[type]);
+      }
+
+      this.doneTimeout[type] = setTimeout(() => {
+        status[type] = 'done';
+        this.setState({status});
+      }, 2000);
+    });
   },
 
   startSaveConfig(type = 'app') {
-    this.setSavingState('saving', type);
+    if (this.state.status[type] !== 'saving') {
+      this.setSavingStatus(type);
+    }
   },
 
   handleTeamsChange(teams) {
@@ -429,8 +444,7 @@ const SettingsPage = createReactClass({
           <h2 style={settingsPage.sectionHeading}>{'App Options'}</h2>
           <div className='IndicatorContainer'>
             <AutoSaveIndicator
-              show={this.state.savingType === 'app'}
-              savingState={this.state.savingState}
+              savingState={this.state.status.app}
               errorMessage={'Can\'t save your changes. Please try again.'}
             />
           </div>
@@ -474,8 +488,7 @@ const SettingsPage = createReactClass({
               <h2 style={settingsPage.sectionHeading}>{'Server Management'}</h2>
               <div className='IndicatorContainer'>
                 <AutoSaveIndicator
-                  show={this.state.savingType === 'server'}
-                  savingState={this.state.savingState}
+                  savingState={this.state.status.server}
                   errorMessage={'Can\'t save your changes. Please try again.'}
                 />
               </div>