From 4ec5b1b9ced50ced3ab87ba24cf74376a761cfcd Mon Sep 17 00:00:00 2001
From: Talon <talon@iamtalon.me>
Date: Sat, 7 Sep 2024 11:56:38 +0200
Subject: [PATCH] Handle message and channel deleting in frontend when syncing

---
 backend/src/config.ts      |  1 -
 frontend/src/views/main.ts | 20 +++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/backend/src/config.ts b/backend/src/config.ts
index f854ec9..143ed16 100644
--- a/backend/src/config.ts
+++ b/backend/src/config.ts
@@ -18,4 +18,3 @@ export const PORT = parseInt(process.env["PORT"]!) || 3000;
 export const USE_SSL = process.env["USE_SSL"] === "1" ? true : false;
 export const SSL_KEY = process.env["SSL_KEY"] || "";
 export const SSL_CERT = process.env["SSL_CERT"] || "";
-console.log(process.env);
\ No newline at end of file
diff --git a/frontend/src/views/main.ts b/frontend/src/views/main.ts
index 64eaa77..6655e64 100644
--- a/frontend/src/views/main.ts
+++ b/frontend/src/views/main.ts
@@ -138,6 +138,11 @@ export class MainView extends View {
 
     private async syncChannels() {
         const channels = await API.getChannels();
+        state.channelList.channels.forEach((chan) => {
+            if (!channels.find((c) => c.id === chan.id)) {
+                state.removeChannel(chan);
+            }
+        });
         channels.forEach((chan) => state.addChannel(new Channel(chan)));
         this.updateChannelList();
         if (!state.currentChannel) {
@@ -180,8 +185,21 @@ export class MainView extends View {
         const channelId = state.currentChannel.id;
         if (channelId) {
             const messages = await API.getMessages(channelId.toString());
-            // only render new list items, or list items that have changed.
+            // first, delete all local messages that are no longer on the remote using the chunk processor
             const proc = new ChunkProcessor<IMessage>(100);
+            proc.processArray(state.currentChannel.messages, (chunk: IMessage[]) => {
+                chunk.forEach((message: IMessage) => {
+                    if (!messages.find((m) => m.id === message.id)) {
+                        state.currentChannel!.removeMessage(message.id);
+                        const elem = this.messageElementMap.get(message.id);
+                        if (elem) {
+                            this.messageList.remove(elem);
+                            this.messageElementMap.delete(message.id);
+                        }
+                    }
+                });
+            });
+            // only render new list items, or list items that have changed.
             proc.processArray(messages, (chunk: IMessage[]) => {
                 chunk.forEach((message: IMessage) => {
                     // TODO: this could do with a lot of perf improvements. I'll get to it once this is an issue.