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;
+        if (reaction.isDeleting == true) {
-        action(reactionPath, reaction);
+          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,6 +4017,26 @@
     );
   }
 
+  // src/View/Components/messageReactionButtonRow.tsx
+  function MessageReactionButtonRow(chatMessageViewModel) {
+    return /* @__PURE__ */ createElement("div", { class: "flex-row gap" }, MessageReactionButton(
+      chatMessageViewModel,
+      "\u{1F44D}" /* ThumbsUp */
+    ), MessageReactionButton(
+      chatMessageViewModel,
+      "\u2705" /* Check */
+    ), MessageReactionButton(
+      chatMessageViewModel,
+      "\u2757\uFE0F" /* Attention */
+    ), MessageReactionButton(
+      chatMessageViewModel,
+      "\u203C\uFE0F" /* DoubleAttention */
+    ), MessageReactionButton(
+      chatMessageViewModel,
+      "\u2753" /* Question */
+    ));
+  }
+
   // src/View/Modals/chatMessageInfoModal.tsx
   function ChatMessageInfoModal(chatMessageViewModel) {
     return /* @__PURE__ */ createElement(
@@ -4027,22 +4051,7 @@
           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(
+      )))), /* @__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")))
-        chatMessageViewModel,
-        "\u{1F44D}" /* ThumbsUp */
-      ), MessageReactionButton(
-        chatMessageViewModel,
-        "\u2705" /* Check */
-      ), MessageReactionButton(
-        chatMessageViewModel,
-        "\u2757\uFE0F" /* Attention */
-      ), MessageReactionButton(
-        chatMessageViewModel,
-        "\u203C\uFE0F" /* DoubleAttention */
-      ), MessageReactionButton(
-        chatMessageViewModel,
-        "\u2753" /* Question */
-      ))), /* @__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 { MessageReactionButtonRow } from "../Components/messageReactionButtonRow";
-import { MessageReactionButton } from "../Components/messageReactionButton";
 
 export function ChatMessageInfoModal(
     chatMessageViewModel: ChatMessageViewModel,
@@ -92,28 +91,7 @@ export function ChatMessageInfoModal(
 
                     <hr></hr>
 
-                    <div class="flex-row gap">
+                    {MessageReactionButtonRow(chatMessageViewModel)}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.ThumbsUp,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.Check,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.Attention,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.DoubleAttention,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.Question,
-                        )}
-                    </div>
                 </main>
                 <button on:click={chatMessageViewModel.hideInfoModal}>
                     {translations.general.closeButton}