Fix(MessagesList): skip soft update when needed and make editing a me…

…ssage softer

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/MessagesList/MessagesList.vue

@@ -277,9 +277,14 @@ export default {
 
 		messagesList: {
 			immediate: true,
-			handler(messages) {
-				const groups = this.prepareMessagesGroups(messages)
-				this.softUpdateByDateGroups(this.messagesGroupedByDateByAuthor, groups)
+			handler(newMessages, oldMessages) {
+				const newGroups = this.prepareMessagesGroups(newMessages)
+				// Check if messages token has changed or if messages were just loaded
+				if (!!oldMessages || (newMessages.length && newMessages[0].token !== oldMessages?.at(0).token)) {
+					this.messagesGroupedByDateByAuthor = newGroups
+				} else {
+					this.softUpdateByDateGroups(this.messagesGroupedByDateByAuthor, newGroups)
+				}
 			},
 		},
 	},
@@ -365,7 +370,7 @@ export default {
 					}
 
 					// Update the previous group with the next message id
-					if (prevGroupMap.length) {
+					if (Object.keys(prevGroupMap).length) {
 						groupsByDate[prevGroupMap.date][prevGroupMap.groupId].nextMessageId = message.id
 					}
 
@@ -384,18 +389,6 @@ export default {
 		},
 
 		softUpdateByDateGroups(oldGroups, newGroups) {
-			// Messages were just loaded, no need to compare
-			if (!Object.keys(oldGroups).length) {
-				this.messagesGroupedByDateByAuthor = newGroups
-				return
-			}
-
-			// If token has changed, we need to reset the groups
-			if (Object.values(Object.values(oldGroups)?.at(0)).some(group => group.token !== this.token)) {
-				this.messagesGroupedByDateByAuthor = newGroups
-				return
-			}
-
 			const oldGroupsMap = new Map(Object.entries(oldGroups))
 			// Check if we have this group in the old list already and it is unchanged
 			return Object.keys(newGroups).forEach(dateTimestamp => {
@@ -412,7 +405,7 @@ export default {
 		softUpdateAuthorGroups(oldGroups, newGroups) {
 			const oldGroupsMap = new Map(Object.entries(oldGroups))
 			Object.entries(newGroups).forEach(([id, newGroup]) => {
-				if (!oldGroupsMap.has(id) || !this.areGroupsIdentical(newGroup, oldGroupsMap.get(id))) {
+				if (!oldGroupsMap.has(id) || (oldGroupsMap.has(id) && !this.areGroupsIdentical(newGroup, oldGroupsMap.get(id)))) {
 					this.messagesGroupedByDateByAuthor[newGroup.dateTimestamp][id] = newGroup
 				}
 			})
@@ -694,8 +687,60 @@ export default {
 			}
 		},
 
-		handleMessageEdited() {
-			this.messagesGroupedByDateByAuthor = this.prepareMessagesGroups(this.messagesList)
+		handleMessageEdited(message) {
+			// soft edit for a message in the list
+			// find the corresponding date group id (dateTimeStamp)
+			const dateGroupId = moment(message.timestamp * 1000).startOf('day').unix()
+			const groups = this.messagesGroupedByDateByAuthor[dateGroupId]
+			if (!groups) {
+				// Message was edited already and this is message loading phase
+				return
+			}
+			// find the corresponding messages group in the list
+			const group = Object.values(groups).find(group => group.id <= message.id && (group.nextMessageId >= message.id || group.nextMessageId === 0))
+
+			if (!group) {
+				// Messages were not loaded yet
+				return
+			}
+			// we split the group in 3 part,
+			// 1. the messages before the edited message (if any)
+			// 2. the edited message
+			// 3. the messages after the edited message (if any)
+			let nextMessageId = 0
+			const index = group.messages.findIndex(m => m.id === message.id)
+			const before = group.messages.slice(0, index)
+			const after = group.messages.slice(index + 1)
+			// If there are before messages, we keep them in the same group
+			if (before.length) {
+				this.messagesGroupedByDateByAuthor[dateGroupId][group.id].messages = before
+				nextMessageId = group.nextMessageId
+				this.messagesGroupedByDateByAuthor[dateGroupId][group.id].nextMessageId = message.id
+			}
+			// We create a new group for the edited message
+			this.messagesGroupedByDateByAuthor[dateGroupId][message.id] = {
+				id: message.id,
+				messages: [message],
+				token: this.token,
+				dateTimestamp: dateGroupId,
+				previousMessageId: before.length ? before.at(-1).id : group.previousMessageId,
+				nextMessageId: after.length ? after[0].id : nextMessageId,
+				isSystemMessagesGroup: message.systemMessage.length !== 0,
+			}
+			// If there are after messages, we create a new group for them
+			if (after.length) {
+				const newGroupId = after[0].id
+				this.messagesGroupedByDateByAuthor[dateGroupId][newGroupId] = {
+					id: newGroupId,
+					messages: after,
+					token: this.token,
+					dateTimestamp: dateGroupId,
+					previousMessageId: message.id,
+					nextMessageId,
+					isSystemMessagesGroup: message.systemMessage.length !== 0,
+				}
+				this.messagesGroupedByDateByAuthor[dateGroupId][message.id].nextMessageId = newGroupId
+			}
 		},
 
 		/**

src/store/messagesStore.js

@@ -538,7 +538,7 @@ const actions = {
 			if (Object.keys(parentInStore).length !== 0) {
 				context.commit('addMessage', { token, message: message.parent })
 				if (message.systemMessage === 'message_edited') {
-					EventBus.$emit('message-edited')
+					EventBus.$emit('message-edited', message.parent)
 					return
 				}
 			}