fix: switch highlighting behavior to event-driven

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
nextcloud · Mar 27, 2024 · 2955434 · 2955434
1 parent 2c21068
commit 2955434
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 38 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -303,8 +303,6 @@ export default {
 		}
 	},
 
-	expose: ['highlightMessage'],
-
 	data() {
 		return {
 			isHovered: false,
@@ -450,15 +448,25 @@ export default {
 		},
 	},
 
+	mounted() {
+		EventBus.$on('highlight-message', this.highlightMessage)
+	},
+
+	beforeDestroy() {
+		EventBus.$off('highlight-message', this.highlightMessage)
+	},
+
 	methods: {
 		lastReadMessageVisibilityChanged(isVisible) {
 			if (isVisible) {
 				this.seen = true
 			}
 		},
 
-		highlightMessage() {
-			this.isHighlighted = true
+		highlightMessage(messageId) {
+			if (this.id === messageId) {
+				this.isHighlighted = true
+			}
 		},
 
 		handleMouseover() {

diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -38,7 +38,6 @@
 			</li>
 			<Message v-for="(message, index) of messages"
 				:key="message.id"
-				ref="message"
 				v-bind="message"
 				:token="token"
 				:is-temporary="message.timestamp === 0"
@@ -101,8 +100,6 @@ export default {
 		}
 	},
 
-	expose: ['highlightMessage'],
-
 	computed: {
 		actorId() {
 			return this.messages[0].actorId
@@ -163,16 +160,6 @@ export default {
 		},
 	},
 
-	methods: {
-		highlightMessage(messageId) {
-			for (const message of this.$refs.message) {
-				if (message.id === messageId) {
-					message.highlightMessage()
-					break
-				}
-			}
-		},
-	},
 }
 </script>
 

diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -89,8 +89,6 @@ export default {
 		},
 	},
 
-	expose: ['highlightMessage'],
-
 	setup() {
 		const { createCombinedSystemMessage } = useCombinedSystemMessage()
 
@@ -235,15 +233,6 @@ export default {
 			const prevMessage = this.messages[this.messages.findIndex(searchedMessage => searchedMessage.id === message.id) - 1]
 			return prevMessage?.id || this.previousMessageId
 		},
-
-		highlightMessage(messageId) {
-			for (const message of this.$refs.message) {
-				if (message.id === messageId) {
-					message.highlightMessage()
-					break
-				}
-			}
-		},
 	},
 }
 </script>

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
@@ -48,7 +48,6 @@
 			<component :is="messagesGroupComponent(group)"
 				v-for="group in list"
 				:key="group.id"
-				ref="messagesGroup"
 				class="messages-group"
 				:token="token"
 				:messages="group.messages"
@@ -616,8 +615,7 @@ export default {
 			return null
 		},
 
-		scrollToFocusedMessage() {
-			const focusMessageId = this.getMessageIdFromHash()
+		scrollToFocusedMessage(focusMessageId) {
 			let isFocused = null
 			if (focusMessageId) {
 				// scroll to message in URL anchor
@@ -1153,7 +1151,7 @@ export default {
 
 			this.$nextTick(async () => {
 				// FIXME: this doesn't wait for the smooth scroll to end
-				await element.scrollIntoView({
+				element.scrollIntoView({
 					behavior: smooth ? 'smooth' : 'auto',
 					block: 'center',
 					inline: 'nearest',
@@ -1163,12 +1161,7 @@ export default {
 					this.$refs.scroller.scrollTop += this.$refs.scroller.offsetHeight / 4
 				}
 				if (highlightAnimation) {
-					for (const group of this.$refs.messagesGroup) {
-						if (group.messages.some(message => message.id === messageId)) {
-							group.highlightMessage(messageId)
-							break
-						}
-					}
+					EventBus.$emit('highlight-message', messageId)
 				}
 				this.isFocusingMessage = false
 				await this.handleScroll()