Use constants for AutoSaveIndicator savingState
This commit is contained in:
parent
7aa673a079
commit
594f1d47ed
|
@ -5,15 +5,20 @@ const {Alert} = require('react-bootstrap');
|
||||||
const baseClassName = 'AutoSaveIndicator';
|
const baseClassName = 'AutoSaveIndicator';
|
||||||
const leaveClassName = `${baseClassName}-Leave`;
|
const leaveClassName = `${baseClassName}-Leave`;
|
||||||
|
|
||||||
|
const SAVING_STATE_SAVING = 'saving';
|
||||||
|
const SAVING_STATE_SAVED = 'saved';
|
||||||
|
const SAVING_STATE_ERROR = 'error';
|
||||||
|
const SAVING_STATE_DONE = 'done';
|
||||||
|
|
||||||
function getClassNameAndMessage(savingState, errorMessage) {
|
function getClassNameAndMessage(savingState, errorMessage) {
|
||||||
switch (savingState) {
|
switch (savingState) {
|
||||||
case 'saving':
|
case SAVING_STATE_SAVING:
|
||||||
return {className: baseClassName, message: 'Saving...'};
|
return {className: baseClassName, message: 'Saving...'};
|
||||||
case 'saved':
|
case SAVING_STATE_SAVED:
|
||||||
return {className: baseClassName, message: 'Saved'};
|
return {className: baseClassName, message: 'Saved'};
|
||||||
case 'error':
|
case SAVING_STATE_ERROR:
|
||||||
return {className: `${baseClassName}`, message: errorMessage};
|
return {className: `${baseClassName}`, message: errorMessage};
|
||||||
case 'done':
|
case SAVING_STATE_DONE:
|
||||||
return {className: `${baseClassName} ${leaveClassName}`, message: 'Saved'};
|
return {className: `${baseClassName} ${leaveClassName}`, message: 'Saved'};
|
||||||
default:
|
default:
|
||||||
return {className: `${baseClassName} ${leaveClassName}`, message: ''};
|
return {className: `${baseClassName} ${leaveClassName}`, message: ''};
|
||||||
|
@ -23,7 +28,6 @@ function getClassNameAndMessage(savingState, errorMessage) {
|
||||||
function AutoSaveIndicator(props) {
|
function AutoSaveIndicator(props) {
|
||||||
const {savingState, errorMessage, ...rest} = props;
|
const {savingState, errorMessage, ...rest} = props;
|
||||||
const {className, message} = getClassNameAndMessage(savingState, errorMessage);
|
const {className, message} = getClassNameAndMessage(savingState, errorMessage);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Alert
|
<Alert
|
||||||
className={className}
|
className={className}
|
||||||
|
@ -40,4 +44,11 @@ AutoSaveIndicator.propTypes = {
|
||||||
errorMessage: PropTypes.string
|
errorMessage: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Object.assign(AutoSaveIndicator, {
|
||||||
|
SAVING_STATE_SAVING,
|
||||||
|
SAVING_STATE_SAVED,
|
||||||
|
SAVING_STATE_ERROR,
|
||||||
|
SAVING_STATE_DONE
|
||||||
|
});
|
||||||
|
|
||||||
module.exports = AutoSaveIndicator;
|
module.exports = AutoSaveIndicator;
|
||||||
|
|
|
@ -46,8 +46,8 @@ const SettingsPage = createReactClass({
|
||||||
initialState.showAddTeamForm = true;
|
initialState.showAddTeamForm = true;
|
||||||
}
|
}
|
||||||
initialState.savingState = {
|
initialState.savingState = {
|
||||||
appOptions: 'done',
|
appOptions: AutoSaveIndicator.SAVING_STATE_DONE,
|
||||||
servers: 'done'
|
servers: AutoSaveIndicator.SAVING_STATE_DONE
|
||||||
};
|
};
|
||||||
|
|
||||||
return initialState;
|
return initialState;
|
||||||
|
@ -82,14 +82,14 @@ const SettingsPage = createReactClass({
|
||||||
console.error(err);
|
console.error(err);
|
||||||
}
|
}
|
||||||
const savingState = Object.assign({}, this.state.savingState);
|
const savingState = Object.assign({}, this.state.savingState);
|
||||||
savingState[configType] = err ? 'error' : 'saved';
|
savingState[configType] = err ? AutoSaveIndicator.SAVING_STATE_ERROR : AutoSaveIndicator.SAVING_STATE_SAVED;
|
||||||
this.setState({savingState});
|
this.setState({savingState});
|
||||||
this.didSaveConfig(configType);
|
this.didSaveConfig(configType);
|
||||||
});
|
});
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
const savingState = Object.assign({}, this.state.savingState);
|
const savingState = Object.assign({}, this.state.savingState);
|
||||||
savingState[configType] = 'saving';
|
savingState[configType] = AutoSaveIndicator.SAVING_STATE_SAVING;
|
||||||
this.setState({savingState});
|
this.setState({savingState});
|
||||||
this.startSaveConfigImpl[configType]();
|
this.startSaveConfigImpl[configType]();
|
||||||
},
|
},
|
||||||
|
@ -101,7 +101,7 @@ const SettingsPage = createReactClass({
|
||||||
if (!this.didSaveConfigImpl[configType]) {
|
if (!this.didSaveConfigImpl[configType]) {
|
||||||
this.didSaveConfigImpl[configType] = debounce(() => {
|
this.didSaveConfigImpl[configType] = debounce(() => {
|
||||||
const savingState = Object.assign({}, this.state.savingState);
|
const savingState = Object.assign({}, this.state.savingState);
|
||||||
savingState[configType] = 'done';
|
savingState[configType] = AutoSaveIndicator.SAVING_STATE_DONE;
|
||||||
this.setState({savingState});
|
this.setState({savingState});
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue