Merge pull request #7173 from nextcloud/feature/move-my-reactions-to-parent

Move message.reactions.self to message.reactionsSelf to not merge different data structures

3 files changed, 17 insertions, 21 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index 49c5752c7..69cd66042 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -817,10 +817,8 @@ describe('Message.vue', () => {
 			store = new Store(testStoreConfig)
 
 			const messagePropsWithReactions = Object.assign({}, messageProps)
-			messagePropsWithReactions.reactions = {
-				'👍': 1,
-				self: ['👍'],
-			}
+			messagePropsWithReactions.reactions = { '👍': 1 }
+			messagePropsWithReactions.reactionsSelf = ['👍']
 
 			const wrapper = shallowMount(Message, {
 				localVue,
@@ -855,10 +853,8 @@ describe('Message.vue', () => {
 			store = new Store(testStoreConfig)
 
 			const messagePropsWithReactions = Object.assign({}, messageProps)
-			messagePropsWithReactions.reactions = {
-				'❤️': 1,
-				self: ['❤️'],
-			}
+			messagePropsWithReactions.reactions = { '❤️': 1 }
+			messagePropsWithReactions.reactionsSelf = ['❤️']
 
 			const wrapper = shallowMount(Message, {
 				localVue,
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 55f23bc89..612b8de11 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -350,6 +350,11 @@ export default {
 			type: [Array, Object],
 			default: () => { return {} },
 		},
+
+		reactionsSelf: {
+			type: Array,
+			default: () => { return [] },
+		},
 	},
 
 	data() {
@@ -567,12 +572,7 @@ export default {
 		},
 
 		simpleReactions() {
-			const reactions = Object.assign({}, this.messageObject.reactions)
-			if (reactions?.self) {
-				// Remove the self entry for the rendering
-				delete reactions.self
-			}
-			return reactions
+			return this.messageObject.reactions
 		},
 
 		detailedReactions() {
@@ -610,7 +610,7 @@ export default {
 
 	methods: {
 		userHasReacted(reaction) {
-			return this.reactions?.self && this.reactions.self.indexOf(reaction) !== -1
+			return this.reactionsSelf && this.reactionsSelf.indexOf(reaction) !== -1
 		},
 
 		lastReadMessageVisibilityChanged(isVisible) {
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 16a22ca9e..84616a494 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -356,10 +356,10 @@ const mutations = {
 		const reactionCount = state.messages[token][messageId].reactions[reaction] + 1
 		Vue.set(state.messages[token][messageId].reactions, reaction, reactionCount)
 
-		if (!state.messages[token][messageId].reactions.self) {
-			Vue.set(state.messages[token][messageId].reactions, 'self', [reaction])
+		if (!state.messages[token][messageId].reactionsSelf) {
+			Vue.set(state.messages[token][messageId], 'reactionsSelf', [reaction])
 		} else {
-			state.messages[token][messageId].reactions.self.push(reaction)
+			state.messages[token][messageId].reactionsSelf.push(reaction)
 		}
 	},
 
@@ -371,10 +371,10 @@ const mutations = {
 			Vue.delete(state.messages[token][messageId].reactions, reaction)
 		}
 
-		if (state.messages[token][messageId].reactions.self) {
-			const i = state.messages[token][messageId].reactions.self.indexOf(reaction)
+		if (state.messages[token][messageId].reactionsSelf) {
+			const i = state.messages[token][messageId].reactionsSelf.indexOf(reaction)
 			if (i !== -1) {
-				Vue.delete(state.messages[token][messageId].reactions, 'self', i)
+				Vue.delete(state.messages[token][messageId], 'reactionsSelf', i)
 			}
 		}
 	},