fix outbox, add indicator for message status

src/Model/chatMessageViewModel.ts

@@ -2,7 +2,7 @@
 
 import * as React from "bloatless-react";
 
-import { ChatMessage, ChatModel } from "./chatModel";
+import { ChatMessage, ChatMessageStatus, ChatModel } from "./chatModel";
 
 import ChatViewModel from "../ViewModel/chatViewModel";
 
@@ -15,6 +15,9 @@ export default class ChatMessageViewModel {
   sender: string;
   dateSent: string;
   body: React.State<string> = new React.State("");
+  status: React.State<ChatMessageStatus | any> = new React.State<
+    ChatMessageStatus | undefined
+  >(undefined);
   sentByUser: boolean;
 
   // methods
@@ -34,6 +37,7 @@ export default class ChatMessageViewModel {
     this.sender = this.chatMessage.sender;
     this.dateSent = new Date(this.chatMessage.dateSent).toLocaleString();
     this.body.value = this.chatMessage.body;
+    this.status.value = this.chatMessage.status;
   };
 
   // init

src/Model/chatModel.ts

@@ -7,7 +7,6 @@ import { decryptString, encryptString } from "./Utility/crypto";
 import ChatListModel from "./chatListModel";
 import { Color } from "../ViewModel/colors";
 import ConnectionModel from "./connectionModel";
-import { Message } from "udn-frontend";
 import SettingsModel from "./settingsModel";
 import { checkIsValidObject } from "./Utility/typeSafety";
 import { v4 } from "uuid";
@@ -89,7 +88,8 @@ export class ChatModel {
     this.storageModel.store(this.colorPath, this.color);
   };
 
-  addMessage = (chatMessage: ChatMessage): void => {
+  addMessage = async (chatMessage: ChatMessage): Promise<void> => {
+    await this.decryptMessage(chatMessage);
     const messagePath: string[] = this.getMessagePath(chatMessage.id);
     this.storageModel.storeStringifiable(messagePath, chatMessage);
     this.chatMessageHandler(chatMessage);
@@ -187,15 +187,22 @@ export class ChatModel {
       body
     );
 
+    this.addMessage(chatMessage);
     this.connectionModel.sendMessageOrStore(chatMessage);
     return true;
   };
 
-  handleMessage = async (body: string): Promise<void> => {
+  handleMessage = (body: string): void => {
     const chatMessage: ChatMessage | null = ChatModel.parseMessage(body);
     if (chatMessage == null) return;
 
-    await this.decryptMessage(chatMessage);
+    chatMessage.status = ChatMessageStatus.Received;
+    this.addMessage(chatMessage);
+  };
+
+  handleMessageSent = (chatMessage: ChatMessage): void => {
+    chatMessage.status = ChatMessageStatus.Sent;
+    this.addMessage(chatMessage);
   };
 
   decryptMessage = async (chatMessage: ChatMessage): Promise<void> => {
@@ -204,7 +211,6 @@ export class ChatModel {
       this.info.encryptionKey
     );
     chatMessage.body = decryptedBody;
-    this.addMessage(chatMessage);
   };
 
   setMessageHandler = (handler: (chatMessage: ChatMessage) => void): void => {
@@ -232,6 +238,8 @@ export class ChatModel {
     this.restoreInfo();
     this.restoreColor();
     this.subscribe();
+
+    connectionModel.setMessageSentHandler(this.handleMessageSent);
   }
 
   // utility
@@ -258,6 +266,8 @@ export class ChatModel {
       sender,
       body,
       dateSent: createTimestamp(),
+
+      status: ChatMessageStatus.Outbox,
     };
   };
 
@@ -281,6 +291,12 @@ export interface ChatInfo {
   hasUnreadMessages: boolean;
 }
 
+export enum ChatMessageStatus {
+  Outbox = "outbox",
+  Sent = "sent",
+  Received = "received",
+}
+
 export interface ChatMessage {
   dataVersion: "v2";
 
@@ -291,6 +307,8 @@ export interface ChatMessage {
   body: string;
   dateSent: string;
 
+  status?: ChatMessageStatus;
+
   stringifiedObject?: string;
 }
 

src/Model/connectionModel.ts

@@ -22,6 +22,7 @@ export default class ConnectionModel {
 
   connectionChangeHandler: () => void = () => {};
   messageHandler: (data: Message) => void = () => {};
+  messageSentHandler: (chatMessage: ChatMessage) => void = () => {};
 
   channelsToSubscribe: Set<string> = new Set();
 
@@ -62,7 +63,7 @@ export default class ConnectionModel {
 
   sendSubscriptionRequest = (): void => {
     if (this.isConnected == false) return;
-    
+
     for (const channel of this.channelsToSubscribe) {
       this.udn.subscribe(channel);
     }
@@ -102,7 +103,7 @@ export default class ConnectionModel {
     const messages: ChatMessage[] = this.getOutboxMessags();
 
     for (const message of messages) {
-      const isSent = this.tryToSendMessage(message);
+      const isSent: boolean = this.tryToSendMessage(message);
       if (isSent == false) return;
 
       this.removeFromOutbox(message);
@@ -119,7 +120,12 @@ export default class ConnectionModel {
 
   tryToSendMessage = (chatMessage: ChatMessage): boolean => {
     const stringifiedBody: string = stringify(chatMessage);
-    return this.udn.sendMessage(chatMessage.channel, stringifiedBody);
+    const isSent: boolean = this.udn.sendMessage(
+      chatMessage.channel,
+      stringifiedBody
+    );
+    if (isSent) this.messageSentHandler(chatMessage);
+    return isSent;
   };
 
   // storage
@@ -158,6 +164,12 @@ export default class ConnectionModel {
     this.messageHandler = handler;
   };
 
+  setMessageSentHandler = (
+    handler: (chatMessage: ChatMessage) => void
+  ): void => {
+    this.messageSentHandler = handler;
+  };
+
   // setup
   constructor(storageModel: StorageModel) {
     // create frontend

src/View/ChatPages/messagePage.css

@@ -118,11 +118,22 @@
 }
 
 .message-bubble .main .timestamp,
+.message-bubble .main .timestamp .icon,
 .message-bubble .main .sender-name {
   font-size: 0.8rem;
   opacity: 0.6;
 }
 
+.message-bubble .main .timestamp {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-between-tiles);
+}
+
+.message-bubble .main .timestamp .icon {
+  display: none;
+}
+
 .message-bubble .main .sender-name {
   font-weight: bold;
 }
@@ -139,10 +150,15 @@
   align-items: flex-end;
 }
 
-.message-bubble[sentbyuser] .main {
+.message-bubble[sentbyuser] .main,
+.message-bubble[sentbyuser] .main .timestamp {
   flex-direction: row-reverse;
 }
 
+.message-bubble[sentbyuser] .main .timestamp .icon {
+  display: flex;
+}
+
 .message-bubble[sentbyuser] .main span {
   text-align: right;
-}
+}

src/View/Components/chatMessage.tsx

@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 
 import { ChatMessageInfoModal } from "./chatMessageInfoModal";
+import { ChatMessageStatus } from "../../Model/chatModel";
 import ChatMessageViewModel from "../../Model/chatMessageViewModel";
 import { translations } from "../translations";
 
@@ -10,6 +11,22 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
     isInfoModalOpen.value = true;
   }
 
+  const statusIcon = React.createProxyState(
+    [chatMessageViewModel.status],
+    () => {
+      switch (chatMessageViewModel.status.value) {
+        case ChatMessageStatus.Outbox:
+          return "hourglass_top";
+        case ChatMessageStatus.Sent:
+          return "check";
+        case ChatMessageStatus.Received:
+          return "done_all";
+        default:
+          return "warning";
+      }
+    }
+  );
+
   return (
     <div
       class="message-bubble"
@@ -25,6 +42,7 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
             subscribe:innerText={chatMessageViewModel.body}
           ></span>
           <span class="timestamp ellipsis">
+            <span class="icon" subscribe:innerText={statusIcon}></span>
             {chatMessageViewModel.dateSent}
           </span>
         </div>

src/ViewModel/chatViewModel.ts

@@ -63,6 +63,7 @@ export default class ChatViewModel {
   // view
   open = (): void => {
     this.chatListViewModel.openChat(this);
+    this.restoreMessages();
   };
 
   close = (): void => {
@@ -81,6 +82,7 @@ export default class ChatViewModel {
       this.chatMessageViewModels.value.get(chatMessage.id);
     if (existingChatMessageViewModel != undefined) {
       existingChatMessageViewModel.body.value = chatMessage.body;
+      existingChatMessageViewModel.status.value = chatMessage.status;
     } else {
       this.chatMessageViewModels.set(chatMessage.id, chatMessageModel);
     }
@@ -131,6 +133,8 @@ export default class ChatViewModel {
 
   // messaging
   sendMessage = (): void => {
+    if (this.cannotSendMessage.value == true) return;
+    
     this.sendMessageFromBody(this.composingMessage.value);
     this.composingMessage.value = "";
   };
@@ -142,7 +146,9 @@ export default class ChatViewModel {
   decryptMessage = async (
     messageViewModel: ChatMessageViewModel
   ): Promise<void> => {
-    await this.chatModel.decryptMessage(messageViewModel.chatMessage);
+    const chatMessage: ChatMessage = messageViewModel.chatMessage;
+    await this.chatModel.decryptMessage(chatMessage);
+    this.chatModel.addMessage(chatMessage);
     messageViewModel.loadData();
   };
 
@@ -168,6 +174,12 @@ export default class ChatViewModel {
     }
   };
 
+  restoreMessages = (): void => {
+    for (const chatMessage of this.chatModel.messages) {
+      this.addChatMessage(chatMessage);
+    }
+  }
+
   // init
   constructor(
     chatModel: ChatModel,
@@ -202,10 +214,6 @@ export default class ChatViewModel {
     this.restorePageSelection();
     this.updateIndex();
 
-    for (const chatMessage of chatModel.messages) {
-      this.addChatMessage(chatMessage);
-    }
-
     // guards
     this.cannotSendMessage = React.createProxyState(
       [this.settingsViewModel.username, this.composingMessage],