From 69cb891b1a1d58a81b183452164d9ec08a49342b Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Tue, 26 Feb 2019 22:23:41 +0200
Subject: [PATCH] Add vuex and move isConnected to vuex state.

---
 client/components/ChatInput.vue   |  6 +++---
 client/components/MessageList.vue |  4 ++--
 client/js/socket-events/auth.js   |  4 ++--
 client/js/socket-events/init.js   |  2 +-
 client/js/socket.js               |  2 +-
 client/js/store.js                | 15 +++++++++++++++
 client/js/upload.js               |  6 ++----
 client/js/vue.js                  |  3 ++-
 package.json                      |  1 +
 yarn.lock                         |  5 +++++
 10 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 client/js/store.js

diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index d10f0305..609707f7 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -30,7 +30,7 @@
 				id="upload"
 				type="button"
 				aria-label="Upload file"
-				:disabled="!this.$root.isConnected"
+				:disabled="!$store.state.isConnected"
 			/>
 		</span>
 		<span
@@ -42,7 +42,7 @@
 				id="submit"
 				type="submit"
 				aria-label="Send message"
-				:disabled="!this.$root.isConnected"
+				:disabled="!$store.state.isConnected"
 			/>
 		</span>
 	</form>
@@ -187,7 +187,7 @@ export default {
 			this.$refs.input.click();
 			this.$refs.input.focus();
 
-			if (!this.$root.isConnected) {
+			if (!$store.state.isConnected) {
 				return false;
 			}
 
diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index 710485bc..237de9be 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -3,7 +3,7 @@
 		<div :class="['show-more', {show: channel.moreHistoryAvailable}]">
 			<button
 				ref="loadMoreButton"
-				:disabled="channel.historyLoading || !$root.isConnected"
+				:disabled="channel.historyLoading || !$store.state.isConnected"
 				class="btn"
 				@click="onShowMoreClick"
 			>
@@ -228,7 +228,7 @@ export default {
 			});
 		},
 		onShowMoreClick() {
-			if (!this.$root.isConnected) {
+			if (!this.$store.state.isConnected) {
 				return;
 			}
 
diff --git a/client/js/socket-events/auth.js b/client/js/socket-events/auth.js
index a415310c..526881b5 100644
--- a/client/js/socket-events/auth.js
+++ b/client/js/socket-events/auth.js
@@ -11,7 +11,7 @@ socket.on("auth", function(data) {
 	// And we will reload the page to grab the latest version
 	if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) {
 		socket.disconnect();
-		vueApp.isConnected = false;
+		vueApp.$store.commit("isConnected", false);
 		vueApp.currentUserVisibleError = "Server restarted, reloading…";
 		location.reload(true);
 		return;
@@ -31,7 +31,7 @@ socket.on("auth", function(data) {
 	if (!data.success) {
 		if (vueApp.activeWindow !== "SignIn") {
 			socket.disconnect();
-			vueApp.isConnected = false;
+			vueApp.$store.commit("isConnected", false);
 			vueApp.currentUserVisibleError = "Authentication failed, reloading…";
 			location.reload();
 			return;
diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js
index 6c4b3ae2..ac90434f 100644
--- a/client/js/socket-events/init.js
+++ b/client/js/socket-events/init.js
@@ -17,7 +17,7 @@ socket.on("init", function(data) {
 	const previousActive = vueApp.activeChannel && vueApp.activeChannel.channel.id;
 
 	vueApp.networks = mergeNetworkData(data.networks);
-	vueApp.isConnected = true;
+	vueApp.$store.commit("isConnected", true);
 	vueApp.currentUserVisibleError = null;
 
 	if (!vueApp.initialized) {
diff --git a/client/js/socket.js b/client/js/socket.js
index 7ccca5ee..5023d24d 100644
--- a/client/js/socket.js
+++ b/client/js/socket.js
@@ -47,7 +47,7 @@ socket.on("authorized", function() {
 function handleDisconnect(data) {
 	const message = data.message || data;
 
-	vueApp.isConnected = false;
+	vueApp.$store.commit("isConnected", false);
 	vueApp.currentUserVisibleError = `Waiting to reconnect… (${message})`;
 	$("#loading-page-message").text(vueApp.currentUserVisibleError);
 
diff --git a/client/js/store.js b/client/js/store.js
new file mode 100644
index 00000000..3feed9ea
--- /dev/null
+++ b/client/js/store.js
@@ -0,0 +1,15 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    isConnected: false
+  },
+  mutations: {
+    isConnected(state, payload) {
+      state.isConnected = payload;
+    },
+  }
+});
diff --git a/client/js/upload.js b/client/js/upload.js
index 9633db9d..e0e2ca52 100644
--- a/client/js/upload.js
+++ b/client/js/upload.js
@@ -89,7 +89,7 @@ class Uploader {
 			return;
 		}
 
-		if (!this.vueApp.isConnected) {
+		if (!this.vueApp.$store.state.isConnected) {
 			this.handleResponse({
 				error: `You are currently disconnected, unable to initiate upload process.`,
 			});
@@ -177,9 +177,7 @@ class Uploader {
 		this.setProgress(0);
 
 		if (response.error) {
-			// require here due to circular dependency
-			const {vueApp} = require("./vue");
-			vueApp.currentUserVisibleError = response.error;
+			this.vueApp.currentUserVisibleError = response.error;
 			return;
 		}
 
diff --git a/client/js/vue.js b/client/js/vue.js
index 5bede74f..0ac27ae9 100644
--- a/client/js/vue.js
+++ b/client/js/vue.js
@@ -1,6 +1,7 @@
 "use strict";
 
 const Vue = require("vue").default;
+const store = require("./store").default;
 const App = require("../components/App.vue").default;
 const roundBadgeNumber = require("./libs/handlebars/roundBadgeNumber");
 const localetime = require("./libs/handlebars/localetime");
@@ -21,7 +22,6 @@ const vueApp = new Vue({
 		currentUserVisibleError: null,
 		initialized: false,
 		isAutoCompleting: false,
-		isConnected: false,
 		isFileUploadEnabled: false,
 		isNotified: false,
 		networks: [],
@@ -56,6 +56,7 @@ const vueApp = new Vue({
 			props: this,
 		});
 	},
+	store,
 });
 
 Vue.config.errorHandler = function(e) {
diff --git a/package.json b/package.json
index a549150e..10d64b97 100644
--- a/package.json
+++ b/package.json
@@ -121,6 +121,7 @@
     "vue-server-renderer": "2.6.10",
     "vue-template-compiler": "2.6.10",
     "vuedraggable": "2.23.2",
+    "vuex": "3.1.2",
     "webpack": "4.41.2",
     "webpack-cli": "3.3.10",
     "webpack-dev-middleware": "3.7.2",
diff --git a/yarn.lock b/yarn.lock
index ecf777b6..39ca86cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9234,6 +9234,11 @@ vuedraggable@2.23.2:
   dependencies:
     sortablejs "^1.10.1"
 
+vuex@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.2.tgz#a2863f4005aa73f2587e55c3fadf3f01f69c7d4d"
+  integrity sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ==
+
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"