From 047c658157a43e8a491fdb862ce3a3635b4880b4 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sat, 10 Aug 2024 11:13:54 +1200
Subject: [PATCH] Chore: Live load up to 100 new messages in sidebar (#336)

---
 server/ui-src/components/Notifications.vue |  6 ++++--
 server/ui-src/mixins/CommonMixins.js       |  5 -----
 server/ui-src/views/MessageView.vue        | 24 +++++++++++++++++++++-
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/server/ui-src/components/Notifications.vue b/server/ui-src/components/Notifications.vue
index 45ae01759..5e71c3749 100644
--- a/server/ui-src/components/Notifications.vue
+++ b/server/ui-src/components/Notifications.vue
@@ -56,6 +56,8 @@ export default {
 
 				// new messages
 				if (response.Type == "new" && response.Data) {
+					this.eventBus.emit("new", response.Data)
+
 					if (!mailbox.searching) {
 						if (pagination.start < 1) {
 							// push results directly into first page
@@ -106,10 +108,10 @@ export default {
 					}
 				} else if (response.Type == "delete" && response.Data) {
 					// broadcast for components
-					this.eventBus.emit("delete", response.Data);
+					this.eventBus.emit("delete", response.Data)
 				} else if (response.Type == "update" && response.Data) {
 					// broadcast for components
-					this.eventBus.emit("update", response.Data);
+					this.eventBus.emit("update", response.Data)
 				} else if (response.Type == "truncate") {
 					// broadcast for components
 					this.eventBus.emit("truncate")
diff --git a/server/ui-src/mixins/CommonMixins.js b/server/ui-src/mixins/CommonMixins.js
index 4517f9b54..21493b7bc 100644
--- a/server/ui-src/mixins/CommonMixins.js
+++ b/server/ui-src/mixins/CommonMixins.js
@@ -275,11 +275,6 @@ export default {
 			return 'bi-file-arrow-down-fill'
 		},
 
-		// wrapper to update one or more messages with 
-		updateMessages(messages, updates) {
-
-		},
-
 		// Returns a hex color based on a string.
 		// Values are stored in an array for faster lookup / processing.
 		colorHash(s) {
diff --git a/server/ui-src/views/MessageView.vue b/server/ui-src/views/MessageView.vue
index 5c08ade58..288735fea 100644
--- a/server/ui-src/views/MessageView.vue
+++ b/server/ui-src/views/MessageView.vue
@@ -33,6 +33,7 @@ export default {
 			apiSideNavParams: URLSearchParams,
 			apiIsMore: true,
 			messagesList: [],
+			liveLoaded: 0, // the number new messages prepended tp messageList
 			scrollLoading: false,
 			canLoadMore: true,
 		}
@@ -62,6 +63,7 @@ export default {
 		this.refreshUI()
 
 		// subscribe to events
+		this.eventBus.on("new", this.handleWSNew)
 		this.eventBus.on("update", this.handleWSUpdate)
 		this.eventBus.on("delete", this.handleWSDelete)
 		this.eventBus.on("truncate", this.handleWSTruncate)
@@ -69,6 +71,7 @@ export default {
 
 	unmounted() {
 		// unsubscribe from events
+		this.eventBus.off("new", this.handleWSNew)
 		this.eventBus.off("update", this.handleWSUpdate)
 		this.eventBus.off("delete", this.handleWSDelete)
 		this.eventBus.off("truncate", this.handleWSTruncate)
@@ -212,6 +215,18 @@ export default {
 			}, 30000)
 		},
 
+		// handler for websocket new messages
+		handleWSNew(data) {
+			// do not add when searching or >= 100 new messages have been received
+			if (this.mailbox.searching || this.liveLoaded >= 100) {
+				return
+			}
+
+			this.liveLoaded++
+			this.messagesList.unshift(data)
+			this.scrollSidebarToCurrent()
+		},
+
 		// handler for websocket message updates
 		handleWSUpdate(data) {
 			for (let x = 0; x < this.messagesList.length; x++) {
@@ -419,6 +434,10 @@ export default {
 			}
 		},
 
+		reloadWindow() {
+			location.reload()
+		},
+
 		initReleaseModal() {
 			this.modal('ReleaseModal').show()
 			window.setTimeout(() => {
@@ -537,7 +556,7 @@ export default {
 					<span class="ms-1">
 						Return to
 						<template v-if="mailbox.searching">search</template>
-						<template v-else>mailbox</template>
+						<template v-else>inbox</template>
 					</span>
 					<span class="badge rounded-pill ms-1 float-end text-bg-secondary" title="Unread messages"
 						v-if="mailbox.unread && !errorMessage">
@@ -548,6 +567,9 @@ export default {
 
 			<div class="flex-grow-1 overflow-y-auto px-1 me-n1" id="MessageList" ref="MessageList"
 				@scroll="scrollHandler">
+				<button v-if="liveLoaded >= 100" class="w-100 alert alert-warning small" @click="reloadWindow()">
+					Reload to see newer messages
+				</button>
 				<template v-if="messagesList && messagesList.length">
 					<div class="list-group">
 						<RouterLink v-for="message in messagesList" :to="'/view/' + message.ID" :key="message.ID"