fix deletion of reactions by using username as reaction id

src/Model/Chat/chatModel.ts

@@ -112,8 +112,12 @@ export default class ChatModel {
         )
             return;
         const reactionPath: string[] = this.getReactionPath(reaction.fileId);
-        const action = reaction.isDeleting ? this.storageModel.remove : this.storageModel.writeStringifiable;
-        action(reactionPath, reaction);
+
+        if (reaction.isDeleting == true) {
+            this.storageModel.remove(reactionPath);
+        } else {
+            this.storageModel.writeStringifiable(reactionPath, reaction);
+        }
         this.reactionHandlerManager.trigger(reaction);
 
     };
@@ -213,7 +217,7 @@ export default class ChatModel {
     sendReaction = async (
         messageId: string,
         content: ReactionSymbols,
-        isDeleting: boolean,
+        isDeleting?: boolean,
     ): Promise<void> => {
         const nameAndChannel = this.getNameAndChannel();
         if (nameAndChannel == false) return;
@@ -413,6 +417,7 @@ export default class ChatModel {
         const fileContent = FileModel.createFileContent(v4(), "reaction");
         const reaction: ChatMessageReaction = {
             ...fileContent,
+            fileId: sender,
 
             messageId,
             sender,

src/View/Components/chatMessage.tsx

@@ -4,6 +4,7 @@ import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal";
 import { ChatMessageStatus } from "../../Model/Chat/chatModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { translations } from "../translations";
+import { MessageReactionButtonRow } from "./messageReactionButtonRow";
 
 export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
     const statusIcon = React.createProxyState(
@@ -43,6 +44,8 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
                         ></span>
                         {chatMessageViewModel.dateSent}
                     </span>
+
+                    {MessageReactionButtonRow(chatMessageViewModel)}
                 </div>
 
                 <div class="button-container">

src/View/Components/messageReactionButton.tsx

@@ -7,10 +7,6 @@ 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, isActive.value);
     }
@@ -24,6 +20,10 @@ 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/View/Components/messageReactionButtonRow.tsx

@@ -0,0 +1,34 @@
+import * as React from "bloatless-react";
+import { ReactionSymbols } from "../../Model/Chat/chatModel";
+import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
+import { translations } from "../translations";
+import { MessageReactionButton } from "./messageReactionButton";
+
+export function MessageReactionButtonRow(
+    chatMessageViewModel: ChatMessageViewModel,
+) {
+    return (
+        <div class="flex-row gap">
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.ThumbsUp,
+            )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.Check,
+            )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.Attention,
+            )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.DoubleAttention,
+            )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.Question,
+            )}
+        </div>
+    );
+}

src/View/Modals/chatMessageInfoModal.tsx

@@ -2,8 +2,7 @@ import * as React from "bloatless-react";
 
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { translations } from "../translations";
-import { ReactionSymbols } from "../../Model/Chat/chatModel";
-import { MessageReactionButton } from "../Components/messageReactionButton";
+import { MessageReactionButtonRow } from "../Components/messageReactionButtonRow";
 
 export function ChatMessageInfoModal(
     chatMessageViewModel: ChatMessageViewModel,
@@ -92,28 +91,7 @@ export function ChatMessageInfoModal(
 
                     <hr></hr>
 
-                    <div class="flex-row gap">
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.ThumbsUp,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.Check,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.Attention,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.DoubleAttention,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.Question,
-                        )}
-                    </div>
+                    {MessageReactionButtonRow(chatMessageViewModel)}
                 </main>
                 <button on:click={chatMessageViewModel.hideInfoModal}>
                     {translations.general.closeButton}