From d6d5ea8853a7509a620baceac3645b95a1632087 Mon Sep 17 00:00:00 2001
From: lukassxp <lpalucas.10@gmail.com>
Date: Tue, 26 Nov 2019 15:26:48 -0300
Subject: [PATCH] refactored api calls to use async await syntax

---
 src/components/Revision/AddRevision.vue    | 82 +++++++++++-----------
 src/components/Revision/DeleteRevision.vue | 76 +++++++++++---------
 src/components/Revision/EditRevision.vue   | 69 ++++++++++--------
 src/components/Revision/Revision.vue       | 22 +++---
 4 files changed, 135 insertions(+), 114 deletions(-)

diff --git a/src/components/Revision/AddRevision.vue b/src/components/Revision/AddRevision.vue
index c3dc34ff..2159fb5b 100644
--- a/src/components/Revision/AddRevision.vue
+++ b/src/components/Revision/AddRevision.vue
@@ -1,19 +1,20 @@
 <template>
   <div>
     <div>
-      <button type="button" class="btn btn-info btn-md falko-button" id="addButton"
-              data-toggle="modal" data-target="#addRevisionModal">
-        Add Revision
-      </button>
+      <button
+        type="button"
+        class="btn btn-info btn-md falko-button"
+        id="addButton"
+        data-toggle="modal"
+        data-target="#addRevisionModal"
+      >Add Revision</button>
     </div>
 
     <div class="row no-margin justify-content-center modal fade" id="addRevisionModal">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <h3 class="modal-title">
-              Add Sprint Revision
-            </h3>
+            <h3 class="modal-title">Add Sprint Revision</h3>
             <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
               <span aria-hidden="true">&times;</span>
             </button>
@@ -23,15 +24,13 @@
             <listRevision parent="UndoneReport" v-on:listUpdated="updateList"></listRevision>
           </div>
           <div class="modal-footer">
-            <button class="btn btn-info btn-md falko-button"
-                    v-bind:disabled="FieldsNotFilled" v-on:click="addRevision"
-                    data-dismiss="modal"
-            >
-              Save
-            </button>
-            <button class="btn btn-info btn-md falko-button-grey" data-dismiss="modal">
-              Cancel
-            </button>
+            <button
+              class="btn btn-info btn-md falko-button"
+              v-bind:disabled="FieldsNotFilled"
+              v-on:click="addRevision"
+              data-dismiss="modal"
+            >Save</button>
+            <button class="btn btn-info btn-md falko-button-grey" data-dismiss="modal">Cancel</button>
           </div>
         </div>
       </div>
@@ -40,65 +39,68 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import ListRevision from './ListRevision.vue';
-import { HTTP } from '../../http-common';
+import { mapState } from "vuex";
+import ListRevision from "./ListRevision.vue";
+import { HTTP as api } from "../../http-common";
 
 export default {
   components: {
-    listRevision: ListRevision,
+    listRevision: ListRevision
   },
 
   data() {
     return {
       doneReport: [],
       undoneReport: [],
-      resivionId: '',
+      resivionId: ""
     };
   },
 
   computed: {
     ...mapState({
-      token: state => state.auth.token,
+      token: state => state.auth.token
     }),
 
     FieldsNotFilled() {
       return this.undoneReport.length === 0 || this.doneReport.length === 0;
-    },
+    }
   },
 
   methods: {
-    addRevision() {
+    async addRevision() {
       const headers = { Authorization: this.token };
 
-      HTTP.post(`sprints/${this.$route.params.id}/revisions`, {
-        done_report: this.doneReport,
-        undone_report: this.undoneReport,
-      }, { headers })
-        .then((response) => {
-          this.$emit('revisionCreated');
-          this.revisionId = response.data.id;
-          this.$router.push({ path: `/revisions/${this.revisionId}` });
-        })
-        .catch((e) => {
-          this.errors.push(e);
-        });
+      try {
+        const response = await api.post(
+          `sprints/${this.$route.params.id}/revisions`,
+          {
+            done_report: this.doneReport,
+            undone_report: this.undoneReport
+          },
+          { headers }
+        );
+        this.$emit("revisionCreated");
+        this.revisionId = response.data.id;
+        this.$router.push({ path: `/revisions/${this.revisionId}` });
+      } catch (err) {
+        this.errors.push(err);
+      }
     },
 
     updateList(items, parent) {
-      if (parent === 'DoneReport') {
+      if (parent === "DoneReport") {
         this.doneReport = [];
         for (let i = 0; i < items.length; i += 1) {
           this.doneReport.push(items[i].title);
         }
-      } else if (parent === 'UndoneReport') {
+      } else if (parent === "UndoneReport") {
         this.undoneReport = [];
         for (let i = 0; i < items.length; i += 1) {
           this.undoneReport.push(items[i].title);
         }
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/components/Revision/DeleteRevision.vue b/src/components/Revision/DeleteRevision.vue
index 8550aad6..e5155b66 100644
--- a/src/components/Revision/DeleteRevision.vue
+++ b/src/components/Revision/DeleteRevision.vue
@@ -1,27 +1,38 @@
 <template>
   <div>
-    <button type="button" class="btn btn-info btn-md falko-button-danger" id="deletebutton" data-toggle="modal" data-target="#deleteRevisionModal">
-      Delete
-    </button>
+    <button
+      type="button"
+      class="btn btn-info btn-md falko-button-danger"
+      id="deletebutton"
+      data-toggle="modal"
+      data-target="#deleteRevisionModal"
+    >Delete</button>
 
-    <div class="modal fade" id ="deleteRevisionModal" role="dialog">
+    <div class="modal fade" id="deleteRevisionModal" role="dialog">
       <div class="modal-dialog">
-          <div class="modal-content">
-              <div class="modal-header">
-                  <div>
-                    <h4 class="modal-title">Delete Revision?</h4>
-                  </div>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-              </div>
-              <div class="modal-body">
-                <p><label> Are you sure?</label></p>
-              </div>
-              <div class="modal-footer">
-                  <button v-on:click="deleteRevision()" type="button" class="btn btn-primary" data-dismiss="modal" >Yes</button>
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
-              </div>
+        <div class="modal-content">
+          <div class="modal-header">
+            <div>
+              <h4 class="modal-title">Delete Revision?</h4>
+            </div>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p>
+              <label>Are you sure?</label>
+            </p>
+          </div>
+          <div class="modal-footer">
+            <button
+              v-on:click="deleteRevision()"
+              type="button"
+              class="btn btn-primary"
+              data-dismiss="modal"
+            >Yes</button>
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
+          </div>
         </div>
       </div>
     </div>
@@ -29,21 +40,19 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import { HTTP } from '../../http-common';
+import { mapState } from "vuex";
+import { HTTP as api } from "../../http-common";
 
 export default {
-  name: 'deleteRevision',
+  name: "deleteRevision",
   data() {
-    return {
-
-    };
+    return {};
   },
 
   computed: {
     ...mapState({
-      token: state => state.auth.token,
-    }),
+      token: state => state.auth.token
+    })
   },
 
   methods: {
@@ -51,19 +60,20 @@ export default {
       const headers = { Authorization: this.token };
 
       try {
-        const response = await HTTP.get(`/revisions/${this.$route.params.id}`, { headers });
+        const response = await api.get(`/revisions/${this.$route.params.id}`, {
+          headers
+        });
         const id = response.data.sprint_id;
 
-        await HTTP.delete(`/revisions/${this.$route.params.id}`, { headers });
+        await api.delete(`/revisions/${this.$route.params.id}`, { headers });
         this.$router.push({ path: `/Sprints/${id}` });
       } catch (err) {
         console.log(err);
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
 <style scoped>
-
 </style>
diff --git a/src/components/Revision/EditRevision.vue b/src/components/Revision/EditRevision.vue
index 6e3808be..4cb98e9f 100644
--- a/src/components/Revision/EditRevision.vue
+++ b/src/components/Revision/EditRevision.vue
@@ -1,19 +1,20 @@
 <template>
   <div>
     <div>
-      <button type="button" class="btn btn-info btn-md falko-button" id="addButton"
-              data-toggle="modal" data-target="#editRevisionModal">
-        Edit Revision
-      </button>
+      <button
+        type="button"
+        class="btn btn-info btn-md falko-button"
+        id="addButton"
+        data-toggle="modal"
+        data-target="#editRevisionModal"
+      >Edit Revision</button>
     </div>
 
     <div class="row no-margin justify-content-center modal fade" id="editRevisionModal">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <h3 class="modal-title">
-              Add Sprint Revision
-            </h3>
+            <h3 class="modal-title">Add Sprint Revision</h3>
             <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
               <span aria-hidden="true">&times;</span>
             </button>
@@ -23,7 +24,11 @@
             <list-revision parent="UndoneReport" v-on:listUpdated="updateList"></list-revision>
           </div>
           <div class="modal-footer">
-            <button class="btn btn-info btn-md falko-button" v-on:click="editRevision()" data-dismiss="modal">Save</button>
+            <button
+              class="btn btn-info btn-md falko-button"
+              v-on:click="editRevision()"
+              data-dismiss="modal"
+            >Save</button>
             <button class="btn btn-info btn-md falko-button-grey" data-dismiss="modal">Cancel</button>
           </div>
         </div>
@@ -33,59 +38,61 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import ListRevision from './ListRevision.vue';
-import { HTTP } from '../../http-common';
-
+import { mapState } from "vuex";
+import ListRevision from "./ListRevision.vue";
+import { HTTP as api } from "../../http-common";
 
 export default {
   components: {
-    'list-revision': ListRevision,
+    "list-revision": ListRevision
   },
 
   data() {
     return {
       doneReport: [],
-      undoneReport: [],
+      undoneReport: []
     };
   },
 
   computed: {
     ...mapState({
-      token: state => state.auth.token,
-    }),
+      token: state => state.auth.token
+    })
   },
 
   methods: {
-    editRevision() {
+    async editRevision() {
       const headers = { Authorization: this.token };
 
-      HTTP.patch(`revisions/${this.$route.params.id}`, {
-        done_report: this.doneReport,
-        undone_report: this.undoneReport,
-      }, { headers })
-        .then(() => {
-          this.$emit('revisionCreated');
-        })
-        .catch((e) => {
-          this.errors.push(e);
-        });
+      try {
+        await api.patch(
+          `revisions/${this.$route.params.id}`,
+          {
+            done_report: this.doneReport,
+            undone_report: this.undoneReport
+          },
+          { headers }
+        );
+        this.$emit("revisionCreated");
+      } catch (err) {
+        this.errors.push(err);
+      }
     },
 
     updateList(items, parent) {
-      if (parent === 'DoneReport') {
+      if (parent === "DoneReport") {
         this.doneReport = [];
         for (let i = 0; i < items.length; i += 1) {
           this.doneReport.push(items[i].title);
         }
-      } else if (parent === 'UndoneReport') {
+      } else if (parent === "UndoneReport") {
         this.undoneReport = [];
         for (let i = 0; i < items.length; i += 1) {
           this.undoneReport.push(items[i].title);
         }
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/components/Revision/Revision.vue b/src/components/Revision/Revision.vue
index c8682d94..1c1e9355 100644
--- a/src/components/Revision/Revision.vue
+++ b/src/components/Revision/Revision.vue
@@ -45,7 +45,7 @@ import { mapState } from 'vuex';
 import ListRevision from './ListRevision.vue';
 import DeleteRevision from './DeleteRevision.vue';
 import EditRevision from './EditRevision.vue';
-import { HTTP } from '../../http-common';
+import { HTTP as api } from '../../http-common';
 
 export default {
   name: 'Revision',
@@ -70,17 +70,19 @@ export default {
   },
 
   methods: {
-    getRevision() {
+    async getRevision() {
       const headers = { Authorization: this.token };
 
-      HTTP.get(`revisions/${this.$route.params.id}`, { headers })
-        .then((response) => {
-          this.doneReport = response.data.done_report,
-          this.undoneReport = response.data.undone_report;
-        })
-        .catch((e) => {
-          this.errors.push(e);
-        });
+      try {
+        const response = await api.get(
+          `revisions/${this.$route.params.id}`,
+          { headers }
+        );
+        this.doneReport = response.data.done_report;
+        this.undoneReport = response.data.undone_report;
+      } catch(err) {
+        this.errors.push(err);
+      }
     },
   },