From a229138ca65ff8eee0dbc3e4b4933a496b3a9a51 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Sun, 8 Jul 2018 20:53:23 +0300
Subject: [PATCH] Add connected state

---
 client/components/Chat.vue      | 21 +++++++++------------
 client/components/ChatInput.vue |  2 ++
 client/css/style.css            |  1 -
 client/js/socket-events/init.js |  4 ++--
 client/js/socket-events/more.js |  7 -------
 client/js/socket.js             | 17 +++++++----------
 client/js/vue.js                |  1 +
 7 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index bd0ecc58..dcc9e35f 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -45,19 +45,16 @@
 				</div>
 				<div class="chat-content">
 					<div class="chat">
-						<div
-							v-if="channel.messages.length > 0"
-							ref="loadMoreButton"
-							:disabled="channel.historyLoading"
-							class="show-more show"
-							@click="onShowMoreClick"
-						>
+						<div class="show-more">
 							<button
-								v-if="channel.historyLoading"
-								class="btn">Loading…</button>
-							<button
-								v-else
-								class="btn">Show older messages</button>
+								ref="loadMoreButton"
+								:disabled="channel.historyLoading || !$root.connected"
+								class="btn"
+								@click="onShowMoreClick"
+							>
+								<span v-if="channel.historyLoading">Loading…</span>
+								<span v-else>Show older messages</span>
+							</button>
 						</div>
 						<MessageList :channel="channel"/>
 					</div>
diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index 60f482a1..769d1727 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -11,10 +11,12 @@
 			v-model="channel.pendingMessage"
 			:placeholder="getInputPlaceholder(channel)"
 			:aria-label="getInputPlaceholder(channel)"
+			:disabled="!$root.connected"
 			class="mousetrap"
 			@keyup.enter="onSubmit"
 		/>
 		<span
+			v-if="$root.connected"
 			id="submit-tooltip"
 			class="tooltipped tooltipped-w tooltipped-no-touch"
 			aria-label="Send message">
diff --git a/client/css/style.css b/client/css/style.css
index 0544b28d..893ebf36 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1080,7 +1080,6 @@ background on hover (unless active) */
 }
 
 #chat .show-more {
-	display: none;
 	padding: 10px;
 	padding-top: 15px;
 	padding-bottom: 0;
diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js
index 68fcde78..ce4317b2 100644
--- a/client/js/socket-events/init.js
+++ b/client/js/socket-events/init.js
@@ -28,8 +28,8 @@ socket.on("init", function(data) {
 	}
 
 	$("#connection-error").removeClass("shown");
-	$(".show-more button, #input").prop("disabled", false);
-	$("#submit").show();
+
+	vueApp.connected = true;
 
 	if (lastMessageId < 0) {
 		if (data.token) {
diff --git a/client/js/socket-events/more.js b/client/js/socket-events/more.js
index fe6564e0..6c510a7a 100644
--- a/client/js/socket-events/more.js
+++ b/client/js/socket-events/more.js
@@ -7,19 +7,12 @@ const {vueApp, findChannel} = require("../vue");
 
 socket.on("more", function(data) {
 	let chan = $("#chat #chan-" + data.chan);
-	const type = chan.data("type");
 	chan = chan.find(".messages");
 
 	// get the scrollable wrapper around messages
 	const scrollable = chan.closest(".chat");
 	const heightOld = chan.height() - scrollable.scrollTop();
 
-	// If there are no more messages to show, just hide the button and do nothing else
-	if (!data.messages.length) {
-		scrollable.find(".show-more").removeClass("show");
-		return;
-	}
-
 	const channel = findChannel(data.chan);
 
 	if (!channel) {
diff --git a/client/js/socket.js b/client/js/socket.js
index 614fc2fc..0791b2ee 100644
--- a/client/js/socket.js
+++ b/client/js/socket.js
@@ -10,9 +10,10 @@ const socket = io({
 	reconnection: !$(document.body).hasClass("public"),
 });
 
-$("#connection-error").on("click", function() {
-	$(this).removeClass("shown");
-});
+module.exports = socket;
+
+const {vueApp} = require("./vue");
+const {requestIdleCallback} = require("./utils");
 
 socket.on("disconnect", handleDisconnect);
 socket.on("connect_error", handleDisconnect);
@@ -42,17 +43,13 @@ socket.on("authorized", function() {
 function handleDisconnect(data) {
 	const message = data.message || data;
 
+	vueApp.connected = false;
+
 	$("#loading-page-message, #connection-error").text(`Waiting to reconnect… (${message})`).addClass("shown");
-	$(".show-more button, #input").prop("disabled", true);
-	$("#submit").hide();
-	$("#upload").hide();
 
 	// If the server shuts down, socket.io skips reconnection
 	// and we have to manually call connect to start the process
 	if (socket.io.skipReconnect) {
-		const utils = require("./utils");
-		utils.requestIdleCallback(() => socket.connect(), 2000);
+		requestIdleCallback(() => socket.connect(), 2000);
 	}
 }
-
-module.exports = socket;
diff --git a/client/js/vue.js b/client/js/vue.js
index bb518110..f3c983f6 100644
--- a/client/js/vue.js
+++ b/client/js/vue.js
@@ -21,6 +21,7 @@ Vue.filter("roundBadgeNumber", roundBadgeNumber);
 const vueApp = new Vue({
 	el: "#viewport",
 	data: {
+		connected: false,
 		appName: document.title,
 		activeChannel: null,
 		networks: [],