From db9b7e5d4e2d6b98d38cb4e3d331b4018bb96c08 Mon Sep 17 00:00:00 2001
From: Marco Endrizzi <me00531@surrey.ac.uk>
Date: Fri, 2 Apr 2021 10:42:45 -0700
Subject: [PATCH] The messages are now read from the database

---
 src/components/Friends.vue |  2 +-
 src/pages/Chat.vue         | 34 ++++++++++++++++++----------------
 src/router/routes.js       |  2 +-
 src/store/firebase.js      | 35 ++++++++++++++++++++++++++++++++++-
 4 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/src/components/Friends.vue b/src/components/Friends.vue
index d0c4ef3..736e655 100644
--- a/src/components/Friends.vue
+++ b/src/components/Friends.vue
@@ -2,7 +2,7 @@
 q-toolbar.bg-primary.text-white.shadow-2
   q-toolbar-title Contacts
 q-list(bordered)
-  q-item.q-my-sm(v-for='(user, key) in users', :key='key', to='/chat', clickable, v-ripple)
+  q-item.q-my-sm(v-for='(user, key) in users', :key='key', :to='"/chat/" + key', clickable, v-ripple)
     q-item-section(avatar)
       q-avatar(color='primary', text-color='white')
         | {{ user.name.charAt(0) }}
diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
index b1aa294..40da509 100644
--- a/src/pages/Chat.vue
+++ b/src/pages/Chat.vue
@@ -17,24 +17,12 @@ q-footer(elevated)
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
+
 export default {
   data() {
     return {
-      newMessage: '',
-      messages: [
-        {
-          text: 'Hello',
-          from: 'me'
-        },
-        {
-          text: 'Hi',
-          from: 'them'
-        },
-        {
-          text: 'How are you?',
-          from: 'me'
-        }
-      ]
+      newMessage: ''
     }
   },
 
@@ -45,7 +33,21 @@ export default {
         from: 'me'
       })
       this.newMessage = ''
-    }
+    },
+    ...mapActions('firebase', ['firebaseGetMessages', 'firebaseStopGettingMessages'])
+  },
+
+  computed: {
+    ...mapState('firebase', ['messages'])
+  },
+
+  mounted() {
+    this.firebaseGetMessages(this.$route.params.otherUserId)
+  },
+
+  // Fire when the user leaves the page
+  unmounted() {
+    this.firebaseStopGettingMessages()
   }
 }
 </script>
diff --git a/src/router/routes.js b/src/router/routes.js
index 39ab736..97e815e 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -8,7 +8,7 @@ const routes = [
     ]
   },
   {
-    path: '/chat',
+    path: '/chat/:otherUserId',
     component: () => import('layouts/ChatLayout.vue'),
     children: [
       { path: '', component: () => import('pages/Chat.vue')}
diff --git a/src/store/firebase.js b/src/store/firebase.js
index 346bb97..413e799 100644
--- a/src/store/firebase.js
+++ b/src/store/firebase.js
@@ -1,8 +1,11 @@
 import { firebaseAuth, firebaseDb } from 'boot/firebase'
 
+let messagesRef
+
 const state = {
   userDetails: {},
-  users: {}
+  users: {},
+  messages: {}
 }
 
 const mutations = {
@@ -16,6 +19,14 @@ const mutations = {
 
   updateUser(state, payload) {
     Object.assign(state.users[payload.userId], payload.userDetails)
+  },
+
+  addMessage(state, payload) {
+    state.messages[payload.messageId] = payload.messageDetails
+  },
+
+  clearMessages(state) {
+    state.messages = {}
   }
 }
 
@@ -108,6 +119,28 @@ const actions = {
         userDetails
       })
     })
+  },
+
+  firebaseGetMessages({ state, commit }, otherUserId) {
+    let userId = state.userDetails.userId
+    messagesRef = firebaseDb.ref('chats/' + userId + '/' + otherUserId)
+    messagesRef.on(
+      'child_added', snapshot => {
+        let messageDetails = snapshot.val()
+        let messageId = snapshot.key
+        commit('addMessage', {
+          messageId,
+          messageDetails
+        })
+      }
+    )
+  },
+
+  firebaseStopGettingMessages({ commit }) {
+    if (messagesRef) {
+      messagesRef.off('child_added')
+      commit('clearMessages')
+    }
   }
 }
 
-- 
GitLab