Use constants for AutoSaveIndicator savingState

This commit is contained in:
Yuya Ochiai 2017-10-26 23:17:10 +09:00
parent 7aa673a079
commit 594f1d47ed
2 changed files with 21 additions and 10 deletions

View file

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

View file

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