From 0da059118d70ed96d28060b2f119d48b42f1b39f Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Wed, 27 Feb 2019 16:15:34 +0200
Subject: [PATCH] Move isNotified to vuex.

---
 client/components/App.vue       |  1 +
 client/components/ChatInput.vue |  2 +-
 client/js/store.js              | 20 ++++++++++++--------
 client/js/utils.js              | 10 ++++------
 client/js/vue.js                |  1 -
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/client/components/App.vue b/client/components/App.vue
index c1d629a6..12637d20 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -1,6 +1,7 @@
 <template>
 	<div
 		id="viewport"
+		:class="{notified: $store.state.isNotified}"
 		role="tablist">
 		<Sidebar
 			:networks="networks"
diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index 609707f7..78f3f336 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -187,7 +187,7 @@ export default {
 			this.$refs.input.click();
 			this.$refs.input.focus();
 
-			if (!$store.state.isConnected) {
+			if (!this.$store.state.isConnected) {
 				return false;
 			}
 
diff --git a/client/js/store.js b/client/js/store.js
index 3feed9ea..407282fe 100644
--- a/client/js/store.js
+++ b/client/js/store.js
@@ -4,12 +4,16 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {
-    isConnected: false
-  },
-  mutations: {
-    isConnected(state, payload) {
-      state.isConnected = payload;
-    },
-  }
+	state: {
+		isConnected: false,
+		isNotified: false,
+	},
+	mutations: {
+		isConnected(state, payload) {
+			state.isConnected = payload;
+		},
+		isNotified(state, payload) {
+			state.isNotified = payload;
+		},
+	}
 });
diff --git a/client/js/utils.js b/client/js/utils.js
index 80d3cb43..4afc2431 100644
--- a/client/js/utils.js
+++ b/client/js/utils.js
@@ -67,17 +67,15 @@ function synchronizeNotifiedState() {
 }
 
 function toggleNotificationMarkers(newState) {
-	// Toggles the favicon to red when there are unread notifications
-	if (vueApp.isNotified !== newState) {
-		vueApp.isNotified = newState;
+	if (vueApp.$store.state.isNotified !== newState) {
+		// Toggles a dot on the menu icon when there are unread notifications
+		vueApp.$store.commit("isNotified", newState);
 
+		// Toggles the favicon to red when there are unread notifications
 		const old = favicon.prop("href");
 		favicon.prop("href", favicon.data("other"));
 		favicon.data("other", old);
 	}
-
-	// Toggles a dot on the menu icon when there are unread notifications
-	viewport.toggleClass("notified", newState);
 }
 
 function updateTitle() {
diff --git a/client/js/vue.js b/client/js/vue.js
index 0ac27ae9..43422e84 100644
--- a/client/js/vue.js
+++ b/client/js/vue.js
@@ -23,7 +23,6 @@ const vueApp = new Vue({
 		initialized: false,
 		isAutoCompleting: false,
 		isFileUploadEnabled: false,
-		isNotified: false,
 		networks: [],
 		pushNotificationState: "unsupported",
 		desktopNotificationState: "unsupported",