From fde76134fb52dccb56addc40e57daaa8f72b171e Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 4 Mar 2021 14:23:33 +0100
Subject: [PATCH] Mark as unread now applied to previous message id

Added props for previous and next message id in MessagesGroup and
Message components.

Now using the previous message id when marking as unread.

Since now the next message id is available on all message components,
the logic in MessagesList that iterates over the next messages is now
using the next message id attribute instead of handling the DOM tree on
its own.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesGroup/Message/Message.vue         | 14 +++++-
 .../MessagesGroup/MessagesGroup.vue           | 12 +++++
 src/components/MessagesList/MessagesList.vue  | 46 ++-----------------
 3 files changed, 29 insertions(+), 43 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 0e059442fb8..6e49d0dc79b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -30,6 +30,8 @@ the main body of the message as well as a quote.
 		ref="message"
 		:data-message-id="id"
 		:data-seen="seen"
+		:data-next-message-id="nextMessageId"
+		:data-previous-message-id="previousMessageId"
 		class="message">
 		<div
 			:class="{'hover': showActions && !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
@@ -339,6 +341,16 @@ export default {
 			default: '',
 		},
 
+		previousMessageId: {
+			type: Number,
+			default: 0,
+		},
+
+		nextMessageId: {
+			type: Number,
+			default: 0,
+		},
+
 		lastReadMessageId: {
 			type: Number,
 			default: 0,
@@ -674,7 +686,7 @@ export default {
 			// update in backend
 			this.$store.dispatch('updateLastReadMessage', {
 				token: this.token,
-				id: this.id,
+				id: this.previousMessageId,
 			})
 			// update visually
 			this.$store.dispatch('setVisualLastReadMessageId', {
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 29eab5ff9b8..7ca7d779ec0 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -41,6 +41,8 @@
 					:key="message.id"
 					v-bind="message"
 					:is-first-message="index === 0"
+					:next-message-id="(messages[index + 1] && messages[index + 1].id) || nextMessageId"
+					:previous-message-id="(index > 0 && messages[index - 1].id) || previousMessageId"
 					:last-read-message-id="lastReadMessageId"
 					:actor-type="actorType"
 					:actor-id="actorId"
@@ -88,6 +90,16 @@ export default {
 			required: true,
 		},
 
+		previousMessageId: {
+			type: Number,
+			default: 0,
+		},
+
+		nextMessageId: {
+			type: Number,
+			default: 0,
+		},
+
 		lastReadMessageId: {
 			type: Number,
 			default: 0,
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 696d3ed5453..b49b04e7065 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -40,12 +40,14 @@ get the messagesList array and loop through the list to generate the messages.
 				class="icon-loading" />
 		</div>
 		<MessagesGroup
-			v-for="item of messagesGroupedByAuthor"
+			v-for="(item, index) of messagesGroupedByAuthor"
 			:key="item[0].id"
 			:style="{ height: item.height + 'px' }"
 			v-bind="item"
 			:last-read-message-id="visualLastReadMessageId"
 			:messages="item"
+			:next-message-id="(messagesGroupedByAuthor[index + 1] && messagesGroupedByAuthor[index + 1][0].id) || 0"
+			:previous-message-id="(index > 0 && messagesGroupedByAuthor[index - 1][messagesGroupedByAuthor[index - 1].length - 1].id) || 0"
 			@deleteMessage="handleDeleteMessage" />
 		<template v-if="!messagesGroupedByAuthor.length">
 			<LoadingPlaceholder
@@ -675,45 +677,6 @@ export default {
 			this.debounceUpdateReadMarkerPosition()
 		},
 
-		/**
-		 * Find the next message element following the given message DOM element.
-		 *
-		 * This traverses the next messages and message groups to find the next one.
-		 *
-		 * @param {object} messageEl DOM element for message to start with
-		 * @returns {object} DOM element for the next message or null if none found
-		 */
-		findNextMessageElement(messageEl) {
-			// pick the previous message
-			let searchEl = messageEl.nextElementSibling
-			while (searchEl && !searchEl.matches('.message')) {
-				searchEl = searchEl.nextElementSibling
-			}
-
-			if (searchEl) {
-				return searchEl
-			} else {
-				// nothing found, then need to search in the next message group
-				searchEl = messageEl.closest('.message-group').nextElementSibling
-				while (searchEl && !searchEl.matches('.message-group')) {
-					searchEl = searchEl.nextElementSibling
-				}
-
-				// found the next message group
-				if (searchEl) {
-					// pick the first message
-					searchEl = searchEl.querySelector('.message:first-child')
-				}
-
-				if (searchEl) {
-					// we found it!
-					return searchEl
-				}
-			}
-
-			return null
-		},
-
 		/**
 		 * Finds the last message that is fully visible in the scroller viewport
 		 *
@@ -736,8 +699,7 @@ export default {
 				}
 
 				previousEl = el
-				// note: for scability reasons we don't simply "get all elements"
-				el = this.findNextMessageElement(el)
+				el = document.getElementById('message_' + el.getAttribute('data-next-message-id'))
 			}
 
 			return previousEl