add capability to remove reactions

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -76,26 +76,31 @@ export default class ChatMessageViewModel {
     };
 
     // reactions
-    addReaction = (reaction: ChatMessageReaction): void => {
+    handleReaction = (reaction: ChatMessageReaction): void => {
+        function setReaction(mapState: React.MapState<any>) {
+            if (reaction.isDeleting) {
+                mapState.remove(reaction.sender);
+            } else {
+                mapState.set(reaction.sender, reaction);
+            }
+        }
+
         switch (reaction.content) {
             case ReactionSymbols.ThumbsUp:
-                return this.reactionsThumbsUp.set(reaction.sender, reaction);
+                return setReaction(this.reactionsThumbsUp);
             case ReactionSymbols.Check:
-                return this.reactionsCheck.set(reaction.sender, reaction);
+                return setReaction(this.reactionsCheck);
             case ReactionSymbols.Attention:
-                return this.reactionsAttention.set(reaction.sender, reaction);
+                return setReaction(this.reactionsAttention);
             case ReactionSymbols.DoubleAttention:
-                return this.reactionsDoubleAttention.set(
-                    reaction.sender,
-                    reaction,
-                );
+                return setReaction(this.reactionsDoubleAttention);
             case ReactionSymbols.Question:
-                return this.reactionsQuestion.set(reaction.sender, reaction);
+                return setReaction(this.reactionsQuestion);
         }
     };
 
-    sendReaction = (content: ReactionSymbols): void => {
-        this.messagePageViewModel.sendReaction(this.chatMessage.id, content);
+    sendReaction = (content: ReactionSymbols, isDeleting: boolean): void => {
+        this.messagePageViewModel.sendReaction(this.chatMessage.id, content, isDeleting);
     };
 
     // load

src/ViewModel/Chat/chatViewModel.ts

@@ -181,7 +181,7 @@ export default class ChatViewModel {
         );
         chatModel.reactionHandlerManager.addHandler(
             (reaction: ChatMessageReaction) => {
-                this.messagePageViewModel.showReaction(reaction);
+                this.messagePageViewModel.handleReaction(reaction);
             },
         );
 

src/ViewModel/Pages/messagePageViewModel.ts

@@ -41,8 +41,8 @@ export default class MessagePageViewModel {
         messageViewModel.loadData();
     };
 
-    sendReaction = (messageId: string, content: ReactionSymbols): void => {
-        this.chatViewModel.chatModel.sendReaction(messageId, content);
+    sendReaction = (messageId: string, content: ReactionSymbols, isDeleting: boolean): void => {
+        this.chatViewModel.chatModel.sendReaction(messageId, content, isDeleting);
     };
 
     // view
@@ -68,11 +68,11 @@ export default class MessagePageViewModel {
         }
     };
 
-    showReaction = (reaction: ChatMessageReaction): void => {
+    handleReaction = (reaction: ChatMessageReaction): void => {
         const messageViewModel: ChatMessageViewModel | undefined =
             this.chatMessageViewModels.value.get(reaction.messageId);
         if (messageViewModel == undefined) return;
-        messageViewModel.addReaction(reaction);
+        messageViewModel.handleReaction(reaction);
     };
 
     // load
@@ -82,7 +82,7 @@ export default class MessagePageViewModel {
             this.showChatMessage(chatMessage);
         }
         for (const reaction of this.chatViewModel.chatModel.reactions) {
-            this.showReaction(reaction);
+            this.handleReaction(reaction);
         }
     };