add capability to remove reactions

src/Model/Chat/chatModel.ts

@@ -111,7 +111,11 @@ export default class ChatModel {
             !checkMatchesObjectStructure(reaction, ChatMessageReactionReference)
         )
             return;
-        this.addReaction(reaction);
+        const reactionPath: string[] = this.getReactionPath(reaction.fileId);
+        const action = reaction.isDeleting ? this.storageModel.remove : this.storageModel.writeStringifiable;
+        action(reactionPath, reaction);
+        this.reactionHandlerManager.trigger(reaction);
+
     };
 
     handleMessageSent = (chatMessage: ChatMessage): void => {
@@ -158,12 +162,6 @@ export default class ChatModel {
         );
     };
 
-    addReaction = async (reaction: ChatMessageReaction): Promise<void> => {
-        const reactionPath: string[] = this.getReactionPath(reaction.fileId);
-        this.storageModel.writeStringifiable(reactionPath, reaction);
-        this.reactionHandlerManager.trigger(reaction);
-    };
-
     getNameAndChannel = (): [string, string] | false => {
         const senderName = this.settingsModel.username;
         if (senderName == "") return false;
@@ -215,6 +213,7 @@ export default class ChatModel {
     sendReaction = async (
         messageId: string,
         content: ReactionSymbols,
+        isDeleting: boolean,
     ): Promise<void> => {
         const nameAndChannel = this.getNameAndChannel();
         if (nameAndChannel == false) return;
@@ -224,9 +223,10 @@ export default class ChatModel {
             messageId,
             senderName,
             content,
+            isDeleting,
         );
         this.sendMessage("", reaction);
-        this.addReaction(reaction);
+        this.handleReaction(reaction);
     };
 
     subscribe = (): void => {
@@ -408,6 +408,7 @@ export default class ChatModel {
         messageId: string,
         sender: string,
         content: ReactionSymbols,
+        isDeleting: boolean,
     ): ChatMessageReaction => {
         const fileContent = FileModel.createFileContent(v4(), "reaction");
         const reaction: ChatMessageReaction = {
@@ -416,6 +417,7 @@ export default class ChatModel {
             messageId,
             sender,
             content,
+            isDeleting,
         };
         return reaction;
     };
@@ -463,6 +465,7 @@ export interface ChatMessageReaction
     messageId: string;
     sender: string;
     content: ReactionSymbols | string;
+    isDeleting: boolean;
 }
 
 // references
@@ -502,4 +505,6 @@ export const ChatMessageReactionReference: ChatMessageReaction = {
     messageId: "",
     sender: "",
     content: "",
+
+    isDeleting: false,
 };

src/View/Components/messageReactionButton.tsx

@@ -7,8 +7,12 @@ export function MessageReactionButton(
     chatMessageViewModel: ChatMessageViewModel,
     content: ReactionSymbols,
 ) {
+    let audioLabel: string;
+    let count: React.State<number>;
+    let isActive: React.State<boolean>;
+
     function sendReaction() {
-        chatMessageViewModel.sendReaction(content);
+        chatMessageViewModel.sendReaction(content, isActive.value);
     }
 
     function getUsername(): string {
@@ -20,10 +24,6 @@ export function MessageReactionButton(
         return mapState.value.has(getUsername());
     }
 
-    let audioLabel: string;
-    let count: React.State<number>;
-    let isActive: React.State<boolean>;
-
     switch (content) {
         case ReactionSymbols.ThumbsUp: {
             audioLabel = translations.chatPage.message.thumbsUpReaction;

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);
         }
     };