temp

Signed-off-by: marco <marcoambrosini@pm.me>

5 files changed, 68 insertions, 55 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index e0ce4c906..ce90c6422 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -83,6 +83,11 @@ describe('Message.vue', () => {
 					reactions: '',
 				}
 			})
+
+		// Dummy hasReactions getter so that the message component is always
+		// properly mounted.
+		testStoreConfig.modules.messagesStore.getters.hasReactions
+			= jest.fn().mockReturnValue(() => false)
 	})
 
 	afterEach(() => {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 081598316..e982fe896 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -135,7 +135,7 @@ the main body of the message as well as a quote.
 				</Popover>
 
 				<!-- More reactions picker -->
-				<EmojiPicker :per-line="5" @select.stop="">
+				<EmojiPicker :per-line="5">
 					<button class="reaction-button">
 						<EmoticonOutline :size="15" />
 					</button>
@@ -560,7 +560,7 @@ export default {
 		},
 
 		hasReactions() {
-			return this.messageObject.reactions?.length !== 0
+			return this.$store.getters.hasReactions(this.token, this.id)
 		},
 
 		simpleReactions() {
@@ -568,7 +568,7 @@ export default {
 		},
 
 		detailedReactions() {
-			return this.$store.getters.reactions(this.token, this.messageObject.id)
+			return this.$store.getters.reactions(this.token, this.id)
 		},
 	},
 
@@ -641,10 +641,9 @@ export default {
 				 * reactions.
 				 */
 				this.detailedReactionsRequested = true
-				console.debug('getting reactions details')
 				await this.$store.dispatch('getReactions', {
 					token: this.token,
-					messageId: this.messageObject.id,
+					messageId: this.id,
 				})
 			} catch {
 				this.detailedReactionsRequested = false
@@ -656,21 +655,23 @@ export default {
 				await this.getReactions()
 			}
 			// Check if current user has already added this reaction to the message
-			const currentUserHasReacted = this.detailedReactions[clickedEmoji].filter(item => {
-				return item.actorId === this.actorId
-			}).length !== 0
+			const currentUserHasReacted = this.$store.getters.userHasReacted(this.actorId, this.token, this.id, clickedEmoji)
 
 			if (!currentUserHasReacted) {
+				console.debug('adding reaction')
 				this.$store.dispatch('addReactionToMessage', {
 					token: this.token,
-					messageId: this.messageObject.id,
+					messageId: this.id,
 					selectedEmoji: clickedEmoji,
+					actorId: this.actorId,
 				})
 			} else {
+				console.debug('user has already reacted, removing reaction')
 				this.$store.dispatch('removeReactionFromMessage', {
 					token: this.token,
-					messageId: this.messageObject.id,
+					messageId: this.id,
 					selectedEmoji: clickedEmoji,
+					actorId: this.actorId,
 				})
 			}
 		},
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index b3cbd66bd..5a5868cc7 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -111,7 +111,7 @@
 					<span>❤️</span>
 				</template>
 			</Button>
-			<EmojiPicker @select.stop="">
+			<EmojiPicker @select="addReactionToMessage">
 				<Button type="tertiary">
 					<template #icon>
 						<Plus :size="20" />
@@ -424,13 +424,19 @@ export default {
 		},
 
 		addReactionToMessage(selectedEmoji) {
-			this.$store.dispatch('addReactionToMessage', {
-				token: this.token,
-				messageId: this.messageObject.id,
-				selectedEmoji,
-			})
-		},
+			// Add reaction only if user hasn't reacted yet
+			if (!this.$store.getters.userHasReacted(this.actorId, this.token, this.messageObject.id, selectedEmoji)) {
+				this.$store.dispatch('addReactionToMessage', {
+					token: this.token,
+					messageId: this.messageObject.id,
+					selectedEmoji,
+					actorId: this.actorId,
+				})
+			} else {
+				console.debug('Current user has already reacted')
+			}
 
+		},
 	},
 }
 </script>
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 6d28cb748..aacb86bd7 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -194,38 +194,9 @@ const getters = {
 		return Object.keys(state.cancelPostNewMessage).length !== 0
 	},
 
-	hasReactionsDetails: (state) => (token, messageId) => {
-		const reactions = state.messages[token][messageId].reactions
-		// Check the first reaction to see if the reactions are detailed or not
-		return (typeof reactions[Object.keys(reactions)[0]]) === 'object'
-	},
-
-	/**
-	 *
-	 * @param {*} state The state object
-	 * @param getters The getters
-	 * @return {object} an object with the reactions (emojis) as keys and a number
-	 * as value.
-	 */
-	simplifiedReactions: (state, getters) => (token, messageId) => {
-		const reactions = state.messages[token][messageId].reactions
-
-		// Return an empty object if there are no reactions for the message
-		if (Object.keys(reactions).length === 0) {
-			return {}
-		}
-
-		const hasReactionsDetails = getters.hasReactionsDetails(token, messageId)
-
-		if (!hasReactionsDetails) {
-			return reactions
-		} else {
-			const simpleReactions = {}
-			for (const reaction of Object.keys(reactions)) {
-				simpleReactions[reaction] = reactions[reaction].length
-			}
-			return simpleReactions
-		}
+	// Returns true if the message has reactions
+	hasReactions: (state) => (token, messageId) => {
+		return Object.keys(state.messages[token][messageId].reactions).length !== 0
 	},
 }
 
@@ -372,12 +343,20 @@ const mutations = {
 
 	// Increases reaction count for a particular reaction on a message
 	addReactionToMessage(state, { token, messageId, reaction }) {
-		state.messages[token][messageId].reactions[reaction]++
+		if (!state.messages[token][messageId].reactions[reaction]) {
+			Vue.set(state.messages[token][messageId].reactions, reaction, 0)
+		}
+		const reactionCount = state.messages[token][messageId].reactions[reaction] + 1
+		Vue.set(state.messages[token][messageId].reactions, reaction, reactionCount)
 	},
 
 	// Decreases reaction count for a particular reaction on a message
 	removeReactionFromMessage(state, { token, messageId, reaction }) {
-		state.messages[token][messageId].reactions[reaction]--
+		const reactionCount = state.messages[token][messageId].reactions[reaction] - 1
+		Vue.set(state.messages[token][messageId].reactions, reaction, reactionCount)
+		if (state.messages[token][messageId].reactions[reaction] <= 0) {
+			Vue.delete(state.messages[token][messageId].reactions, reaction)
+		}
 	},
 }
 
@@ -488,6 +467,7 @@ const actions = {
 			token,
 			isReplyable: false,
 			sendingFailure: '',
+			reactions: {},
 			referenceId: Hex.stringify(SHA256(tempId)),
 		})
 
@@ -992,6 +972,11 @@ const actions = {
 				reaction: selectedEmoji,
 			})
 			await addReactionToMessage(token, messageId, selectedEmoji)
+			try {
+				context.dispatch('getReactions', { token, messageId })
+			} catch (error) {
+				console.debug(error)
+			}
 		} catch (error) {
 			// Restore the previous state if the request fails
 			context.commit('removeReactionFromMessage', {
@@ -1004,7 +989,7 @@ const actions = {
 	},
 
 	/**
-	 * Removes a single reactin to a message for the current user.
+	 * Removes a single reaction from a message for the current user.
 	 *
 	 * @param {*} context the context object
 	 * @param {*} param1 conversation token, message id and selected emoji (string)
@@ -1017,6 +1002,11 @@ const actions = {
 				reaction: selectedEmoji,
 			})
 			await removeReactionFromMessage(token, messageId, selectedEmoji)
+			try {
+				context.dispatch('getReactions', { token, messageId })
+			} catch (error) {
+				console.debug(error)
+			}
 		} catch (error) {
 			// Restore the previous state if the request fails
 			context.commit('addReactionToMessage', {
diff --git a/src/store/reactionsStore.js b/src/store/reactionsStore.js
index c3c7ce0e5..ab1f92e47 100644
--- a/src/store/reactionsStore.js
+++ b/src/store/reactionsStore.js
@@ -40,14 +40,25 @@ const getters = {
 			return undefined
 		}
 	},
+
+	// Checks if a user has already reacted to a message with a particular reaction
+	userHasReacted: (state) => (actorId, token, messageId, reaction) => {
+		if (!state?.reactions?.[token]?.[messageId]?.[reaction]) {
+			return false
+		}
+		return state?.reactions?.[token]?.[messageId]?.[reaction].filter(item => {
+			return item.actorId === actorId
+		}).length !== 0
+	},
 }
 
 const mutations = {
 	addReactions(state, { token, messageId, reactions }) {
 		if (!state.reactions[token]) {
-			Vue.set(state.reactions, [token], [messageId])
+			Vue.set(state.reactions, token, {})
+
 		}
-		state.reactions[token][messageId] = reactions
+		Vue.set(state.reactions[token], messageId, reactions)
 	},
 }
 
@@ -59,7 +70,7 @@ const actions = {
 	 * @param {*} param1 conversation token, message id
 	 */
 	async getReactions(context, { token, messageId }) {
-
+		console.debug('getting reactions details')
 		try {
 			const response = await getReactionsDetails(token, messageId)
 			context.commit('addReactions', {