add processing state and close modal after api request is completed

3 files changed, 11 insertions, 7 deletions

diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index ed7e74f0..ac5b5192 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.js
+++ b/src/components/user_reporting_modal/user_reporting_modal.js
@@ -11,7 +11,8 @@ const UserReportingModal = {
     return {
       comment: '',
       forward: false,
-      statusIdsToReport: []
+      statusIdsToReport: [],
+      processing: false
     }
   },
   computed: {
@@ -40,6 +41,7 @@ const UserReportingModal = {
       this.comment = ''
       this.forward = false
       this.statusIdsToReport = []
+      this.processing = false
     }
   },
   methods: {
@@ -47,12 +49,18 @@ const UserReportingModal = {
       this.$store.dispatch('closeUserReportingModal')
     },
     reportUser () {
+      this.processing = true
       const params = {
+        userId: this.userId,
         comment: this.comment,
         forward: this.forward,
         statusIds: this.statusIdsToReport
       }
-      this.$store.dispatch('reportUser', params)
+      this.$store.state.api.backendInteractor.reportUser(params)
+        .then(() => {
+          this.processing = false
+          this.closeModal()
+        })
     },
     isChecked (statusId) {
       return this.statusIdsToReport.indexOf(statusId) !== -1
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 49839da3..30d3ab19 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -19,7 +19,7 @@
           <Checkbox v-model="forward">Forward to {{remoteInstance}}</Checkbox>
         </div>
         <div>
-          <button class="btn btn-default" @click="reportUser">Submit</button>
+          <button class="btn btn-default" @click="reportUser" :disabled="processing">Submit</button>
         </div>
       </div>
       <div class="user-reporting-panel-right">
diff --git a/src/modules/reports.js b/src/modules/reports.js
index 0470b3be..904022f1 100644
--- a/src/modules/reports.js
+++ b/src/modules/reports.js
@@ -23,10 +23,6 @@ const reports = {
     },
     closeUserReportingModal ({ commit }) {
       commit('closeUserReportingModal')
-    },
-    reportUser ({ state, rootState, commit }, params) {
-      rootState.api.backendInteractor.reportUser({ userId: state.userId, ...params })
-        .then(result => console.log(result))
     }
   }
 }