empty matches & messages screen

Author: supalarry

frontend/src/assets/chat.png

@@ -27,7 +27,7 @@
       </div>
       <router-link v-if="loggedIn" to="/browse" v-bind:class="{'navigation-button-logged-in': true, 'bg-purple-matcha': currentRoute === 'Browse', 'text-white-matcha': currentRoute === 'Browse'}">Browse</router-link>
       <router-link v-if="loggedIn" to="/search" v-bind:class="{'navigation-button-logged-in': true, 'bg-purple-matcha': currentRoute === 'Search', 'text-white-matcha': currentRoute === 'Search'}">Search</router-link>
-      <router-link v-if="loggedIn" to="/matches" v-bind:class="{'navigation-button-logged-in': true, 'bg-purple-matcha': currentRoute === 'Matches', 'text-white-matcha': currentRoute === 'Matches'}" class="navigation-button-logged-in">Matches</router-link>
+      <router-link v-if="loggedIn" to="/matches" v-bind:class="{'navigation-button-logged-in': true, 'bg-purple-matcha': currentRoute === 'Matches', 'text-white-matcha': currentRoute === 'Matches'}">Matches</router-link>
       <router-link v-if="loggedIn" to="/settings" v-bind:class="{'navigation-button-logged-in': true, 'bg-purple-matcha': currentRoute === 'Settings', 'text-white-matcha': currentRoute === 'Settings'}">Settings</router-link>
       <router-link v-if="loggedIn" to="/history" v-bind:class="{'navigation-button-logged-in': true, 'bg-purple-matcha': currentRoute === 'History', 'text-white-matcha': currentRoute === 'History'}">History</router-link>
       <router-link v-if="loggedIn" v-on:click.native="logout()" to="/" class="navigation-button-logged-in">Exit</router-link>

frontend/src/assets/link.png

@@ -1,6 +1,81 @@
 <template>
-  <h1>test</h1>
+  <!--  eslint-disable max-len -->
+  <div class="mx-4 sm:mx-16 lg:mx-32">
+    <NavBar v-bind:currentRoute="'Matches'"></NavBar>
+    <section class="mx-auto">
+      <div>
+        <div class="mt-8">
+          <div v-if="matches.length">
+            <h1 class="text-xl text-gray-matcha text-center">New matches</h1>
+            <div></div>
+          </div>
+          <div v-else class="flex items-center">
+            <div>
+              <img src="../../assets/link.png" class="w-8 opacity-75">
+            </div>
+            <div class="ml-4">
+              <h1 class="text-xl text-gray-matcha font-bold">No new matches</h1>
+              <h1 class="text-sm text-gray-500">If someone likes you back, that user will appear here</h1>
+            </div>
+          </div>
+        </div>
+        <div class="mt-8">
+          <div v-if="messages.length">
+            <h1 class="text-xl text-gray-matcha text-center">Messages</h1>
+            <div></div>
+          </div>
+          <div v-else class="flex items-center">
+            <div>
+              <img src="../../assets/chat.png" class="w-8 opacity-75">
+            </div>
+            <div class="ml-4">
+              <h1 class="text-xl text-gray-matcha font-bold">No messages</h1>
+              <h1 class="text-sm text-gray-500">Conversations with your matches will appear here</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
+/* eslint-disable max-len */
+/* eslint-disable no-await-in-loop */
+
+import NavBar from '@/components/shared/NavBar.vue';
+
+export default {
+  name: 'Matches',
+  components: {
+    NavBar,
+  },
+  data: () => ({
+    matches: [],
+    messages: [],
+  }),
+  methods: {
+    async fetchMatches() {
+      const matchesRequest = await this.$http.get('/matches');
+      const { matches } = matchesRequest.data;
+      for (let i = 0; i < matches.length; i += 1) {
+        const userRequest = await this.$http.get(`/users/${matches[i].user_1}`);
+        this.matches.push(userRequest.data);
+      }
+    },
+    async fetchMessages() {
+      const messagesRequest = await this.$http.get('/conversations');
+      const messages = messagesRequest.data;
+      for (let i = 0; i <= messages.length; i += 1) {
+        const userChattingWith = await this.$http.get(`/users/${messages[i].with_user}`);
+        messages[i].user = userChattingWith.data;
+      }
+      this.messages = messages;
+    },
+  },
+  async beforeMount() {
+    await this.fetchMatches();
+    await this.fetchMessages();
+  },
+};
 </script>