Create an EventBus and update page title once conversation received

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/App.vue

@@ -58,6 +58,7 @@ import AppSidebar from 'nextcloud-vue/dist/Components/AppSidebar'
 import AppSidebarTab from 'nextcloud-vue/dist/Components/AppSidebarTab'
 import Navigation from './components/Navigation/Navigation'
 import Router from './router/router'
+import { EventBus } from './services/EventBus'
 
 export default {
 	name: 'App',
@@ -82,12 +83,30 @@ export default {
 	computed: {
 		conversations() {
 			return this.$store.getters.conversations
+		},
+		/**
+		 * The current conversation token
+		 * @returns {string} The token.
+		 */
+		token() {
+			return this.$route.params.token
 		}
 	},
 
 	beforeMount() {
 		window.addEventListener('resize', this.onResize)
 		this.onResize()
+		/**
+		 * Listens to the conversationsReceived globalevent, emitted by the conversationsList
+		 * component each time a new batch of conversations is received and processed in
+		 * the store.
+		 */
+		EventBus.$once('conversationsReceived', () => {
+			if (this.$route.name === 'conversation') {
+				const CURRENT_CONVERSATION_NAME = this.getConversationName(this.token)
+				this.setPageTitle(CURRENT_CONVERSATION_NAME)
+			}
+		})
 		/**
 		 * Global before guard, this is called whenever a navigation is triggered.
 		*/
@@ -96,7 +115,7 @@ export default {
 			 * This runs whenever the new route is a conversation.
 			 */
 			if (to.name === 'conversation') {
-				const NEXT_CONVERSATION_NAME = this.$store.getters.conversations[to.params.token].displayName
+				const NEXT_CONVERSATION_NAME = this.getConversationName(to.params.token)
 				this.setPageTitle(NEXT_CONVERSATION_NAME)
 			}
 		})
@@ -119,6 +138,14 @@ export default {
 		},
 		log(e) {
 			console.debug(e)
+		},
+		/**
+		 * Get a conversation's name.
+		 * @param {string} token The conversation's token
+		 * @returns {string} The conversation's name
+		 */
+		getConversationName(token) {
+			return this.$store.getters.conversations[token].displayName
 		}
 	}
 }

src/components/Navigation/ConversationsList/ConversationsList.vue

@@ -31,6 +31,7 @@
 <script>
 import Conversation from './Conversation'
 import { fetchConversations } from '../../../services/conversationsService'
+import { EventBus } from '../../../services/EventBus'
 
 export default {
 	name: 'ConversationsList',
@@ -69,6 +70,11 @@ export default {
 			conversations.data.ocs.data.forEach(conversation => {
 				this.$store.dispatch('addConversation', conversation)
 			})
+			/**
+			 * Emits a global event that is used in App.vue to update the page title once the
+			 * ( if the current route is a conversation and once the conversations are received)
+			 */
+			EventBus.$emit('conversationsReceived')
 		}
 	}
 }

src/services/EventBus.js

@@ -0,0 +1,24 @@
+/**
+ * @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+export const EventBus = new Vue()