Implement separate state for server and app settings

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
 };

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) {
+  setSavingStatus(type) {
-    if (!this.setSavingStateSaved) {
+    const status = this.state.status;
-      this.setSavingStateSaved = debounce(() => {
+    status[type] = 'saving';
-        this.saveConfig((err) => {
+
-          if (err) {
+    this.setState({status}, () => {
-            this.setState({savingState: 'error'});
+      this.saveConfig((err) => {
-          } else {
+        if (err) {
-            this.setState({savingState: 'saved'});
+          status[type] = 'error';
-          }
+        } else {
-          this.setSavingStateDoneTimer = setTimeout(this.setState.bind(this, {savingState: 'done'}), 2000);
+          status[type] = 'saved';
-        });
+        }
-      }, 500);
+
-    }
+        this.setToDone(status, type);
-    if (this.setSavingStateDoneTimer) {
+      });
-      clearTimeout(this.setSavingStateDoneTimer);
+    });
-      this.setSavingStateDoneTimer = null;
+  },
-    }
+
-    this.setState({savingState: state, savingType: type});
+  setToDone(status, type) {
-    if (state === 'saving') {
+    this.setState({status}, () => {
-      this.setSavingStateSaved();
+      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.status.app}
-              savingState={this.state.savingState}
               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.status.server}
-                  savingState={this.state.savingState}
                   errorMessage={'Can\'t save your changes. Please try again.'}
                 />
               </div>