add backend for message reactions

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -1,6 +1,12 @@
 import * as React from "bloatless-react";
 
-import { ChatMessage, ChatMessageStatus } from "../../Model/Chat/chatModel";
+import {
+    ChatMessage,
+    ChatMessageReaction,
+    ChatMessageReactionReference,
+    ChatMessageStatus,
+    ReactionSymbol,
+} from "../../Model/Chat/chatModel";
 
 import CoreViewModel from "../Global/coreViewModel";
 import MessagePageViewModel from "../Pages/messagePageViewModel";
@@ -19,6 +25,12 @@ export default class ChatMessageViewModel {
     );
     sentByUser: boolean;
 
+    reactionsThumbsUp = new React.MapState<ChatMessageReaction>();
+    reactionsCheck = new React.MapState<ChatMessageReaction>();
+    reactionsAttention = new React.MapState<ChatMessageReaction>();
+    reactionsDoubleAttention = new React.MapState<ChatMessageReaction>();
+    reactionsQuestion = new React.MapState<ChatMessageReaction>();
+
     // state
     isPresentingInfoModal: React.State<boolean> = new React.State(false);
 
@@ -42,6 +54,25 @@ export default class ChatMessageViewModel {
         this.isPresentingInfoModal.value = false;
     };
 
+    // 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 "‼️":
+                return this.reactionsDoubleAttention.set(
+                    reaction.fileId,
+                    reaction,
+                );
+            case "❓":
+                return this.reactionsQuestion.set(reaction.fileId, reaction);
+        }
+    };
+
     // load
     loadData = (): void => {
         this.channel = this.chatMessage.channel;

src/ViewModel/Chat/chatViewModel.ts

@@ -3,7 +3,10 @@ import * as React from "bloatless-react";
 import CalendarPageViewModel, {
     CALENDAR_EVENT_BOARD_ID,
 } from "../Pages/calendarPageViewModel";
-import ChatModel, { ChatMessage } from "../../Model/Chat/chatModel";
+import ChatModel, {
+    ChatMessage,
+    ChatMessageReaction,
+} from "../../Model/Chat/chatModel";
 import StorageModel, {
     StorageModelSubPath,
     filePaths,
@@ -176,6 +179,11 @@ export default class ChatViewModel {
                 this.notificationViewModel.showNotification(chatMessage);
             },
         );
+        chatModel.reactionHandlerManager.addHandler(
+            (reaction: ChatMessageReaction) => {
+                this.messagePageViewModel.showReaction(reaction);
+            },
+        );
 
         // load
         this.loadPageSelection();

src/ViewModel/Pages/messagePageViewModel.ts

@@ -1,6 +1,10 @@
 import * as React from "bloatless-react";
 
-import { ChatMessage } from "../../Model/Chat/chatModel";
+import {
+    ChatMessage,
+    ChatMessageReaction,
+    ReactionSymbol,
+} from "../../Model/Chat/chatModel";
 import ChatMessageViewModel from "../Chat/chatMessageViewModel";
 import ChatViewModel from "../Chat/chatViewModel";
 import CoreViewModel from "../Global/coreViewModel";
@@ -37,6 +41,10 @@ export default class MessagePageViewModel {
         messageViewModel.loadData();
     };
 
+    sendReaction = (messageId: string, content: ReactionSymbol): void => {
+        this.chatViewModel.chatModel.sendReaction(messageId, content);
+    };
+
     // view
     showChatMessage = (chatMessage: ChatMessage): void => {
         const chatMessageViewModel = new ChatMessageViewModel(
@@ -60,12 +68,22 @@ export default class MessagePageViewModel {
         }
     };
 
+    showReaction = (reaction: ChatMessageReaction): void => {
+        const messageViewModel: ChatMessageViewModel | undefined =
+            this.chatMessageViewModels.value.get(reaction.messageId);
+        if (messageViewModel == undefined) return;
+        messageViewModel.addReaction(reaction);
+    };
+
     // load
     loadData = (): void => {
         this.chatMessageViewModels.clear();
         for (const chatMessage of this.chatViewModel.chatModel.messages) {
             this.showChatMessage(chatMessage);
         }
+        for (const reaction of this.chatViewModel.chatModel.reactions) {
+            this.showReaction(reaction);
+        }
     };
 
     // init