fetch the requests from the backend

src/pages/requests/RequestsRecieved.vue

@@ -1,11 +1,27 @@
 <template>
+  <base-dialog
+    :show="!!error"
+    title="An error has occured!"
+    @close="handleError"
+  >
+    <p>{{ error }}</p>
+  </base-dialog>
+
   <section>
     <base-card>
       <header>
         <h2>Requests Received</h2>
       </header>
-      <ul v-if="hasRequests">
-        <request-item v-for="req in recievedRequests" :key="req.id" :email="req.userEmail" :message="req.message">
+      <div v-if="isLoading">
+        <base-spinner></base-spinner>
+      </div>
+      <ul v-else-if="hasRequests">
+        <request-item
+          v-for="req in recievedRequests"
+          :key="req.id"
+          :email="req.userEmail"
+          :message="req.message"
+        >
         </request-item>
       </ul>
       <h3 v-else>You haven't received any messages</h3>
@@ -14,18 +30,41 @@
 </template>
 
 <script>
-import RequestItem from "../../components/requests/RequestItem.vue"
+import RequestItem from '../../components/requests/RequestItem.vue';
 
 export default {
   components: {
     RequestItem
   },
+  data() {
+    return {
+      isLoading: false,
+      error: null
+    };
+  },
   computed: {
     recievedRequests() {
       return this.$store.getters['requests/requests'];
     },
     hasRequests() {
-      return this.$store.getters['requests/hasRequests'];
+      return !this.isLoading && this.$store.getters['requests/hasRequests'];
+    }
+  },
+  created() {
+    this.loadRequests();
+  },
+  methods: {
+    async loadRequests() {
+      this.isLoading = true;
+      try {
+        await this.$store.dispatch('requests/fetchRequests');
+      } catch (error) {
+        this.error = error;
+      }
+      this.isLoading = false;
+    },
+    handleError() {
+      this.error = null;
     }
   }
 };

src/store/modules/requests/actions.js

@@ -19,5 +19,27 @@ export default {
       const error = new Error(err.message);
       throw error;
     }
+  },
+  async fetchRequests(context) {
+    try {
+      const coachId = context.rootGetters.userId;
+      const response = await getAPI.get(`requests/${coachId}.json`);
+      const responseData = await response.data;
+
+      const requests = [];
+      for (const key in responseData) {
+        const request = {
+          id: key,
+          coachId: coachId,
+          userEmail: responseData[key].userEmail,
+          message: responseData[key].message
+        };
+        requests.push(request);
+      }
+      context.commit('setRequests', requests);
+    } catch (err) {
+      const error = new Error(err.message);
+      throw error;
+    }
   }
 };

src/store/modules/requests/mutations.js

@@ -1,5 +1,8 @@
 export default {
   addRequest(state, payload) {
     state.requests.push(payload);
+  },
+  setRequests(state, payload) {
+    state.requests = payload;
   }
 };