Add vuex and move isConnected to vuex state.

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;
 			}
 

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;
 			}
 

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;

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) {

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);
 

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;
+    },
+  }
+});

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;
 		}
 

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) {

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",

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"