fix(MessagesList): assign new message object to trigger list update

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

3 files changed, 7 insertions, 71 deletions

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 245c8b0a6..6693bf2d5 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -323,7 +323,6 @@ export default {
 		EventBus.$on('scroll-chat-to-bottom-if-sticky', this.scrollToBottomIfSticky)
 		EventBus.$on('focus-message', this.focusMessage)
 		EventBus.$on('route-change', this.onRouteChange)
-		EventBus.$on('message-edited', this.handleMessageEdited)
 		subscribe('networkOffline', this.handleNetworkOffline)
 		subscribe('networkOnline', this.handleNetworkOnline)
 		window.addEventListener('focus', this.onWindowFocus)
@@ -346,7 +345,6 @@ export default {
 		EventBus.$on('scroll-chat-to-bottom-if-sticky', this.scrollToBottomIfSticky)
 		EventBus.$off('focus-message', this.focusMessage)
 		EventBus.$off('route-change', this.onRouteChange)
-		EventBus.$off('message-edited', this.handleMessageEdited)
 
 		this.$store.dispatch('cancelLookForNewMessages', { requestId: this.chatIdentifier })
 		this.destroying = true
@@ -729,67 +727,6 @@ export default {
 			}
 		},
 
-		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
-			}
-
-			if (group.messages.length === 1 && group.id === message.id) {
-				// Nothing to split
-				this.messagesGroupedByDateByAuthor[dateGroupId][group.id].messages = [message]
-				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)
-			const nextMessageId = group.nextMessageId
-			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
-				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,
-				}
-			}
-		},
-
 		/**
 		 * Fetches the messages of a conversation given the conversation token. Triggers
 		 * a long-polling request for new messages.
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index ff4bf2899..06c810a16 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -295,7 +295,7 @@ const mutations = {
 		}
 		if (state.messages[token][message.id]) {
 			Vue.set(state.messages[token], message.id,
-				Object.assign(state.messages[token][message.id], message)
+				Object.assign({}, state.messages[token][message.id], message)
 			)
 		} else {
 			Vue.set(state.messages[token], message.id, message)
@@ -325,6 +325,9 @@ const mutations = {
 	 * @param {string} payload.placeholder Placeholder message until deleting finished
 	 */
 	markMessageAsDeleting(state, { token, id, placeholder }) {
+		if (!state.messages[token][id]) {
+			return
+		}
 		Vue.set(state.messages[token][id], 'messageType', 'comment_deleted')
 		Vue.set(state.messages[token][id], 'message', placeholder)
 	},
@@ -536,10 +539,6 @@ const actions = {
 			const parentInStore = context.getters.message(token, message.parent.id)
 			if (Object.keys(parentInStore).length !== 0 && JSON.stringify(parentInStore) !== JSON.stringify(message.parent)) {
 				context.commit('addMessage', { token, message: message.parent })
-				if (message.systemMessage === 'message_edited') {
-					EventBus.$emit('message-edited', message.parent)
-					return
-				}
 			}
 
 			const reactionsStore = useReactionsStore()
diff --git a/src/store/messagesStore.spec.js b/src/store/messagesStore.spec.js
index 2a435ac7e..644dd500e 100644
--- a/src/store/messagesStore.spec.js
+++ b/src/store/messagesStore.spec.js
@@ -223,7 +223,7 @@ describe('messagesStore', () => {
 				message: 'hello',
 			}
 
-			store.dispatch('processMessage', { token: TOKEN, message })
+			store.dispatch('processMessage', { token: TOKEN, message: cloneDeep(message) })
 		})
 
 		test('deletes from server and replaces deleted message with response', async () => {
@@ -271,9 +271,9 @@ describe('messagesStore', () => {
 			const response = generateOCSResponse({ payload })
 			deleteMessage.mockResolvedValueOnce(response)
 
-			const status = await store.dispatch('deleteMessage', { token: message.token, id: message.id, placeholder: 'placeholder-text' })
+			const status = await store.dispatch('deleteMessage', { token: TOKEN, id: 9, placeholder: 'placeholder-text' })
 
-			expect(deleteMessage).toHaveBeenCalledWith({ token: message.token, id: message.id })
+			expect(deleteMessage).toHaveBeenCalledWith({ token: TOKEN, id: 9 })
 			expect(status).toBe(200)
 
 			expect(store.getters.messagesList(TOKEN)).toMatchObject([message])