Merge branch 'master' of git.2li.ch:Nebucatnetzer/find_coach

src/components/requests/RequestItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <li>
+    <div>
+      <a :href="emailLink">{{ email }}</a>
+    </div>
+    <p>{{ message }}</p>
+  </li>
+</template>
+
+<script>
+export default {
+  props: ['email', 'message'],
+  computed: {
+    emailLink() {
+      return 'mailto:' + this.email;
+    }
+  }
+};
+</script>
+
+<style scoped>
+li {
+  margin: 1rem 0;
+  border: 1px solid #ccc;
+  padding: 1rem;
+}
+
+a {
+  color: #3d008d;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+a:hover,
+a:active {
+  color: #8d007a;
+}
+
+p {
+  margin: 0.5rem 0 0 0;
+}
+</style>

src/pages/requests/ContactCoach.vue

@@ -38,6 +38,12 @@ export default {
         this.formIsValid = false;
         return;
       }
+      this.$store.dispatch('requests/contactCoach', {
+        email: this.email,
+        message: this.message,
+        coachId: this.$route.id
+      });
+      this.$router.replace('/coaches');
     }
   }
 };

src/pages/requests/RequestsRecieved.vue

@@ -1,3 +1,49 @@
 <template>
-  <div>Requests</div>
+  <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">
+        </request-item>
+      </ul>
+      <h3 v-else>You haven't received any messages</h3>
+    </base-card>
+  </section>
 </template>
+
+<script>
+import RequestItem from "../../components/requests/RequestItem.vue"
+
+export default {
+  components: {
+    RequestItem
+  },
+  computed: {
+    recievedRequests() {
+      return this.$store.getters['requests/requests'];
+    },
+    hasRequests() {
+      return this.$store.getters['requests/hasRequests'];
+    }
+  }
+};
+</script>
+
+<style scoped>
+header {
+  text-align: center;
+}
+
+ul {
+  list-style: none;
+  margin: 2rem auto;
+  padding: 0;
+  max-width: 30rem;
+}
+
+h3 {
+  text-align: center;
+}
+</style>

src/store/index.js

@@ -1,10 +1,12 @@
 import { createStore } from 'vuex';
 
 import coachesModule from './modules/coaches/index';
+import requestsModule from './modules/requests/index';
 
 const store = createStore({
   modules: {
-    coaches: coachesModule
+    coaches: coachesModule,
+    requests: requestsModule
   },
   state() {
     return {

src/store/modules/requests/actions.js

@@ -0,0 +1,11 @@
+export default {
+  contactCoach(context, payload) {
+    const request = {
+      id: new Date().toISOString(),
+      coachId: payload.coachId,
+      userEmail: payload.email,
+      message: payload.message
+    };
+    context.commit('addRequest', request);
+  }
+};

src/store/modules/requests/getters.js

@@ -0,0 +1,8 @@
+export default {
+  requests(state) {
+    return state.requests;
+  },
+  hasRequests(state) {
+    return state.requests && state.requests.length > 0;
+  }
+};

src/store/modules/requests/index.js

@@ -0,0 +1,15 @@
+import mutations from './mutations.js';
+import actions from './actions.js';
+import getters from './getters';
+
+export default {
+  namespaced: true,
+  state() {
+    return {
+      requests: []
+    };
+  },
+  mutations,
+  actions,
+  getters
+};

src/store/modules/requests/mutations.js

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