From 16f8304c4ee397c385f1f15ac59be6a6e3e2c718 Mon Sep 17 00:00:00 2001
From: Tim Miller-Williams <tim.millerwilliams@gmail.com>
Date: Thu, 7 Nov 2019 23:53:04 +0000
Subject: [PATCH] Refactor title to rely on Vuex state reactivity

---
 client/js/store.js |  8 ++++++++
 client/js/vue.js   | 37 +++++++------------------------------
 2 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/client/js/store.js b/client/js/store.js
index 88250f63..140ddb31 100644
--- a/client/js/store.js
+++ b/client/js/store.js
@@ -3,6 +3,7 @@ import Vuex from "vuex";
 import {createSettingsStore} from "./store-settings";
 
 const storage = require("./localStorage");
+const appName = document.title;
 
 Vue.use(Vuex);
 
@@ -139,6 +140,13 @@ const store = new Vuex.Store({
 
 			return null;
 		},
+		title(state, getters) {
+			const alertEventCount = getters.highlightCount ? `(${getters.highlightCount}) ` : "";
+
+			const channelname = state.activeChannel ? `${state.activeChannel.channel.name} — ` : "";
+
+			return alertEventCount + channelname + appName;
+		},
 	},
 });
 
diff --git a/client/js/vue.js b/client/js/vue.js
index cc811aa0..84705b54 100644
--- a/client/js/vue.js
+++ b/client/js/vue.js
@@ -11,16 +11,10 @@ const constants = require("./constants");
 
 Vue.filter("localetime", localetime);
 
-const appName = document.title;
-
 const vueApp = new Vue({
 	el: "#viewport",
 	router,
 	mounted() {
-		document.addEventListener("visibilitychange", this.synchronizeNotifiedState);
-		document.addEventListener("focus", this.synchronizeNotifiedState);
-		document.addEventListener("click", this.synchronizeNotifiedState);
-
 		// TODO: Hackfix because socket-events require vueApp somewhere
 		// and that breaks due to cyclical depenency as by this point vue.js
 		// does not export anything yet.
@@ -58,8 +52,6 @@ const vueApp = new Vue({
 			}
 		},
 		synchronizeNotifiedState() {
-			this.updateTitle();
-
 			let hasAnyHighlights = false;
 
 			for (const network of this.$store.state.networks) {
@@ -73,28 +65,6 @@ const vueApp = new Vue({
 
 			this.toggleNotificationMarkers(hasAnyHighlights);
 		},
-		updateTitle() {
-			let title = appName;
-
-			if (this.$store.state.activeChannel) {
-				title = `${this.$store.state.activeChannel.channel.name} — ${title}`;
-			}
-
-			// add highlight count to title
-			let alertEventCount = 0;
-
-			for (const network of this.$store.state.networks) {
-				for (const channel of network.channels) {
-					alertEventCount += channel.highlight;
-				}
-			}
-
-			if (alertEventCount > 0) {
-				title = `(${alertEventCount}) ${title}`;
-			}
-
-			document.title = title;
-		},
 		toggleNotificationMarkers(newState) {
 			if (this.$store.state.isNotified !== newState) {
 				// Toggles a dot on the menu icon when there are unread notifications
@@ -136,6 +106,13 @@ store.watch(
 	}
 );
 
+store.watch(
+	(_, getters) => getters.title,
+	(title) => {
+		document.title = title;
+	}
+);
+
 Vue.config.errorHandler = function(e) {
 	store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
 	console.error(e); // eslint-disable-line