(feat) add emoji reaction removal

Author: antoine92190

demo/src/ChatContainer.vue

@@ -451,23 +451,15 @@ export default {
 			// do something
 		},
 
-		async sendMessageReaction({ reaction, messageId, roomId }) {
-			await this.messagesRef(roomId)
-				.doc(messageId)
-				.update({
-					[`reactions.${reaction.name}`]: firebase.firestore.FieldValue.arrayUnion(
-						this.currentUserId
-					)
-				})
-		},
+		async sendMessageReaction({ reaction, messageId, remove, roomId }) {
+			const dbAction = remove
+				? firebase.firestore.FieldValue.arrayRemove(this.currentUserId)
+				: firebase.firestore.FieldValue.arrayUnion(this.currentUserId)
 
-		async removeMessageReaction({ reaction, messageId, roomId }) {
 			await this.messagesRef(roomId)
 				.doc(messageId)
 				.update({
-					[`reactions.${reaction.name}`]: firebase.firestore.FieldValue.arrayRemove(
-						this.currentUserId
-					)
+					[`reactions.${reaction.name}`]: dbAction
 				})
 		},
 

src/ChatWindow/ChatMessage.vue

@@ -164,10 +164,13 @@
 				</div>
 				<button
 					v-for="(reaction, key) in message.reactions"
+					v-show="reaction.length"
 					:key="key"
 					class="button-reaction"
-					:class="{ 'reaction-me': reaction[message.sender_id] }"
-					@click="sendMessageReaction({ name: key })"
+					:class="{
+						'reaction-me': reaction.indexOf(currentUserId) !== -1
+					}"
+					@click="sendMessageReaction({ name: key }, reaction)"
 				>
 					{{ getEmojiByName(key) }}<span>{{ reaction.length }}</span>
 				</button>
@@ -376,12 +379,13 @@ export default {
 		getEmojiByName(emojiName) {
 			return this.emojisList[emojiName]
 		},
-		sendMessageReaction(emoji) {
-			this.closeEmoji()
+		sendMessageReaction(emoji, reaction) {
 			this.$emit('sendMessageReaction', {
 				messageId: this.message._id,
-				reaction: emoji
+				reaction: emoji,
+				remove: reaction && reaction.indexOf(this.currentUserId) !== -1
 			})
+			this.closeEmoji()
 		}
 	}
 }