Focus fixes, message deleting and channel deleting when sync

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);

frontend/src/api.ts

@@ -54,6 +54,7 @@ export const API = {
 
     async getMessages(channelId: string) {
         const response = await API.request("GET", `channels/${channelId}/messages`);
+        console.log(response)
         const json = await response.json();
         return json.messages as IMessage[];
     },

frontend/src/ui/list.ts

@@ -50,7 +50,7 @@ export class List extends UINode {
 
     public _onFocus() {
         super._onFocus();
-        this.children[this.focused].focus();
+        this.focusSelectedMessage();
         return this;
     }
 
@@ -74,14 +74,14 @@ export class List extends UINode {
                 this.children[this.focused].setTabbable(false);
                 this.focused = Math.max(0, this.focused - 1);
                 this.children[this.focused].setTabbable(true);
-                this.children[this.focused].focus();
+                this.focusSelectedMessage();
                 return true;
                 break;
             case "ArrowDown":
                 this.children[this.focused].setTabbable(false);
                 this.focused = Math.min(this.children.length - 1, this.focused + 1);
                 this.children[this.focused].setTabbable(true);
-                this.children[this.focused].focus();
+                this.focusSelectedMessage();
                 return true;
                 break;
             case "Enter":
@@ -92,14 +92,14 @@ export class List extends UINode {
                 this.children[this.focused].setTabbable(false);
                 this.focused = 0;
                 this.children[this.focused].setTabbable(true);
-                this.children[this.focused].focus();
+                this.focusSelectedMessage();
                 return true;
                 break;
             case "End":
                 this.children[this.focused].setTabbable(false);
                 this.focused = this.children.length - 1;
                 this.children[this.focused].setTabbable(true);
-                this.children[this.focused].focus();
+                this.focusSelectedMessage();
                 return true;
                 break;
             default:
@@ -168,4 +168,8 @@ export class List extends UINode {
         this.children[this.focused].setTabbable(true);
         return this;
     }
+
+    public focusSelectedMessage() {
+        this.children[this.focused].focus()
+    }
 }

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.
@@ -228,9 +246,14 @@ export class MainView extends View {
         itm.onClick(() => {
             this.openMessageDialog(message);
         })
-        itm.onKeyDown((key: string, alt: boolean | undefined, shift: boolean | undefined, ctrl: boolean | undefined) => {
+        itm.onKeyDown(async(key: string, alt: boolean | undefined, shift: boolean | undefined, ctrl: boolean | undefined) => {
             if (key === "Delete") {
-                this.removeMessage(message.id);
+                await this.removeMessage(message.id);
+                if (this.messageList.children.length === 0) {
+                    this.messageInput.focus()
+                } else {
+                    this.messageList.focusSelectedMessage()
+                }
             }
         });
         return itm;