add frontend interface to send reactions

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -5,7 +5,7 @@ import {
     ChatMessageReaction,
     ChatMessageReactionReference,
     ChatMessageStatus,
-    ReactionSymbol,
+    ReactionSymbols,
 } from "../../Model/Chat/chatModel";
 
 import CoreViewModel from "../Global/coreViewModel";
@@ -31,6 +31,27 @@ export default class ChatMessageViewModel {
     reactionsDoubleAttention = new React.MapState<ChatMessageReaction>();
     reactionsQuestion = new React.MapState<ChatMessageReaction>();
 
+    reactionsThumbsUpCount = React.createProxyState(
+        [this.reactionsThumbsUp],
+        () => this.reactionsThumbsUp.value.size,
+    );
+    reactionsCheckCount = React.createProxyState(
+        [this.reactionsCheck],
+        () => this.reactionsCheck.value.size,
+    );
+    reactionsAttentionCount = React.createProxyState(
+        [this.reactionsAttention],
+        () => this.reactionsAttention.value.size,
+    );
+    reactionsDoubleAttentionCount = React.createProxyState(
+        [this.reactionsDoubleAttention],
+        () => this.reactionsDoubleAttention.value.size,
+    );
+    reactionsQuestionCount = React.createProxyState(
+        [this.reactionsQuestion],
+        () => this.reactionsQuestion.value.size,
+    );
+
     // state
     isPresentingInfoModal: React.State<boolean> = new React.State(false);
 
@@ -57,22 +78,26 @@ export default class ChatMessageViewModel {
     // reactions
     addReaction = (reaction: ChatMessageReaction): void => {
         switch (reaction.content) {
-            case "👍":
-                return this.reactionsThumbsUp.set(reaction.fileId, reaction);
-            case "✅":
-                return this.reactionsCheck.set(reaction.fileId, reaction);
-            case "❗️":
-                return this.reactionsAttention.set(reaction.fileId, reaction);
-            case "‼️":
+            case ReactionSymbols.ThumbsUp:
+                return this.reactionsThumbsUp.set(reaction.sender, reaction);
+            case ReactionSymbols.Check:
+                return this.reactionsCheck.set(reaction.sender, reaction);
+            case ReactionSymbols.Attention:
+                return this.reactionsAttention.set(reaction.sender, reaction);
+            case ReactionSymbols.DoubleAttention:
                 return this.reactionsDoubleAttention.set(
-                    reaction.fileId,
+                    reaction.sender,
                     reaction,
                 );
-            case "❓":
-                return this.reactionsQuestion.set(reaction.fileId, reaction);
+            case ReactionSymbols.Question:
+                return this.reactionsQuestion.set(reaction.sender, reaction);
         }
     };
 
+    sendReaction = (content: ReactionSymbols): void => {
+        this.messagePageViewModel.sendReaction(this.chatMessage.id, content);
+    };
+
     // load
     loadData = (): void => {
         this.channel = this.chatMessage.channel;

src/ViewModel/Pages/messagePageViewModel.ts

@@ -3,7 +3,7 @@ import * as React from "bloatless-react";
 import {
     ChatMessage,
     ChatMessageReaction,
-    ReactionSymbol,
+    ReactionSymbols,
 } from "../../Model/Chat/chatModel";
 import ChatMessageViewModel from "../Chat/chatMessageViewModel";
 import ChatViewModel from "../Chat/chatViewModel";
@@ -41,7 +41,7 @@ export default class MessagePageViewModel {
         messageViewModel.loadData();
     };
 
-    sendReaction = (messageId: string, content: ReactionSymbol): void => {
+    sendReaction = (messageId: string, content: ReactionSymbols): void => {
         this.chatViewModel.chatModel.sendReaction(messageId, content);
     };