frontend: add loading screen for initially loading the js and connecting to the gateway

frontend+backend: fix gateway-updated channel order
frontend: link up channel sidebar with gateway and fix channel button layout issue
2022-04-17 20:23:20 +03:00 · 2022-04-17 17:56:03 +03:00 · 2022-04-17 04:08:40 +03:00
12 changed files with 263 additions and 60 deletions
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@ -39,6 +39,16 @@ body {
 	line-height: 1.75;
 }

+.pre--loading-screen {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+	background-color: var(--background-color-1);
+}
+
 .h1 {
 	font-size: 2.488rem;
 }
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -13,5 +13,6 @@
 </head>

 <body>
+	<div class="pre--loading-screen" id="pre--loading-screen">heating up the crt...</div>
 </body>
 </html>
--- a/frontend/src/components/App.svelte
+++ b/frontend/src/components/App.svelte
@ -1,6 +1,6 @@
 <script>
-import ChannelView from "./Main.svelte";
+import Main from "./pages/main/Main.svelte";

 </script>

-<ChannelView />
+<Main />
--- a/frontend/src/components/Main.svelte
+++ b/frontend/src/components/Main.svelte
@ -1,19 +0,0 @@
-<script>
-import ChannelView from "./ChannelView.svelte";
-import Sidebar from "./Sidebar.svelte";
-
-</script>
-<style>
-    .flex-container {
-        width: 100vw;
-        height: 100vh;
-        display: flex;
-        flex-direction: row;
-    }    
-</style>
-
-
-<div class="flex-container">
-    <Sidebar />
-    <ChannelView />
-</div>
--- a/frontend/src/components/pages/main/ChannelView.svelte
+++ b/frontend/src/components/pages/main/ChannelView.svelte
@ -1,5 +1,7 @@
 <script>
    import { HashIcon } from "svelte-feather-icons";
+
+    export let channel;
 </script>

 <style>
@ -38,7 +40,7 @@
    }

    .message-input {
-        height: 3.4em;
+        height: 3em;
        width: 100%;
        background-color : var(--background-color-2);
        border: none;
@ -51,7 +53,7 @@
 <div class="main-container">
    <div class="top-bar">
        <HashIcon />
-        <span class="h5 channel-heading">channel name</span>
+        <span class="h5 channel-heading">{ channel.name }</span>
    </div>
    <div class="messages-container">

--- a/frontend/src/components/pages/main/Main.svelte
+++ b/frontend/src/components/pages/main/Main.svelte
@ -0,0 +1,35 @@
+<script>
+    import { gatewayStatus } from "../../../stores";
+    import ChannelView from "./ChannelView.svelte";
+    import Sidebar from "./Sidebar.svelte";
+</script>
+
+<style>
+    .flex-container {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .loading-screen {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        background-color: var(--background-color-1);
+    }
+</style>
+
+{#if $gatewayStatus.ready}
+    <div class="flex-container">
+        <Sidebar />
+        <ChannelView channel={{ name: "channel name" }} />
+    </div>
+{:else}
+    <div class="loading-screen">
+        connecting...
+    </div>
+{/if}
--- a/frontend/src/components/pages/main/Sidebar.svelte
+++ b/frontend/src/components/pages/main/Sidebar.svelte
@ -1,11 +1,24 @@
 <script>
    import { HashIcon } from "svelte-feather-icons";
+    import { channels } from "../../../stores";
 </script>

+<div class="sidebar">
+    {#each $channels as channel (channel.id)}
+        <button class="sidebar-button" >
+            <div>
+                <HashIcon />
+            </div>
+            <span>{ channel.name }</span>
+        </button>
+    {/each}
+</div>
+
 <style>
    .sidebar {
        height: 100%;
        width: 255px;
+        max-width: 255px;
        padding: var(--space-sm);
        background-color: var(--background-color-1);
    }
@ -13,39 +26,36 @@
    .sidebar-button {
        display: flex;
        align-items: center;
-        justify-content: center;
+        justify-content: left;
        border: none;
        background-color: var(--background-color-1);
        padding: var(--space-sm);
        margin-bottom: var(--space-xxs);
        color: currentColor;
        font: inherit;
-        width: 100%;
        border-radius: var(--radius-md);
-        vertical-align: middle;
+        width: 100%;
+        height: 3.4em;
+        text-align: center;
    }

    .sidebar-button span {
        margin-left: var(--space-xxs);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .sidebar-button div {
+        display: inline;
+        flex-shrink: 0;
+
+        /* TODO: HACK! */
+        width: 24px;
+        height: 24px;
    }

    .sidebar-button:hover {
        background-color: var(--background-color-2);
    }
 </style>
-
-
-<div class="sidebar">
-    <button class="sidebar-button">
-        <HashIcon />
-        <span>channel name</span>
-    </button>
-    <button class="sidebar-button">
-        <HashIcon />
-        <span>channel name</span>
-    </button>
-    <button class="sidebar-button">
-        <HashIcon />
-        <span>channel name</span>
-    </button>
-</div>
--- a/frontend/src/gateway.js
+++ b/frontend/src/gateway.js
@ -15,15 +15,26 @@ export const GatewayPayloadType = {
    MessageDelete: 122,
 }

+export const GatewayEventType = {
+    ...GatewayPayloadType,
+
+    Open: -5,
+    Close: -4
+}
+
 export default {
    ws: null,
    authenticated: false,
+    open: false,
    heartbeatInterval: null,
    user: null,
    channels: null,
    reconnectDelay: 400,
    reconnectTimeout: null,
+    handlers: new Map(),
    init() {
+        window.__WAFFLE_GATEWAY = this;
+
        const token = getAuthToken();
        if (!token) {
            return false;
@ -33,6 +44,8 @@ export default {
            if (this.reconnectTimeout) {
                clearTimeout(this.reconnectTimeout);
            }
+            this.open = true;
+            this.dispatch(GatewayEventType.Open, null);
            console.log("[gateway] open");
        };
        this.ws.onmessage = (event) => {
@ -65,6 +78,8 @@ export default {
                    break;
                }
            }
+
+            this.dispatch(payload.t, payload.d);
        };
        this.ws.onclose = () => {
            if (this.reconnectDelay < 60000) {
@ -73,6 +88,7 @@ export default {
            this.authenticated = false;
            this.user = null;
            this.channels = null;
+            this.open = false;
            if (this.heartbeatInterval) {
                clearInterval(this.heartbeatInterval);
            }
@ -80,6 +96,8 @@ export default {
                this.init();
            }, this.reconnectDelay);

+            this.dispatch(GatewayEventType.Close, null);
+
            console.log("[gateway] close");
        };

@ -87,5 +105,33 @@ export default {
    },
    send(data) {
        return this.ws.send(JSON.stringify(data));
+    },
+    dispatch(event, payload) {
+        const eventHandlers = this.handlers.get(event);
+        if (!eventHandlers)
+            return;
+
+        eventHandlers.forEach((e) => {
+            e(payload);
+        });
+    },
+    subscribe(event, handler) {
+        if (!this.handlers.get(event)) {
+            this.handlers.set(event, new Set());
+        }
+
+        this.handlers.get(event).add(handler);
+        return handler; // can later be used for unsubscribe()
+    },
+    unsubscribe(event, handler) {
+        const eventHandlers = this.handlers.get(event);
+        if (!eventHandlers)
+            return;
+
+        eventHandlers.delete(handler);
+
+        if (eventHandlers.size < 1) {
+            this.handlers.delete(event);
+        }
    }
 };
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -5,6 +5,12 @@ import { initStorageDefaults } from './storage';
 initStorageDefaults();
 gateway.init();

+// Remove loading screen
+const loadingElement = document.getElementById("pre--loading-screen");
+if (loadingElement) {
+	loadingElement.parentElement.removeChild(loadingElement);
+}
+
 const app = new App({
 	target: document.body
 });
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@ -0,0 +1,112 @@
+import gateway, { GatewayEventType } from "./gateway";
+
+class Store {
+    constructor() {
+        this._handlers = [];
+        this._didInit = false;
+    }
+
+    _tryInit() {
+        if (!this._didInit && this._init) {
+            this._init();
+            this._didInit = true;
+        }
+    }
+
+    subscribe(handler) {
+        this._tryInit();
+
+        const newLength = this._handlers.push(handler);
+        const handlerIndex = newLength - 1;
+        handler(this._value);
+        return () => {
+            this._handlers.splice(handlerIndex, 1);
+        };
+    }
+
+    _dispatchUpdate() {
+        this._handlers.forEach(e => {
+            e(this._value);
+        });
+    }
+}
+
+class ChannelsStore extends Store {
+    constructor() {
+        super();
+
+        this._value = [];
+    }
+
+    _init() {
+        const channels = gateway.channels;
+        if (channels) {
+            this._value = channels;
+        }
+
+        gateway.subscribe(GatewayEventType.Ready, ({ channels }) => {
+            if (channels) {
+                this._value = channels;
+            }
+
+            this._dispatchUpdate();
+        });
+        gateway.subscribe(GatewayEventType.ChannelCreate, (channel) => {
+            this._value.push(channel);
+
+            this._dispatchUpdate();
+        });
+        gateway.subscribe(GatewayEventType.ChannelDelete, ({ id }) => {
+            const index = this._value.findIndex(e => e.id === id);
+            if (!index)
+                return;
+
+            this._value.splice(index, 1);
+
+            this._dispatchUpdate();
+        });
+        gateway.subscribe(GatewayEventType.ChannelUpdate, (data) => {
+            const index = this._value.findIndex(e => e.id === data.id);
+            if (!index)
+                return;
+
+            if (!this._value[index])
+                return;
+
+            this._value[index] = data;
+
+            this._dispatchUpdate();
+        });
+    }
+}
+
+class GatewayStatusStore extends Store {
+    constructor() {
+        super();
+        this._value = { open: false, ready: false };
+    }
+
+    _init() {
+        this._value.open = gateway.open;
+        this._value.ready = gateway.authenticated;
+
+        gateway.subscribe(GatewayEventType.Open, () => {
+            this._value.open = true;
+            this._dispatchUpdate();
+        });
+
+        gateway.subscribe(GatewayEventType.Close, () => {
+            this._value.open = false;
+            this._value.ready = false;
+            this._dispatchUpdate();
+        });
+
+        gateway.subscribe(GatewayEventType.Ready, () => {
+            this._value.ready = true;
+            this._dispatchUpdate();
+        });
+    }
+}
+
+export const channels = new ChannelsStore();
+export const gatewayStatus = new GatewayStatusStore();
--- a/src/gateway/index.ts
+++ b/src/gateway/index.ts
@ -221,7 +221,7 @@ export default function(server: Server) {
                    sessions.add(ws);

                    // TODO: each user should have their own list of channels that they join
-                    const channels = await query("SELECT id, name, owner_id FROM channels");
+                    const channels = await query("SELECT id, name, owner_id FROM channels ORDER BY id ASC");

                    clientSubscribe(ws, "*");
                    channels.rows.forEach(c => {
--- a/test.rest
+++ b/test.rest
@ -19,65 +19,65 @@ content-type: application/json
 ###

 GET http://localhost:3000/api/v1/users/self HTTP/1.1
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A

 ###

 POST http://localhost:3000/api/v1/channels HTTP/1.1
 content-type: application/json
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A

 {
-    "name": "yet another channelllll"
+    "name": "channel 4"
 }

 ###

-PUT http://localhost:3000/api/v1/channels/8 HTTP/1.1
+PUT http://localhost:3000/api/v1/channels/7 HTTP/1.1
 content-type: application/json
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
 #Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5MjU5NDUwLCJleHAiOjE2NDk0MzIyNTB9.JmF9NujFZnln7A-ynNpeyayGBqmR5poAyACYV6RnSQY

 {
-    "name": "this is my channelaaaaaa"
+    "name": "modified channel 2"
 }

 ###

-DELETE http://localhost:3000/api/v1/channels/1 HTTP/1.1
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+DELETE http://localhost:3000/api/v1/channels/9 HTTP/1.1
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
 #Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5MjU5NDUwLCJleHAiOjE2NDk0MzIyNTB9.JmF9NujFZnln7A-ynNpeyayGBqmR5poAyACYV6RnSQY

 ###

 GET http://localhost:3000/api/v1/channels/1 HTTP/1.1
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A

 ###

 GET http://localhost:3000/api/v1/channels HTTP/1.1
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A

 ###

-POST http://localhost:3000/api/v1/channels/5/messages HTTP/1.1
+POST http://localhost:3000/api/v1/channels/1/messages HTTP/1.1
 content-type: application/json
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A

 {
-    "content": "i hate cheese"
+    "content": "i love cheese"
 }

 ###

 GET http://localhost:3000/api/v1/channels/5/messages HTTP/1.1
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A

 ###

 PUT http://localhost:3000/api/v1/messages/3 HTTP/1.1
 content-type: application/json
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A

 {
    "content": "hello again!"
@ -86,9 +86,9 @@ Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6M
 ###

 GET http://localhost:3000/api/v1/messages/3
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A

 ###

 DELETE http://localhost:3000/api/v1/messages/2 HTTP/1.1
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidHlwZSI6MSwiaWF0IjoxNjQ5NzAwMTE0LCJleHAiOjE2NDk4NzI5MTR9.EOn8MBHZLCxfU5fHc0ZY2x9p3y-_RdD7X915L1B6Ftc
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwMjA1MDEwLCJleHAiOjE2NTAzNzc4MTB9.ITaXBm7zVxh_s5xrCFXM1ScVL-igGJf1Qz2l_tLZf4A
Author	SHA1	Message	Date
hippoz	304cef3c11	frontend: add loading screen for initially loading the js and connecting to the gateway	2022-04-17 20:23:20 +03:00
hippoz	541464cdd9	frontend+backend: fix gateway-updated channel order	2022-04-17 17:56:03 +03:00
hippoz	381f1ae454	frontend: link up channel sidebar with gateway and fix channel button layout issue	2022-04-17 04:08:40 +03:00