temp

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

3 files changed, 29 insertions, 17 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>