From b902a1fc0429d6c3ec447d7e3d9a2107441d6431 Mon Sep 17 00:00:00 2001
From: hippoz <paperplanelive@gmail.com>
Date: Mon, 22 Mar 2021 19:39:10 +0200
Subject: [PATCH] frontend: messages

---
 brainlet/app/gatewaytest/app.js    | 38 +++++++++++++++++++++++-------
 brainlet/app/gatewaytest/style.css |  2 ++
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/brainlet/app/gatewaytest/app.js b/brainlet/app/gatewaytest/app.js
index ef2d8f5..ae83dbd 100644
--- a/brainlet/app/gatewaytest/app.js
+++ b/brainlet/app/gatewaytest/app.js
@@ -119,14 +119,30 @@ class AppState {
     constructor(token) {
         this.connection = new GatewayConnection(token);
         this.tc = new Tricarbon();
+
+        this.elements = {
+            messagesContainer: "#messages",
+            messageInput: "#message-input",
+            channels: "#channels",
+            topBar: "#top-bar"
+        };
+
         this.tcEvents = this.tc.useEvents();
+        this.messageObserver = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === "childList") {
+                    const messages = this.tc.A(this.elements.messagesContainer);
+                    messages.scrollTop = messages.scrollHeight;
+                }
+            }
+        });
 
         this.messageStore = {};
         this.selectedChannelId = null;
 
         this.Sidebar = (channels) => (ev) => `
             ${Object.keys(channels).map(k => `
-                <button class="sidebar-button" onclick="${ev(() => this.navigateToChannel(channels[k]))}">${channels[k].title}</button>
+                <button class="sidebar-button" id="${channels[k]._id}" onclick="${ev(() => this.navigateToChannel(channels[k]))}">${channels[k].title}</button>
             `).join("")}
         `;
 
@@ -145,13 +161,14 @@ class AppState {
 
         this.connection.onopen = (sessionInfo) => {
             this.renderSidebar(sessionInfo.channels);
-            this.tc.A("#message-input").addEventListener("keydown", (e) => {
+            this.messageObserver.observe(this.tc.A(this.elements.messagesContainer), { childList: true });
+            this.tc.A(this.elements.messageInput).addEventListener("keydown", (e) => {
                 if (e.code === "Enter") {
                     if (!this.selectedChannelId) return;
-                    const messageContent = this.tc.A("#message-input").value;
+                    const messageContent = this.tc.A(this.elements.messageInput).value;
                     if (!messageContent) return;
                     this.connection.sendMessage(messageContent, this.selectedChannelId);
-                    this.tc.A("#message-input").value = "";
+                    this.tc.A(this.elements.messageInput).value = "";
                 }
             });
         };
@@ -165,7 +182,7 @@ AppState.prototype.appendMessage = function(message) {
     if (!this.messageStore[message.channel._id]) this.messageStore[message.channel._id] = [];
     this.messageStore[message.channel._id].push({ content: message.content, author: message.author });
     if (this.selectedChannelId === message.channel._id) {
-        this.tc.push(this.ChannelMessages(this.messageStore[message.channel._id] || []), "#messages", false, this.tcEvents("#messages"));
+        this.tc.push(this.ChannelMessages(this.messageStore[message.channel._id] || []), this.elements.messagesContainer, false, this.tcEvents(this.elements.messagesContainer));
     }
 };
 
@@ -173,13 +190,16 @@ AppState.prototype.navigateToChannel = function(channel) {
     console.log("app: navigating to channel", channel);
     if (this.selectedChannelId !== channel._id) {
         this.selectedChannelId = channel._id;
-        this.tc.push(this.ChannelTopBar(channel), "#top-bar", false);
-        this.tc.push(this.ChannelMessages(this.messageStore[channel._id] || []), "#messages", false, this.tcEvents("#messages"));
+        this.tc.push(this.ChannelTopBar(channel), this.elements.topBar, false);
+        this.tc.push(this.ChannelMessages(this.messageStore[channel._id] || []), this.elements.messagesContainer, false, this.tcEvents(this.elements.messagesContainer));
     }
 };
 
 AppState.prototype.renderSidebar = function(channels) {
-    this.tc.push(this.Sidebar(channels), "#channels", false, this.tcEvents("#channels"));
+    this.tc.push(this.Sidebar(channels), this.elements.channels, false, this.tcEvents(this.elements.channels));
 };
 
-const app = new AppState(localStorage.getItem("token"));
\ No newline at end of file
+let app;
+document.addEventListener("DOMContentLoaded", () => {
+    app = new AppState(localStorage.getItem("token"));
+});
\ No newline at end of file
diff --git a/brainlet/app/gatewaytest/style.css b/brainlet/app/gatewaytest/style.css
index 98407de..e7b8c9d 100644
--- a/brainlet/app/gatewaytest/style.css
+++ b/brainlet/app/gatewaytest/style.css
@@ -35,6 +35,7 @@ main {
     display: flex;
     flex-direction: column;
     flex: 10;
+    height: 100%;
 }
 
 .sidebar {
@@ -97,6 +98,7 @@ main {
     flex: 1;
     flex-wrap: wrap;
     overflow-y: auto;
+    height: 100%;
 
     background-color: var(--bg);
 }