fix(reactions): patch the store when the current user reacts

Signed-off-by: DorraJaouad <[email protected]>

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -153,7 +153,6 @@ the main body of the message as well as a quote.
 			<Reactions v-if="Object.keys(reactions).length"
 				:id="id"
 				:token="token"
-				:actor-id="actorId"
 				:show-message-buttons-bar="showMessageButtonsBar"
 				:reactions-self="reactionsSelf"
 				:can-react="canReact"

src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue

@@ -114,10 +114,6 @@ export default {
 			type: [String, Number],
 			required: true,
 		},
-		actorId: {
-			type: String,
-			required: true,
-		},
 	},
 
 	emits: ['emoji-picker-toggled'],
@@ -171,14 +167,12 @@ export default {
 					token: this.token,
 					messageId: this.id,
 					selectedEmoji: clickedEmoji,
-					actorId: this.actorId,
 				})
 			} else {
 				this.$store.dispatch('removeReactionFromMessage', {
 					token: this.token,
 					messageId: this.id,
 					selectedEmoji: clickedEmoji,
-					actorId: this.actorId,
 				})
 			}
 		},

src/store/messagesStore.js

@@ -1345,7 +1345,7 @@ const actions = {
 	 * @param {*} context the context object
 	 * @param {*} param1 conversation token, message id and selected emoji (string)
 	 */
-	async addReactionToMessage(context, { token, messageId, selectedEmoji }) {
+	async addReactionToMessage(context, { token, messageId, selectedEmoji, actorId }) {
 		try {
 			context.commit('addReactionToMessage', {
 				token,
@@ -1354,13 +1354,15 @@ const actions = {
 			})
 			// The response return an array with the reaction details for this message
 			const response = await addReactionToMessage(token, messageId, selectedEmoji)
-			// We replace the reaction details in the reactions store and wipe the old
-			// values
+
+			const actorId = context.getters.getActorId()
+			const actorObject = response.data.ocs.data[selectedEmoji].find(actor => actor.actorId === actorId)
 			const reactionsStore = useReactionsStore()
-			reactionsStore.updateReactions({
+			reactionsStore.addReaction({
 				token,
 				messageId,
-				reactionsDetails: response.data.ocs.data,
+				reaction: selectedEmoji,
+				actor: actorObject,
 			})
 		} catch (error) {
 			// Restore the previous state if the request fails
@@ -1369,7 +1371,6 @@ const actions = {
 				messageId,
 				reaction: selectedEmoji,
 			})
-			console.error(error)
 			showError(t('spreed', 'Failed to add reaction'))
 		}
 	},
@@ -1388,14 +1389,15 @@ const actions = {
 				reaction: selectedEmoji,
 			})
 			// The response return an array with the reaction details for this message
-			const response = await removeReactionFromMessage(token, messageId, selectedEmoji)
-			// We replace the reaction details in the reactions store and wipe the old
-			// values
+			await removeReactionFromMessage(token, messageId, selectedEmoji)
+
+			const actorId = context.getters.getActorId()
 			const reactionsStore = useReactionsStore()
-			reactionsStore.updateReactions({
+			reactionsStore.removeReaction({
 				token,
 				messageId,
-				reactionsDetails: response.data.ocs.data,
+				reaction: selectedEmoji,
+				actorId
 			})
 		} catch (error) {
 			// Restore the previous state if the request fails

src/stores/reactions.js

@@ -87,42 +87,68 @@ export const useReactionsStore = defineStore('Reactions', {
 		},
 
 		/**
-		 * Delete all reactions for a given message.
+		 * Add a reaction for a given message.
 		 *
-		 * @param {string} token The conversation token
-		 * @param {number} messageId The id of message
+		 * @param {object} payload action payload
+		 * @param {string} payload.token The conversation token
+		 * @param {number} payload.messageId The id of message
+		 * @param {string} payload.reaction The reaction of the user
+		 * @param {object} payload.actor The user who reacted
 		 *
 		 */
-		resetReactions(token, messageId) {
+		addReaction({ token, messageId, reaction, actor }) {
 			if (!this.reactions[token]) {
 				Vue.set(this.reactions, token, {})
+
 			}
-			Vue.delete(this.reactions[token], messageId)
+			if (!this.reactions[token][messageId]) {
+				Vue.set(this.reactions[token], messageId, {})
+
+			}
+			if (!this.reactions[token][messageId][reaction]) {
+				Vue.set(this.reactions[token][messageId], reaction, [])
+
+			}
+			this.reactions[token][messageId][reaction].push(actor)
 		},
 
 		/**
-		 * Updates reactions for a given message.
+		 * Remove a reaction for a given message.
 		 *
 		 * @param {object} payload action payload
 		 * @param {string} payload.token The conversation token
 		 * @param {number} payload.messageId The id of message
-		 * @param {object} payload.reactionsDetails The list of reactions with details for a given message
+		 * @param {string} payload.reaction the reaction to remove
+		 * @param {string} payload.actorId the actorId of the user who reacted
 		 *
 		 */
-		updateReactions({ token, messageId, reactionsDetails }) {
-			// TODO: patch reactions instead of replacing them
-			this.addReactions({
-				token,
-				messageId,
-				reactions: reactionsDetails,
-			})
+		removeReaction({ token, messageId, reaction, actorId }) {
+			const index = this.reactions[token][messageId][reaction].indexOf(actor => actor.actorId === actorId)
+			if (index !== -1) {
+				this.reactions[token][messageId][reaction].splice(index, 1)
+			}
+		},
+
+		/**
+		 * Delete all reactions for a given message.
+		 *
+		 * @param {string} token The conversation token
+		 * @param {number} messageId The id of message
+		 *
+		 */
+		resetReactions(token, messageId) {
+			if (!this.reactions[token]) {
+				Vue.set(this.reactions, token, {})
+			}
+			Vue.delete(this.reactions[token], messageId)
 		},
 
 		/**
 		 * Gets the full reactions list for a given message.
 		 *
 		 * @param {string} token The conversation token
 		 * @param {number} messageId The id of message
+		 *
 		 */
 		async fetchReactions(token, messageId) {
 			console.debug('getting reactions details')