From 6b8fea8afca081ab5dad284d0457c8986651c241 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Mon, 4 Nov 2019 12:41:04 +0200
Subject: [PATCH] Avoid emitting multiple events to the server when
 collapsing/expanding channel previews

Fixes #1377
---
 client/components/MessageList.vue |  2 --
 client/js/commands/collapse.js    | 30 ++++++++++++++++++++++++++++--
 client/js/commands/expand.js      | 30 ++++++++++++++++++++++++++++--
 src/server.js                     | 16 +++++++++++++++-
 4 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index b93435e6..54d2b9d5 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -218,8 +218,6 @@ export default {
 			this.keepScrollPosition();
 
 			// Tell the server we're toggling so it remembers at page reload
-			// TODO Avoid sending many single events when using `/collapse` or `/expand`
-			// See https://github.com/thelounge/thelounge/issues/1377
 			socket.emit("msg:preview:toggle", {
 				target: this.channel.id,
 				msgId: message.id,
diff --git a/client/js/commands/collapse.js b/client/js/commands/collapse.js
index aa63e567..359c9dc0 100644
--- a/client/js/commands/collapse.js
+++ b/client/js/commands/collapse.js
@@ -1,8 +1,34 @@
 "use strict";
 
-const $ = require("jquery");
+const socket = require("../socket");
+const store = require("../store").default;
 
 exports.input = function() {
-	$(".chan.active .toggle-button.toggle-preview.opened").click();
+	const messageIds = [];
+
+	for (const message of store.state.activeChannel.channel.messages) {
+		let toggled = false;
+
+		for (const preview of message.previews) {
+			if (preview.shown) {
+				preview.shown = false;
+				toggled = true;
+			}
+		}
+
+		if (toggled) {
+			messageIds.push(message.id);
+		}
+	}
+
+	// Tell the server we're toggling so it remembers at page reload
+	if (messageIds.length > 0) {
+		socket.emit("msg:preview:toggle", {
+			target: store.state.activeChannel.channel.id,
+			messageIds: messageIds,
+			shown: false,
+		});
+	}
+
 	return true;
 };
diff --git a/client/js/commands/expand.js b/client/js/commands/expand.js
index b98c420c..3e44951a 100644
--- a/client/js/commands/expand.js
+++ b/client/js/commands/expand.js
@@ -1,8 +1,34 @@
 "use strict";
 
-const $ = require("jquery");
+const socket = require("../socket");
+const store = require("../store").default;
 
 exports.input = function() {
-	$(".chan.active .toggle-button.toggle-preview:not(.opened)").click();
+	const messageIds = [];
+
+	for (const message of store.state.activeChannel.channel.messages) {
+		let toggled = false;
+
+		for (const preview of message.previews) {
+			if (!preview.shown) {
+				preview.shown = true;
+				toggled = true;
+			}
+		}
+
+		if (toggled) {
+			messageIds.push(message.id);
+		}
+	}
+
+	// Tell the server we're toggling so it remembers at page reload
+	if (messageIds.length > 0) {
+		socket.emit("msg:preview:toggle", {
+			target: store.state.activeChannel.channel.id,
+			messageIds: messageIds,
+			shown: true,
+		});
+	}
+
 	return true;
 };
diff --git a/src/server.js b/src/server.js
index b8e02095..f698f456 100644
--- a/src/server.js
+++ b/src/server.js
@@ -494,11 +494,25 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 		}
 
 		const networkAndChan = client.find(data.target);
+		const newState = Boolean(data.shown);
 
 		if (!networkAndChan) {
 			return;
 		}
 
+		// Process multiple message at once for /collapse and /expand commands
+		if (Array.isArray(data.messageIds)) {
+			for (const msgId of data.messageIds) {
+				const message = networkAndChan.chan.findMessage(msgId);
+
+				for (const preview of message.previews) {
+					preview.shown = newState;
+				}
+			}
+
+			return;
+		}
+
 		const message = networkAndChan.chan.findMessage(data.msgId);
 
 		if (!message) {
@@ -508,7 +522,7 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 		const preview = message.findPreview(data.link);
 
 		if (preview) {
-			preview.shown = data.shown;
+			preview.shown = newState;
 		}
 	});