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