display match

Author: supalarry

frontend/src/components/app/matches/Match.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-bind:style="{
+      'background-repeat': 'no-repeat',
+      'background-position': 'center center',
+      'background-size' :'cover',
+      'background-image': 'url(' + getImage() + ')'}"
+      class="w-12 h-12 sm:w-16 sm:h-16 rounded-full relative cursor-pointer"
+      v-on:click="chat()">
+    <div
+      v-bind:class="{
+      'bg-green-500': this.match.is_online,
+      'bg-red-500': !this.match.is_online,
+      'rounded-full': true,
+      'w-4': true,
+      'h-4': true}">
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-else-return */
+import imageMan from '../../../assets/recommendations/avatars/man1.png';
+import imageWoman from '../../../assets/recommendations/avatars/woman1.png';
+import imageOther from '../../../assets/recommendations/avatars/other.png';
+
+export default {
+  props: ['match'],
+  methods: {
+    getImage() {
+      const { images } = this.match;
+      if (images.length) {
+        for (let i = 0; i < images.length; i += 1) {
+          if (images[i].is_primary) {
+            return images[i].link;
+          }
+        }
+        return images[0].link;
+      } else if (this.match.gender === 'male') {
+        return imageMan;
+      } else if (this.match.gender === 'female') {
+        return imageWoman;
+      }
+      return imageOther;
+    },
+    async chat() {
+      await this.$router.push(`/chat/${this.match.id}`);
+    },
+  },
+};
+</script>

frontend/src/views/app/Matches.vue

@@ -6,8 +6,10 @@
       <div>
         <div class="mt-8">
           <div v-if="matches.length">
-            <h1 class="text-xl text-gray-matcha text-center">New matches</h1>
-            <div></div>
+            <h1 class="text-xl text-gray-matcha text-center font-bold">New matches</h1>
+            <div class="overflow-scroll mt-4">
+              <Match v-for="match in matches" :key="match.id" v-bind:match="match"></Match>
+            </div>
           </div>
           <div v-else class="flex items-center">
             <div>
@@ -21,7 +23,7 @@
         </div>
         <div class="mt-8">
           <div v-if="messages.length">
-            <h1 class="text-xl text-gray-matcha text-center">Messages</h1>
+            <h1 class="text-xl text-gray-matcha text-center font-bold">Messages</h1>
             <div></div>
           </div>
           <div v-else class="flex items-center">
@@ -44,11 +46,13 @@
 /* eslint-disable no-await-in-loop */
 
 import NavBar from '@/components/shared/NavBar.vue';
+import Match from '@/components/app/matches/Match.vue';
 
 export default {
   name: 'Matches',
   components: {
     NavBar,
+    Match,
   },
   data: () => ({
     matches: [],