From 36a67a2ca18762da17c8800bfd08bcb1cf231437 Mon Sep 17 00:00:00 2001
From: Talon <talon@iamtalon.me>
Date: Fri, 30 Aug 2024 16:06:46 +0200
Subject: [PATCH] Move onClick handlers to separate functions and add PORT env
 variable for backend

---
 backend/src/config.ts      |   3 +-
 backend/src/server.ts      |   4 +-
 frontend/src/views/main.ts | 144 ++++++++++++++++++++-----------------
 3 files changed, 82 insertions(+), 69 deletions(-)

diff --git a/backend/src/config.ts b/backend/src/config.ts
index 7c840ab..844b733 100644
--- a/backend/src/config.ts
+++ b/backend/src/config.ts
@@ -14,5 +14,4 @@ export const OPENAI_API_KEY= process.env["OPENAI_API_KEY"] || "";
 export const OPENAI_MODEL = process.env["OPENAI_MODEL"] || "gpt-4o";
 export const OLLAMA_URL= process.env["OLLAMA_URL"] || "http://localhost:11434";
 export const OLLAMA_MODEL= process.env["OLLAMA_MODEL"] || "moondream";
-
-// list all files in /usr/src/app/data/
+export const PORT = parseInt(process.env["PORT"]!) || 3000;
\ No newline at end of file
diff --git a/backend/src/server.ts b/backend/src/server.ts
index 203192d..eea2bc5 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -24,6 +24,6 @@ wss.on('connection', (ws: WebSocket) => {
   });
 });
 
-server.listen(3000, () => {
-  logger.info(`Server is running on http://localhost:${3000}`);
+server.listen(PORT, () => {
+  logger.info(`Server is running on http://localhost:${PORT}`);
 });
\ No newline at end of file
diff --git a/frontend/src/views/main.ts b/frontend/src/views/main.ts
index de2d382..0b22a71 100644
--- a/frontend/src/views/main.ts
+++ b/frontend/src/views/main.ts
@@ -81,31 +81,15 @@ export class MainView extends View {
     public onCreate(): void {
         this.settingsButton = new Button("Settings");
         this.settingsButton.setPosition(0, 0, 10, 10);
-        this.settingsButton.onClick(() => {
-            new SettingsDialog().open();
-        });
+        this.settingsButton.onClick(() => this.openSettingsDialog());
         this.channelSwitcher = new Dropdown("Channel", []);
         this.channelSwitcher.setPosition(30, 10, 30, 10);
         this.channelInfoButton = new Button("Channel info");
         this.channelInfoButton.setPosition(60, 10, 30, 10);
         this.searchButton = new Button("Search");
         this.searchButton.setPosition(90, 10, 10, 10);
-        this.searchButton.onClick(async () => {
-            const searchDialog = new SearchDialog();
-            const res = await searchDialog.open();
-            if (res) {
-                if (res.channelId && res.messageId) {
-                    if (state.currentChannel?.id !== res.channelId) {
-                        this.switchChannel(res.channelId.toString());
-                        this.renderInitialMessageList();
-                    }
-                    const message = state.currentChannel!.getMessage(res.messageId);
-                    if (message) {
-                        this.messageElementMap.get(message.id)?.focus();
-                    }
-                }
-            }
-        })
+        this.searchButton.onClick(async () => this.openSearchDialog());
+
         this.fileInput = new FileInput("Upload file");
         this.fileInput.setPosition(0, 90, 15, 10);
         this.imageInput = new Button("Image");
@@ -127,22 +111,8 @@ export class MainView extends View {
         this.window.add(this.fileInput);
         this.window.add(this.imageInput);
         this.window.add(this.voiceMessageInput);
-        this.channelSwitcher.getElement().addEventListener("change", (e) => {
-            const target = e.target as HTMLSelectElement;
-            if (target.value === "__new__") {
-                this.createNewChannel();
-            } else {
-                this.switchChannel(target.value);
-                this.renderInitialMessageList();
-                this.syncMessages();
-            }
-        });
-        this.voiceMessageInput.onClick(async () => {
-            const blob = await new RecordAudioDialog().open();
-            if (blob) {
-                this.uploadVoiceMessage(blob);
-            }
-        })
+        this.channelSwitcher.getElement().addEventListener("change", (e) => this.handleChannelSwitcher(e));
+        this.voiceMessageInput.onClick(async () => this.handleVoiceMessageButton());
 
         this.messageInput.onKeyDown((key: string, alt: boolean | undefined, shift: boolean | undefined, ctrl: boolean | undefined) => {
             if (key === "Enter") {
@@ -152,36 +122,8 @@ export class MainView extends View {
                 }
             }
         });
-        this.channelInfoButton.onClick(() => {
-            if (this.channelSwitcher.getSelectedValue() === "__new__") {
-                this.createNewChannel();
-                return;
-            }
-            const d = new ChannelDialog(state.currentChannel!);
-            d.open().then((chan) => {
-                if (!chan) {
-                    state.removeChannel(state.currentChannel!);
-                    state.currentChannel = null;
-                    this.updateChannelList();
-                    state.save();
-                    if (state.channelList.channels.length > 0) {
-                        return this.switchChannel(state.channelList.channels[0].id.toString());
-                    } else {
-                        return this.createNewChannel();
-                    }
-                }
-                if (chan.messages.length < 1) {
-                    this.renderInitialMessageList(true);
-                    this.syncMessages();
-                }
-                state.save();
-                this.updateChannelList();
-            });
-        })
-        this.imageInput.onClick(async () => {
-            const photo = await new TakePhotoDialog().open();
-            this.uploadImage(photo);
-        });
+        this.channelInfoButton.onClick(() => this.handleChannelInfoButton());
+        this.imageInput.onClick(async () => this.handleImageButton());
     }
 
     public onDestroy(): void {
@@ -550,4 +492,76 @@ export class MainView extends View {
         this.messageList.add(elem);
         this.messageElementMap.set(message.id, elem);
     }
+
+    private async openSettingsDialog() {
+        const d = new SettingsDialog();
+        d.open();
+    }
+
+    private async openSearchDialog() {
+        const searchDialog = new SearchDialog();
+        const res = await searchDialog.open();
+        if (res) {
+            if (res.channelId && res.messageId) {
+                if (state.currentChannel?.id !== res.channelId) {
+                    this.switchChannel(res.channelId.toString());
+                    this.renderInitialMessageList();
+                }
+                const message = state.currentChannel!.getMessage(res.messageId);
+                if (message) {
+                    this.messageElementMap.get(message.id)?.focus();
+                }
+            }
+        }
+    }
+
+    private handleChannelSwitcher(e: Event) {
+        const target = e.target as HTMLSelectElement;
+        if (target.value === "__new__") {
+            this.createNewChannel();
+        } else {
+            this.switchChannel(target.value);
+            this.renderInitialMessageList();
+            this.syncMessages();
+        }
+    }
+
+    private async handleVoiceMessageButton() {
+        const blob = await new RecordAudioDialog().open();
+        if (blob) {
+            this.uploadVoiceMessage(blob);
+        }
+    }
+
+    private async handleChannelInfoButton() {
+        if (this.channelSwitcher.getSelectedValue() === "__new__") {
+            this.createNewChannel();
+            return;
+        }
+        const d = new ChannelDialog(state.currentChannel!);
+        d.open().then((chan) => {
+            if (!chan) {
+                state.removeChannel(state.currentChannel!);
+                state.currentChannel = null;
+                this.updateChannelList();
+                state.save();
+                if (state.channelList.channels.length > 0) {
+                    return this.switchChannel(state.channelList.channels[0].id.toString());
+                } else {
+                    return this.createNewChannel();
+                }
+            }
+            if (chan.messages.length < 1) {
+                this.renderInitialMessageList(true);
+                this.syncMessages();
+            }
+            state.save();
+            this.updateChannelList();
+        });       
+    }
+
+    private async handleImageButton() {
+        const photo = await new TakePhotoDialog().open();
+        this.uploadImage(photo);
+    }
 }
\ No newline at end of file