From 23f9fb7833860eb86759a1dd5f79a78f96995d55 Mon Sep 17 00:00:00 2001
From: Maxi Redigonda <maxiredigonda@gmail.com>
Date: Thu, 22 Mar 2018 11:57:33 -0300
Subject: [PATCH 1/2] Sets loading state in the form when the user presses SAVE

---
 client/src/app-components/article-add-modal.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/src/app-components/article-add-modal.js b/client/src/app-components/article-add-modal.js
index e0e34d86..0a5e4346 100644
--- a/client/src/app-components/article-add-modal.js
+++ b/client/src/app-components/article-add-modal.js
@@ -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;
\ No newline at end of file
+export default ArticleAddModal;

From bc5968126dabefb9b033010d99fc5f05e86376b9 Mon Sep 17 00:00:00 2001
From: Maxi Redigonda <maxiredigonda@gmail.com>
Date: Thu, 22 Mar 2018 12:10:07 -0300
Subject: [PATCH 2/2] Sets loading state in form when an user edits a topic

---
 client/src/app-components/topic-edit-modal.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/client/src/app-components/topic-edit-modal.js b/client/src/app-components/topic-edit-modal.js
index 89fa3255..4f56ec2d 100644
--- a/client/src/app-components/topic-edit-modal.js
+++ b/client/src/app-components/topic-edit-modal.js
@@ -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;
\ No newline at end of file
+export default TopicEditModal;