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>

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', {

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,

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