Merge branch '355-chat' of github.com:Seluj78/PyMatcha into 355-chat

Author: Seluj78

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

@@ -11,19 +11,25 @@
         <h1 class="noSelect capitalize opacity-50">←</h1>
       </div>
     </div>
-    <div class="messages rounded-md overflow-scroll pt-4 pb-2 w-full">
-      <div
-        v-bind:class="{
-        'flex': true,
-        'mt-1': true,
-        'justify-start': message.to_id === loggedInUserId,
-        'justify-end': message.to_id !== loggedInUserId}"
-        v-for="message in messages" :key="message.id">
-      <h1 v-if="message.to_id === loggedInUserId"
-          class="py-2 px-4 rounded-t-md rounded-br-md bg-purple-matcha text-white-matcha">{{message.content}}</h1>
-      <h1 v-else
-          class="py-2 px-4 rounded-t-md rounded-bl-md bg-green-500 text-white-matcha">{{message.content}}</h1>
-      </div>
+    <div id="messageBox" v-if="messages" class="messages my-2 break-words rounded-md overflow-scroll w-full">
+      <h1 v-for="message in messages" :key="message.id"
+      v-bind:class="{
+        'py-2': true,
+        'px-4': true,
+        'mt-2': true,
+        'sm:w-48': true,
+        'lg:w-64': true,
+        'rounded-t-md': true,
+        'rounded-br-md': message.to_id === loggedInUserId,
+        'rounded-bl-md': message.to_id !== loggedInUserId,
+        'text-left': message.to_id === loggedInUserId,
+        'text-right': message.to_id !== loggedInUserId,
+        'mr-auto': message.to_id === loggedInUserId,
+        'ml-auto': message.to_id !== loggedInUserId,
+        'bg-purple-matcha': message.to_id === loggedInUserId,
+        'bg-green-500': message.to_id !== loggedInUserId,
+        'text-white-matcha': true}"
+      >{{message.content}}</h1>
     </div>
     <div class="send w-full flex items-stretch">
       <div class="w-10/12 h-full">
@@ -47,7 +53,7 @@ export default {
     ChatUser,
   },
   data: () => ({
-    messages: [],
+    messages: null,
     user: null,
     message: '',
     loggedInUserId: null,
@@ -61,6 +67,12 @@ export default {
         to_uid: this.user.id.toString(),
         content: this.message,
       });
+      this.messages.push({ to_id: this.chatWithUserId, content: this.message });
+      this.message = '';
+      this.$nextTick(() => {
+        const messageBox = document.getElementById('messageBox');
+        messageBox.scrollTop = messageBox.scrollHeight;
+      });
     },
   },
   async beforeMount() {
@@ -69,6 +81,10 @@ export default {
     const userRequest = await this.$http.get(`/users/${this.chatWithUserId}`);
     this.user = userRequest.data;
     this.loggedInUserId = this.$store.getters.getLoggedInUser.id;
+    this.$nextTick(() => {
+      const messageBox = document.getElementById('messageBox');
+      messageBox.scrollTop = messageBox.scrollHeight;
+    });
   },
 };
 </script>

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

@@ -71,7 +71,6 @@ export default {
   },
   beforeMount() {
     this.match = this.message.with_user;
-    console.log(this.message);
   },
 };
 </script>

frontend/src/views/app/Matches.vue

@@ -84,14 +84,28 @@ export default {
     fetchingDone: false,
   }),
   methods: {
+    async fetchMatch(user1, user2) {
+      if (this.$store.getters.getLoggedInUser.id === user1) {
+        const userRequest = await this.$http.get(`/users/${user2}`);
+        this.matches.push(userRequest.data);
+      } else {
+        const userRequest = await this.$http.get(`/users/${user1}`);
+        this.matches.push(userRequest.data);
+      }
+    },
     async fetchMatches() {
       const matchesRequest = await this.$http.get('/matches');
       const { matches } = matchesRequest.data;
+      if (!this.messages.length) {
+        for (let i = 0; i < matches.length; i += 1) {
+          await this.fetchMatch(matches[i].user_1, matches[i].user_2);
+        }
+        return;
+      }
       for (let i = 0; i < matches.length; i += 1) {
         for (let j = 0; j < this.messages.length; j += 1) {
-          if (this.messages[j].length && this.messages[j][0].to_id !== matches[i].user_1) {
-            const userRequest = await this.$http.get(`/users/${matches[i].user_1}`);
-            this.matches.push(userRequest.data);
+          if (this.messages[j].with_user.id !== matches[i].user_1 && this.messages[j].with_user.id !== matches[i].user_2) {
+            await this.fetchMatch(matches[i].user_1, matches[i].user_2);
           }
         }
       }