chore: small fixes, add filters to finding visible messages and add a…

… fallback to not find the last read message Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
nextcloud · Mar 27, 2024 · f1e90ea · f1e90ea
1 parent 79e10f1
commit f1e90ea
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 37 deletions.
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
@@ -623,9 +623,19 @@ export default {
 			}
 
 			if (!isFocused) {
-				// This is a safeguard in case the message is not found
-				// scroll to bottom
-				this.scrollToBottom({ force: true, smooth: true })
+				// Safeguard: scroll to before last read message
+				const fallbackLastReadMessageId = this.$store.getters.getFirstDisplayableMessageIdBeforeReadMarker(this.visualLastReadMessageId, startingMessageId)
+				if (fallbackLastReadMessageId) {
+					isFocused = this.focusMessage(fallbackLastReadMessageId, false, false)
+					this.$store.dispatch('setVisualLastReadMessageId', {
+						token: this.token,
+						id: fallbackLastReadMessageId,
+					})
+				} else {
+					// This is an ultimate safeguard in case the fallback message is not found too
+					// scroll to bottom
+					this.scrollToBottom({ force: true, smooth: true })
+				}
 			}
 
 			// Update read marker in all cases except when the message is from URL anchor
@@ -678,7 +688,7 @@ export default {
 				this.$nextTick(() => {
 					// basically scrolling to either the last read message or the message in the URL anchor
 					// and there is a fallback to scroll to the bottom if the message is not found
-					this.scrollToFocusedMessage()
+					this.scrollToFocusedMessage(focusMessageId)
 				})
 
 				this.isInitialisingMessages = false
@@ -1101,23 +1111,22 @@ export default {
 			console.debug('Scrolling to a focused message programmatically')
 			this.isFocusingMessage = true
 
-			this.$nextTick(async () => {
-				element.scrollIntoView({
-					behavior: smooth ? 'smooth' : 'auto',
-					block: 'center',
-					inline: 'nearest',
-				})
-				if (this.$refs.scroller && !smooth) {
-					// scroll the viewport slightly further to make sure the element is about 1/3 from the top
-					this.$refs.scroller.scrollTop += this.$refs.scroller.offsetHeight / 4
-				}
-
-				if (highlightAnimation) {
-					EventBus.$emit('highlight-message', messageId)
-				}
-				this.isFocusingMessage = false
+			element.scrollIntoView({
+				behavior: smooth ? 'smooth' : 'auto',
+				block: 'center',
+				inline: 'nearest',
 			})
 
+			if (this.$refs.scroller && !smooth) {
+				// scroll the viewport slightly further to make sure the element is about 1/3 from the top
+				this.$refs.scroller.scrollTop += this.$refs.scroller.offsetHeight / 4
+			}
+
+			if (highlightAnimation) {
+				EventBus.$emit('highlight-message', messageId)
+			}
+			this.isFocusingMessage = false
+
 			return true // element found
 		},
 

diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
@@ -224,33 +224,29 @@ const getters = {
 			return null
 		}
 
-		const displayableMessages = getters.messagesList(token).filter(message => {
+		return getters.messagesList(token).find(message => {
 			return message.id >= readMessageId
-				&& !('' + message.id).startsWith('temp-')
-		})
-
-		if (displayableMessages.length) {
-			return displayableMessages.shift().id
-		}
-
-		return null
+				&& !String(message.id).startsWith('temp-')
+				&& message.systemMessage !== 'reaction'
+				&& message.systemMessage !== 'reaction_deleted'
+				&& message.systemMessage !== 'reaction_revoked'
+				&& message.systemMessage !== 'poll_voted'
+		})?.id
 	},
 
 	getFirstDisplayableMessageIdBeforeReadMarker: (state, getters) => (token, readMessageId) => {
 		if (!state.messages[token]) {
 			return null
 		}
 
-		const displayableMessages = getters.messagesList(token).filter(message => {
+		return getters.messagesList(token).slice().reverse().find(message => {
 			return message.id < readMessageId
-				&& !('' + message.id).startsWith('temp-')
-		})
-
-		if (displayableMessages.length) {
-			return displayableMessages.pop().id
-		}
-
-		return null
+				&& !String(message.id).startsWith('temp-')
+				&& message.systemMessage !== 'reaction'
+				&& message.systemMessage !== 'reaction_deleted'
+				&& message.systemMessage !== 'reaction_revoked'
+				&& message.systemMessage !== 'poll_voted'
+		})?.id
 	},
 
 	isSendingMessages: (state) => {