diff --git a/src/components/Friends.vue b/src/components/Friends.vue index d0c4ef302b9bff2c89e991b6e58b7566690fb793..736e655801f3072ad4a07ae4baf5d913bb42636a 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 b1aa294babcfc5522eb99f13af4ef16ca5167850..40da5093c02d344fe63210889eeffe8be91147fb 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 39ab736adba90e511f75900ac6c90fdd0e1aae7c..97e815eafe0fa24024b4794241c5eae84f7919e6 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 346bb974b741f29174c3d3be04f6b1b623692df1..413e7991879e2a712d1fa5a028d7799698802edd 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') + } } }