Handle message updates via websockets for current channel

frontend/src/views/main.ts

@@ -7,6 +7,7 @@ import { RecordAudioDialog } from "../dialogs/record-audio";
 import { SearchDialog } from "../dialogs/search";
 import { SettingsDialog } from "../dialogs/settings";
 import { TakePhotoDialog } from "../dialogs/take-photo";
+import { MessageUpdated } from "../events/message-events";
 import { Channel } from "../model/channel";
 import { IMessage, Message } from "../model/message";
 import { UnsentMessage } from "../model/unsent-message";
@@ -52,6 +53,24 @@ export class MainView extends View {
             this.updateVisibleMessageShownTimestamps();
         }, 1000);
         setTimeout(() => this.attemptToSendUnsentMessages(), 2000);
+
+        state.events.registerHandler<MessageUpdated>("message-updated", (message) => {
+            const { data } = message;
+            if (!data) return;
+            const channel = state.currentChannel;
+            if (!channel) return;
+            const existing = channel.getMessage(parseInt(data!.id));
+            if (!existing) {
+                return;
+            } else {
+                existing.content = data.content;
+                state.save();
+                const renderedMessage = this.messageElementMap.get(existing.id);
+                if (renderedMessage) {
+                    (renderedMessage as ListItem).setText(`${existing.content}; ${this.convertIsoTimeStringToRelative(existing.createdAt)}`);
+                }
+            }
+        });
     }
 
 
@@ -166,7 +185,7 @@ export class MainView extends View {
     }
 
     public onDestroy(): void {
-        
+
     }
 
     private async syncChannels() {
@@ -257,7 +276,7 @@ export class MainView extends View {
 
     private renderMessage(message: IMessage): UINode {
         const itm = new ListItem(`${message.content}; ${this.convertIsoTimeStringToRelative(message.createdAt)}`);
-        itm.setUserData(message);
+        itm.setUserData(message.id);
         itm.onClick(() => {
             new MessageDialog(message).open();
         })
@@ -371,7 +390,7 @@ export class MainView extends View {
         if (file) {
             playWater();
             const msgContent = this.messageInput.getValue() !== "" ? this.messageInput.getValue() : "File upload";
-            this.messageInput.setValue(""); 
+            this.messageInput.setValue("");
             try {
                 const msg = await API.createMessage(state.currentChannel!.id.toString(), msgContent);
                 const id = msg.id;
@@ -430,7 +449,8 @@ export class MainView extends View {
         for (let i = lowerIndex; i < upperIndex; i++) {
             const child = this.messageList.children[i];
             if (!child) break;
-            const message = child.getUserData() as IMessage;
+            const messageId = child.getUserData() as number;
+            const message = state.currentChannel?.getMessage(messageId);
             if (message) {
                 (child as ListItem).setText(`${message.content}; ${this.convertIsoTimeStringToRelative(message.createdAt)}`);
             }