fix deletion of reactions by using username as reaction id

dist/index.js

@@ -1261,8 +1261,11 @@
         if (!checkMatchesObjectStructure(reaction, ChatMessageReactionReference))
           return;
         const reactionPath = 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);
       };
       this.handleMessageSent = (chatMessage) => {
@@ -1492,6 +1495,7 @@
         const fileContent = FileModel2.createFileContent(v4_default(), "reaction");
         const reaction = {
           ...fileContent,
+          fileId: sender,
           messageId,
           sender,
           content,
@@ -3939,9 +3943,6 @@
 
   // src/View/Components/messageReactionButton.tsx
   function MessageReactionButton(chatMessageViewModel, content) {
-    let audioLabel;
-    let count;
-    let isActive;
     function sendReaction() {
       chatMessageViewModel.sendReaction(content, isActive.value);
     }
@@ -3951,6 +3952,9 @@
     function checkIsHighlighted(mapState) {
       return mapState.value.has(getUsername());
     }
+    let audioLabel;
+    let count;
+    let isActive;
     switch (content) {
       case "\u{1F44D}" /* ThumbsUp */: {
         audioLabel = translations.chatPage.message.thumbsUpReaction;
@@ -4013,21 +4017,9 @@
     );
   }
 
-  // src/View/Modals/chatMessageInfoModal.tsx
-  function ChatMessageInfoModal(chatMessageViewModel) {
-    return /* @__PURE__ */ createElement(
-      "div",
-      {
-        class: "modal",
-        "toggle:open": chatMessageViewModel.isPresentingInfoModal
-      },
-      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.sentBy), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.sender))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.timeSent), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.dateSent))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.channel), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.channel))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messageContent), /* @__PURE__ */ createElement(
-        "b",
-        {
-          class: "break-word",
-          "subscribe:innerText": chatMessageViewModel.body
-        }
-      )))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row gap" }, MessageReactionButton(
+  // src/View/Components/messageReactionButtonRow.tsx
+  function MessageReactionButtonRow(chatMessageViewModel) {
+    return /* @__PURE__ */ createElement("div", { class: "flex-row gap" }, MessageReactionButton(
       chatMessageViewModel,
       "\u{1F44D}" /* ThumbsUp */
     ), MessageReactionButton(
@@ -4042,7 +4034,24 @@
     ), MessageReactionButton(
       chatMessageViewModel,
       "\u2753" /* Question */
-      ))), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
+    ));
+  }
+
+  // src/View/Modals/chatMessageInfoModal.tsx
+  function ChatMessageInfoModal(chatMessageViewModel) {
+    return /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "modal",
+        "toggle:open": chatMessageViewModel.isPresentingInfoModal
+      },
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.sentBy), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.sender))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.timeSent), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.dateSent))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.channel), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.channel))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messageContent), /* @__PURE__ */ createElement(
+        "b",
+        {
+          class: "break-word",
+          "subscribe:innerText": chatMessageViewModel.body
+        }
+      )))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"))), /* @__PURE__ */ createElement("hr", null), MessageReactionButtonRow(chatMessageViewModel)), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
     );
   }
 
@@ -4081,7 +4090,7 @@
           class: "icon",
           "subscribe:innerText": statusIcon
         }
-      ), chatMessageViewModel.dateSent)), /* @__PURE__ */ createElement("div", { class: "button-container" }, /* @__PURE__ */ createElement(
+      ), chatMessageViewModel.dateSent), MessageReactionButtonRow(chatMessageViewModel)), /* @__PURE__ */ createElement("div", { class: "button-container" }, /* @__PURE__ */ createElement(
         "button",
         {
           "on:click": chatMessageViewModel.showInfoModal,

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}