Always remove reaction when re-clicking same emoji

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

2 files changed, 12 insertions, 21 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index b9273d164..ef93de7a0 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -138,7 +138,7 @@ the main body of the message as well as a quote.
 				</Popover>
 
 				<!-- More reactions picker -->
-				<EmojiPicker :per-line="5" :container="`#message_${id}`" @select="addReactionToMessage">
+				<EmojiPicker :per-line="5" :container="`#message_${id}`" @select="handleReactionClick">
 					<button class="reaction-button">
 						<EmoticonOutline :size="15" />
 					</button>
@@ -712,21 +712,6 @@ export default {
 
 			this.isDeleting = false
 		},
-
-		addReactionToMessage(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/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 5d810b569..3c59b42cc 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -102,19 +102,19 @@
 				</template>
 			</Button>
 			<Button type="tertiary"
-				@click="addReactionToMessage('👍')">
+				@click="handleReactionClick('👍')">
 				<template #icon>
 					<span>👍</span>
 				</template>
 			</Button>
 			<Button type="tertiary"
-				@click="addReactionToMessage('❤️')">
+				@click="handleReactionClick('❤️')">
 				<template #icon>
 					<span>❤️</span>
 				</template>
 			</Button>
 			<EmojiPicker :container="`#message_${id}`"
-				@select="addReactionToMessage">
+				@select="handleReactionClick">
 				<Button type="tertiary">
 					<template #icon>
 						<Plus :size="20" />
@@ -400,7 +400,7 @@ export default {
 			await this.$store.dispatch('fetchConversation', { token: this.token })
 		},
 
-		addReactionToMessage(selectedEmoji) {
+		handleReactionClick(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', {
@@ -410,7 +410,13 @@ export default {
 					actorId: this.actorId,
 				})
 			} else {
-				console.debug('Current user has already reacted')
+				console.debug('user has already reacted, removing reaction')
+				this.$store.dispatch('removeReactionFromMessage', {
+					token: this.token,
+					messageId: this.id,
+					selectedEmoji,
+					actorId: this.actorId,
+				})
 			}
 
 		},