From 3f72c7c82dda02e645b73b28ddb8e9050e0635cb Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Thu, 23 Apr 2020 19:50:45 +0300
Subject: [PATCH] Append new results and keep scroll position.

---
 client/components/Windows/SearchResults.vue | 30 ++++++++++++++++++---
 client/js/socket-events/search.js           |  6 +++++
 client/js/store.js                          |  4 +++
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/client/components/Windows/SearchResults.vue b/client/components/Windows/SearchResults.vue
index 3e73d98c..5d1596c5 100644
--- a/client/components/Windows/SearchResults.vue
+++ b/client/components/Windows/SearchResults.vue
@@ -39,10 +39,13 @@
 							</button>
 						</div>
 
-						<div v-if="$store.state.messageSearchInProgress" class="search-status">
+						<div
+							v-if="$store.state.messageSearchInProgress && !offset"
+							class="search-status"
+						>
 							Searching…
 						</div>
-						<div v-else-if="!messages.length" class="search-status">
+						<div v-else-if="!messages.length && !offset" class="search-status">
 							No results found.
 						</div>
 						<div
@@ -94,6 +97,8 @@ export default {
 		return {
 			offset: 0,
 			moreResultsAvailable: false,
+			oldScrollTop: 0,
+			oldChatHeight: 0,
 		};
 	},
 	computed: {
@@ -145,7 +150,16 @@ export default {
 		},
 		messages() {
 			this.moreResultsAvailable = this.messages.length && !(this.messages.length % 100);
-			this.jumpToBottom();
+
+			if (!this.offset) {
+				this.jumpToBottom();
+			} else {
+				this.$nextTick(() => {
+					const currentChatHeight = this.$refs.chat.scrollHeight;
+					this.$refs.chat.scrollTop =
+						this.oldScrollTop + currentChatHeight - this.oldChatHeight;
+				});
+			}
 		},
 	},
 	mounted() {
@@ -164,7 +178,11 @@ export default {
 		doSearch() {
 			this.offset = 0;
 			this.$store.commit("messageSearchInProgress", true);
-			this.$store.commit("messageSearchResults", null); // Only reset if not getting offset
+
+			if (!this.offset) {
+				this.$store.commit("messageSearchResults", null); // Only reset if not getting offset
+			}
+
 			socket.emit("search", {
 				networkUuid: this.$route.params.uuid,
 				channelName: this.$route.params.target,
@@ -175,6 +193,10 @@ export default {
 		onShowMoreClick() {
 			this.offset += 100;
 			this.$store.commit("messageSearchInProgress", true);
+
+			this.oldScrollTop = this.$refs.chat.scrollTop;
+			this.oldChatHeight = this.$refs.chat.scrollHeight;
+
 			socket.emit("search", {
 				networkUuid: this.$route.params.uuid,
 				channelName: this.$route.params.target,
diff --git a/client/js/socket-events/search.js b/client/js/socket-events/search.js
index f089f256..36cd1e4e 100644
--- a/client/js/socket-events/search.js
+++ b/client/js/socket-events/search.js
@@ -3,5 +3,11 @@ import store from "../store";
 
 socket.on("search:results", (response) => {
 	store.commit("messageSearchInProgress", false);
+
+	if (store.state.messageSearchResults) {
+		store.commit("addMessageSearchResults", response);
+		return;
+	}
+
 	store.commit("messageSearchResults", response);
 });
diff --git a/client/js/store.js b/client/js/store.js
index a648779c..2fc66a53 100644
--- a/client/js/store.js
+++ b/client/js/store.js
@@ -120,6 +120,10 @@ const store = new Vuex.Store({
 		messageSearchResults(state, value) {
 			state.messageSearchResults = value;
 		},
+		addMessageSearchResults(state, value) {
+			value.results = [...state.messageSearchResults.results, ...value.results];
+			state.messageSearchResults = value;
+		},
 	},
 	getters: {
 		findChannelOnCurrentNetwork: (state) => (name) => {