From 6a15fd95f0afc7c8f06be7be4579afa1fcc1c74d Mon Sep 17 00:00:00 2001
From: Tim Miller-Williams <tim.millerwilliams@gmail.com>
Date: Thu, 7 Nov 2019 23:50:51 +0000
Subject: [PATCH] Refactor userList behaviour to not use methods in root Vue
 instance

---
 client/components/Chat.vue      |  2 +-
 client/js/socket-events/init.js |  2 +-
 client/js/store.js              |  3 +++
 client/js/vue.js                | 16 ++++++++--------
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 118e6982..69b62065 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -47,7 +47,7 @@
 						<button
 							class="rt"
 							aria-label="Toggle user list"
-							@click="$root.toggleUserlist"
+							@click="$store.commit('toggleUserlist')"
 						/>
 					</span>
 				</div>
diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js
index dd435650..47c0b071 100644
--- a/client/js/socket-events/init.js
+++ b/client/js/socket-events/init.js
@@ -38,7 +38,7 @@ socket.on("init", function(data) {
 			isUserlistOpen = "true";
 		}
 
-		vueApp.setUserlist(isUserlistOpen === "true");
+		store.commit("userlistOpen", isUserlistOpen === "true");
 
 		document.body.classList.remove("signed-out");
 
diff --git a/client/js/store.js b/client/js/store.js
index 0e7ef976..88250f63 100644
--- a/client/js/store.js
+++ b/client/js/store.js
@@ -96,6 +96,9 @@ const store = new Vuex.Store({
 		toggleSidebar(state) {
 			state.sidebarOpen = !state.sidebarOpen;
 		},
+		toggleUserlist(state) {
+			state.userlistOpen = !state.userlistOpen;
+		},
 		userlistOpen(state, payload) {
 			state.userlistOpen = payload;
 		},
diff --git a/client/js/vue.js b/client/js/vue.js
index 72b8bc98..cc811aa0 100644
--- a/client/js/vue.js
+++ b/client/js/vue.js
@@ -36,14 +36,6 @@ const vueApp = new Vue({
 		}, 1);
 	},
 	methods: {
-		setUserlist(state) {
-			storage.set("thelounge.state.userlist", state);
-			this.$store.commit("userlistOpen", state);
-			this.$emit("resize");
-		},
-		toggleUserlist() {
-			this.setUserlist(!this.$store.state.userlistOpen);
-		},
 		switchToChannel(channel) {
 			if (
 				this.$store.state.activeChannel &&
@@ -136,6 +128,14 @@ store.watch(
 	}
 );
 
+store.watch(
+	(state) => state.userlistOpen,
+	(userlistOpen) => {
+		storage.set("thelounge.state.userlist", userlistOpen);
+		vueApp.$emit("resize");
+	}
+);
+
 Vue.config.errorHandler = function(e) {
 	store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
 	console.error(e); // eslint-disable-line