From 871ed876877fa7a51e62c0d1b0c2babe83c0ce04 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Tue, 26 Apr 2022 03:47:51 +0300
Subject: [PATCH] frontend: add "toast" system to tell the user of errors

---
 frontend/public/global.css                    |  2 +-
 frontend/src/components/MessageInput.svelte   |  5 ++-
 .../components/overlays/CreateChannel.svelte  |  7 +++-
 .../components/overlays/EditChannel.svelte    | 16 ++++++++--
 .../overlays/OverlayProvider.svelte           |  4 +++
 frontend/src/components/overlays/Toast.svelte | 32 +++++++++++++++++++
 frontend/src/stores.js                        |  4 +++
 7 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/overlays/Toast.svelte

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 0152acb..6be0050 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -196,7 +196,7 @@ body {
 	justify-content: center;
 	align-items: center;
 	background-color: transparent;
-	color: var(--foreground-color-3);
+	color: var(--foreground-color-2);
 	text-align: center;
 	border: none;
 	border-radius: var(--radius-md);
diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index 2dfb09b..9098c39 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -1,7 +1,7 @@
 <script>
     import request from "../request";
     import { apiRoute } from "../storage";
-    import { messagesStoreProvider, userInfoStore } from "../stores";
+    import { messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
 
     export let channel;
     let messageInput = "";
@@ -39,6 +39,9 @@
             messages.deleteMessage({
                 id: optimisticMessageId
             });
+            overlayStore.open("toast", {
+                message: "Couldn't send message"
+            });
         }
     };
 </script>
diff --git a/frontend/src/components/overlays/CreateChannel.svelte b/frontend/src/components/overlays/CreateChannel.svelte
index cfd096c..ec7be4f 100644
--- a/frontend/src/components/overlays/CreateChannel.svelte
+++ b/frontend/src/components/overlays/CreateChannel.svelte
@@ -11,9 +11,14 @@
     const close = () => overlayStore.close('createChannel');
     const create = async () => {
         createButtonEnabled = false;
-        await request("POST", apiRoute("channels"), true, {
+        const { ok } = await request("POST", apiRoute("channels"), true, {
             name: channelName
         });
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't create channel"
+            });
+        }
         close();
     };
 </script>
diff --git a/frontend/src/components/overlays/EditChannel.svelte b/frontend/src/components/overlays/EditChannel.svelte
index e3a8ec5..8abf57a 100644
--- a/frontend/src/components/overlays/EditChannel.svelte
+++ b/frontend/src/components/overlays/EditChannel.svelte
@@ -13,14 +13,24 @@
     const close = () => overlayStore.close('editChannel');
     const save = async () => {
         buttonsEnabled = false;
-        await request("PUT", apiRoute(`channels/${channel.id}`), true, {
+        const { ok } = await request("PUT", apiRoute(`channels/${channel.id}`), true, {
             name: channelName
         });
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't edit channel"
+            });
+        }
         close();
     };
     const deleteChannel = async () => {
         buttonsEnabled = false;
-        await request("DELETE", apiRoute(`channels/${channel.id}`), true);
+        const { ok } = await request("DELETE", apiRoute(`channels/${channel.id}`), true);
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't delete channel"
+            });
+        }
         close();
     };
 </script>
@@ -48,7 +58,7 @@
 
         <div class="modal-footer">
             <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
-            <button class="button modal-secondary-action delete-button" on:click="{ deleteChannel }">Delete</button>
+            <button class="button modal-secondary-action delete-button" on:click="{ deleteChannel }" disabled="{ !buttonsEnabled }">Delete</button>
             <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
         </div>
     </div>
diff --git a/frontend/src/components/overlays/OverlayProvider.svelte b/frontend/src/components/overlays/OverlayProvider.svelte
index a08b5a6..251688a 100644
--- a/frontend/src/components/overlays/OverlayProvider.svelte
+++ b/frontend/src/components/overlays/OverlayProvider.svelte
@@ -2,6 +2,7 @@
     import { overlayStore } from "../../stores";
     import EditChannel from "./EditChannel.svelte";
     import CreateChannel from "./CreateChannel.svelte";
+    import Toast from "./Toast.svelte";
 </script>
 
 {#if $overlayStore.createChannel}
@@ -10,3 +11,6 @@
 {#if $overlayStore.editChannel}
     <EditChannel { ...$overlayStore.editChannel } />
 {/if}
+{#if $overlayStore.toast}
+    <Toast { ...$overlayStore.toast } />
+{/if}
diff --git a/frontend/src/components/overlays/Toast.svelte b/frontend/src/components/overlays/Toast.svelte
new file mode 100644
index 0000000..e815b62
--- /dev/null
+++ b/frontend/src/components/overlays/Toast.svelte
@@ -0,0 +1,32 @@
+<script>
+    import { XIcon } from "svelte-feather-icons";
+    import { quintInOut } from "svelte/easing";
+    import { fly } from "svelte/transition";
+    import { overlayStore } from "../../stores";
+
+    export let message;
+</script>
+
+<style>
+    .toast {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 5.5em;
+        left: 50%;
+        background-color: var(--purple-1);
+        transform: translate(-50%, -50%);
+        padding: var(--space-sm);
+        border-radius: var(--radius-md);
+    }
+</style>
+
+{#key message}
+    <div class="toast" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}">
+        <span>{ message }</span>
+        <button class="icon-button" on:click="{ () => overlayStore.close('toast') }">
+            <XIcon />
+        </button>
+    </div>
+{/key}
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 35fd517..c171d44 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -182,6 +182,10 @@ class MessageStore extends Store {
             res.json.reverse();
             this.value = res.json.concat(this.value);
             this.updated();
+        } else {
+            overlayStore.open("toast", {
+                message: "Messages failed to load"
+            });
         }
     }