tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #178 from mredigonda/mred-2018-03-22 

Fixes #177 by setting loading states in topic and article edits
This commit is contained in:
Ivan Diaz 2018-05-18 16:53:50 -03:00 committed by GitHub
parent 423a366149 bc5968126d
commit 7ec01b43c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/app-components/article-add-modal.js
View File

@ -17,11 +17,15 @@ class ArticleAddModal extends React.Component {
position: React.PropTypes.number.isRequired
};
state = {
loading: false
};
render() {
return (
<div className="article-add-modal">
<Header title={i18n('ADD_ARTICLE')} description={i18n('ADD_ARTICLE_DESCRIPTION', {category: this.props.topicName})} />
<Form onSubmit={this.onAddNewArticleFormSubmit.bind(this)}>
<Form onSubmit={this.onAddNewArticleFormSubmit.bind(this)} loading={this.state.loading}>
<FormField name="title" label={i18n('TITLE')} field="input" fieldProps={{size: 'large'}} validation="TITLE" required/>
<FormField name="content" label={i18n('CONTENT')} field="textarea" validation="TEXT_AREA" required/>
<SubmitButton type="secondary">{i18n('ADD_ARTICLE')}</SubmitButton>
@ -35,6 +39,10 @@ class ArticleAddModal extends React.Component {
}
onAddNewArticleFormSubmit(form) {
this.setState({
loading: true
});
API.call({
path: '/article/add',
data: {
@ -49,8 +57,12 @@ class ArticleAddModal extends React.Component {
if(this.props.onChange) {
this.props.onChange();
}
}).catch(() => {
this.setState({
loading: false
});
});
}
}
export default ArticleAddModal;
export default ArticleAddModal;

17
client/src/app-components/topic-edit-modal.js
View File

@ -24,14 +24,15 @@ class TopicEditModal extends React.Component {
};
state = {
values: this.props.defaultValues || {title: '', icon: 'address-card', color: '#ff6900'}
values: this.props.defaultValues || {title: '', icon: 'address-card', color: '#ff6900'},
loading: false
};
render() {
return (
<div className="topic-edit-modal">
<Header title={i18n((this.props.addForm) ? 'ADD_TOPIC' : 'EDIT_TOPIC')} description={i18n((this.props.addForm) ? 'ADD_TOPIC_DESCRIPTION' : 'EDIT_TOPIC_DESCRIPTION')} />
<Form values={this.state.values} onChange={this.onFormChange.bind(this)} onSubmit={this.onSubmit.bind(this)}>
<Form values={this.state.values} onChange={this.onFormChange.bind(this)} onSubmit={this.onSubmit.bind(this)} loading={this.state.loading}>
<FormField name="title" label={i18n('TITLE')} fieldProps={{size: 'large'}} validation="TITLE" required />
<FormField name="icon" className="topic-edit-modal__icon" label={i18n('ICON')} decorator={IconSelector} />
<FormField name="color" className="topic-edit-modal__color" label={i18n('COLOR')} decorator={ColorSelector} />
@ -48,6 +49,10 @@ class TopicEditModal extends React.Component {
}
onSubmit() {
this.setState({
loading: true
});
API.call({
path: (this.props.addForm) ? '/article/add-topic' : '/article/edit-topic',
data: {
@ -58,10 +63,14 @@ class TopicEditModal extends React.Component {
}
}).then(() => {
this.context.closeModal();
if(this.props.onChange) {
this.props.onChange();
}
}).catch(() => {
this.setState({
loading: false
});
});
}
@ -77,4 +86,4 @@ class TopicEditModal extends React.Component {
}
}
export default TopicEditModal;
export default TopicEditModal;