From 26dc37033c322ba90cfc722206c500d68d02a83a Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Fri, 31 Aug 2018 13:43:21 +0300
Subject: [PATCH] Make connection-error a vue state

---
 client/components/Chat.vue      |  4 +++-
 client/css/style.css            |  5 -----
 client/js/socket-events/auth.js |  9 ++++++---
 client/js/socket-events/init.js |  6 +++---
 client/js/socket.js             | 16 ++++++++++------
 client/js/vue.js                |  1 +
 6 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 0b54d5fb..f607c3ac 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -67,7 +67,9 @@
 				</div>
 			</div>
 		</div>
-		<div id="connection-error" />
+		<div
+			v-if="this.$root.connectionError"
+			id="connection-error">{{ this.$root.connectionError }}</div>
 		<ChatInput
 			:network="network"
 			:channel="channel" />
diff --git a/client/css/style.css b/client/css/style.css
index 7bcbfb71..247388a7 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1981,11 +1981,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	background: #e74c3c;
 	color: #fff;
 	text-align: center;
-	display: none;
-}
-
-#connection-error.shown {
-	display: block;
 	cursor: pointer;
 }
 
diff --git a/client/js/socket-events/auth.js b/client/js/socket-events/auth.js
index 57824bf0..beab7c22 100644
--- a/client/js/socket-events/auth.js
+++ b/client/js/socket-events/auth.js
@@ -12,7 +12,8 @@ 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();
-		$("#connection-error").text("Server restarted, reloading…");
+		vueApp.connected = false;
+		vueApp.connectionError = "Server restarted, reloading…";
 		location.reload(true);
 		return;
 	}
@@ -52,7 +53,8 @@ socket.on("auth", function(data) {
 	if (!data.success) {
 		if (login.length === 0) {
 			socket.disconnect();
-			$("#connection-error").text("Authentication failed, reloading…");
+			vueApp.connected = false;
+			vueApp.connectionError = "Authentication failed, reloading…";
 			location.reload();
 			return;
 		}
@@ -67,7 +69,8 @@ socket.on("auth", function(data) {
 		token = storage.get("token");
 
 		if (token) {
-			$("#loading-page-message, #connection-error").text("Authorizing…");
+			vueApp.connectionError = "Authorizing…";
+			$("#loading-page-message").text(vueApp.connectionError);
 
 			let lastMessage = -1;
 
diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js
index f65f9747..aed8bf65 100644
--- a/client/js/socket-events/init.js
+++ b/client/js/socket-events/init.js
@@ -11,7 +11,8 @@ const utils = require("../utils");
 const {vueApp, initChannel} = require("../vue");
 
 socket.on("init", function(data) {
-	$("#loading-page-message, #connection-error").text("Rendering…");
+	vueApp.connectionError = "Rendering…";
+	$("#loading-page-message").text(vueApp.connectionError);
 
 	const previousActive = vueApp.activeChannel && vueApp.activeChannel.channel.id;
 
@@ -55,8 +56,7 @@ socket.on("init", function(data) {
 
 	vueApp.networks = data.networks;
 	vueApp.connected = true;
-
-	$("#connection-error").removeClass("shown");
+	vueApp.connectionError = false;
 
 	if (!vueApp.initialized) {
 		vueApp.initialized = true;
diff --git a/client/js/socket.js b/client/js/socket.js
index 0791b2ee..11248515 100644
--- a/client/js/socket.js
+++ b/client/js/socket.js
@@ -20,11 +20,13 @@ socket.on("connect_error", handleDisconnect);
 socket.on("error", handleDisconnect);
 
 socket.on("reconnecting", function(attempt) {
-	$("#loading-page-message, #connection-error").text(`Reconnecting… (attempt ${attempt})`);
+	vueApp.connectionError = `Reconnecting… (attempt ${attempt})`;
+	$("#loading-page-message").text(vueApp.connectionError);
 });
 
 socket.on("connecting", function() {
-	$("#loading-page-message, #connection-error").text("Connecting…");
+	vueApp.connectionError = "Connecting…";
+	$("#loading-page-message").text(vueApp.connectionError);
 });
 
 socket.on("connect", function() {
@@ -33,19 +35,21 @@ socket.on("connect", function() {
 	// nothing is sent to the server that might have happened.
 	socket.sendBuffer = [];
 
-	$("#loading-page-message, #connection-error").text("Finalizing connection…");
+	vueApp.connectionError = "Finalizing connection…";
+	$("#loading-page-message").text(vueApp.connectionError);
 });
 
 socket.on("authorized", function() {
-	$("#loading-page-message, #connection-error").text("Loading messages…");
+	vueApp.connectionError = "Loading messages…";
+	$("#loading-page-message").text(vueApp.connectionError);
 });
 
 function handleDisconnect(data) {
 	const message = data.message || data;
 
 	vueApp.connected = false;
-
-	$("#loading-page-message, #connection-error").text(`Waiting to reconnect… (${message})`).addClass("shown");
+	vueApp.connectionError = `Waiting to reconnect… (${message})`;
+	$("#loading-page-message").text(vueApp.connectionError);
 
 	// If the server shuts down, socket.io skips reconnection
 	// and we have to manually call connect to start the process
diff --git a/client/js/vue.js b/client/js/vue.js
index b70b7bf2..844c6821 100644
--- a/client/js/vue.js
+++ b/client/js/vue.js
@@ -23,6 +23,7 @@ const vueApp = new Vue({
 	data: {
 		initialized: false,
 		connected: false,
+		connectionError: false,
 		appName: document.title,
 		activeChannel: null,
 		networks: [],