From b1ff4527321d69329f65f4372f6107b1e7924ebe Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Mon, 25 Apr 2022 18:47:27 +0300
Subject: [PATCH] frontend: start working on "create channel" modal

---
 .../components/modals/CreateChannel.svelte    | 42 +++++++++++++++++++
 .../src/components/pages/main/Main.svelte     |  3 ++
 .../pages/main/OverlayProvider.svelte         |  8 ++++
 .../src/components/pages/main/Sidebar.svelte  | 10 ++++-
 frontend/src/gateway.js                       |  4 +-
 frontend/src/storage.js                       |  3 +-
 frontend/src/stores.js                        | 19 +++++++++
 7 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/modals/CreateChannel.svelte
 create mode 100644 frontend/src/components/pages/main/OverlayProvider.svelte

diff --git a/frontend/src/components/modals/CreateChannel.svelte b/frontend/src/components/modals/CreateChannel.svelte
new file mode 100644
index 0000000..f5cab7e
--- /dev/null
+++ b/frontend/src/components/modals/CreateChannel.svelte
@@ -0,0 +1,42 @@
+<script>
+    import { fade, fly } from "svelte/transition";
+    import { quintInOut } from "svelte/easing";
+    import { overlayStore } from "../../stores";
+</script>
+
+<style>
+    .modal-backdrop {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        z-index: 0;
+        top: 50%;
+        left: 50%;
+        background-color: rgba(0, 0, 0, 0.4);
+        transform: translate(-50%, -50%);
+    }
+
+    .modal-header {
+        display: block;
+        margin-bottom: var(--space-xxs);
+    }
+
+    .modal {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        min-width: 450px;
+        min-height: 370px;
+        background-color: var(--background-color-2);
+        padding: var(--space-md);
+        border-radius: var(--radius-lg);
+    }
+</style>
+
+<div class="modal-backdrop" transition:fade="{{ duration: 350, easing: quintInOut }}" on:click="{() => overlayStore.close('createChannel')}">
+    <div class="modal" transition:fly="{{ duration: 350, easing: quintInOut, y: 15 }}">
+        <span class="h2 modal-header">Create Channel</span>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus earum blanditiis, numquam debitis inventore, fugit quidem ipsa, cum quibusdam accusamus repudiandae aut vitae necessitatibus. Libero, sit! Ex placeat illum iure!
+    </div>
+</div>
diff --git a/frontend/src/components/pages/main/Main.svelte b/frontend/src/components/pages/main/Main.svelte
index c46e3b5..ddf1be5 100644
--- a/frontend/src/components/pages/main/Main.svelte
+++ b/frontend/src/components/pages/main/Main.svelte
@@ -1,7 +1,9 @@
 <script>
     import { CloudIcon } from "svelte-feather-icons";
     import { gatewayStatus, selectedChannel } from "../../../stores";
+    import CreateChannel from "../../modals/CreateChannel.svelte";
     import ChannelView from "./ChannelView.svelte";
+import OverlayProvider from "./OverlayProvider.svelte";
     import Sidebar from "./Sidebar.svelte";
 </script>
 
@@ -23,6 +25,7 @@
 {/if}
 
 <div class="flex-container">
+    <OverlayProvider />
     <Sidebar />
     {#if $selectedChannel.id === -1}
         <div class="fullscreen-message">
diff --git a/frontend/src/components/pages/main/OverlayProvider.svelte b/frontend/src/components/pages/main/OverlayProvider.svelte
new file mode 100644
index 0000000..e1e1990
--- /dev/null
+++ b/frontend/src/components/pages/main/OverlayProvider.svelte
@@ -0,0 +1,8 @@
+<script>
+    import { overlayStore } from "../../../stores";
+    import CreateChannel from "../../modals/CreateChannel.svelte";
+</script>
+
+{#if $overlayStore.createChannel}
+    <CreateChannel />
+{/if}
diff --git a/frontend/src/components/pages/main/Sidebar.svelte b/frontend/src/components/pages/main/Sidebar.svelte
index ab4aae1..7d52dbf 100644
--- a/frontend/src/components/pages/main/Sidebar.svelte
+++ b/frontend/src/components/pages/main/Sidebar.svelte
@@ -1,6 +1,6 @@
 <script>
-    import { HashIcon } from "svelte-feather-icons";
-    import { channels, selectedChannel } from "../../../stores";
+    import { HashIcon, PlusIcon } from "svelte-feather-icons";
+    import { channels, overlayStore, selectedChannel } from "../../../stores";
     import UserTopBar from "./UserTopBar.svelte";
 </script>
 
@@ -15,6 +15,12 @@
                 <span>{ channel.name }</span>
             </button>
         {/each}
+        <button on:click="{ () => overlayStore.open('createChannel') }" class="sidebar-button">
+            <div>
+                <PlusIcon />
+            </div>
+            <span>Create Channel</span>
+        </button>
     </div>
 </div>
 
diff --git a/frontend/src/gateway.js b/frontend/src/gateway.js
index bdeb730..4213e6d 100644
--- a/frontend/src/gateway.js
+++ b/frontend/src/gateway.js
@@ -23,7 +23,7 @@ export const GatewayEventType = {
     Close: -4
 }
 
-const log = logging.logger("Gateway");
+const log = logging.logger("Gateway", true);
 
 export default {
     ws: null,
@@ -38,8 +38,10 @@ export default {
     init() {
         const token = getAuthToken();
         if (!token) {
+            log("no auth token, skipping connection");
             return false;
         }
+        log(`connecting to gateway - gatewayBase: ${getItem("gatewayBase")}`);
         this.ws = new WebSocket(getItem("gatewayBase"));
         this.ws.onopen = () => {
             if (this.reconnectTimeout) {
diff --git a/frontend/src/storage.js b/frontend/src/storage.js
index c28c99c..08aba50 100644
--- a/frontend/src/storage.js
+++ b/frontend/src/storage.js
@@ -1,6 +1,7 @@
 const defaults = {
     apiBase: `${window.location.origin}/api/v1`,
-    gatewayBase: `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/gateway`
+    gatewayBase: `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/gateway`,
+    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwODQzMjY1LCJleHAiOjE2NTEwMTYwNjV9.ssu-MlMkwKQOcP5nmJ98KbqudcGW5XBYPc_d6et4oxo"
 };
 
 const dummyProvider = {
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 496a3c4..8f6e8d2 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -219,8 +219,27 @@ class MessagesStoreProvider {
     }
 }
 
+class OverlayStore extends Store {
+    constructor() {
+        super({
+            createChannel: false
+        });
+    }
+
+    open(name) {
+        this.value[name] = true;
+        this.updated();
+    }
+
+    close(name) {
+        this.value[name] = false;
+        this.updated();
+    }
+}
+
 export const channels = new ChannelsStore();
 export const gatewayStatus = new GatewayStatusStore();
 export const messagesStoreProvider = new MessagesStoreProvider();
 export const userInfoStore = new UserInfoStore();
+export const overlayStore = new OverlayStore();
 export const selectedChannel = writable({ id: -1, name: "none", creator_id: -1 });