From 66bdd7e06ff8e6ff7e292439199dae6eb044f684 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Tue, 26 Apr 2022 23:15:49 +0300
Subject: [PATCH] frontend: add message edit overlay

---
 frontend/src/components/Message.svelte        | 22 +++++++
 .../components/overlays/EditMessage.svelte    | 65 +++++++++++++++++++
 .../overlays/OverlayProvider.svelte           |  4 ++
 src/routes/api/v1/messages.ts                 |  3 +-
 4 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/overlays/EditMessage.svelte

diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index e107504..6398795 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -1,4 +1,7 @@
 <script>
+    import { MoreVerticalIcon } from "svelte-feather-icons";
+    import { overlayStore } from "../stores";
+
     export let message;
 </script>
 
@@ -8,6 +11,18 @@
         word-break: break-all;
     }
 
+    .message .edit-message {
+        visibility: hidden;
+    }
+
+    .message:hover {
+        background-color: var(--background-color-2);
+    }
+
+    .message:hover .edit-message {
+        visibility: visible;
+    }
+
     .message-content {
         color: var(--foreground-color-2);
     }
@@ -20,9 +35,16 @@
         font-weight: bold;
         margin-right: var(--space-xxs);
     }
+
+    .edit-message {
+        float: right;
+    }
 </style>
 
 <div class="message">
     <span class="author">{ message.author_username }</span>
     <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
+    <button class="icon-button edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }">
+        <MoreVerticalIcon />
+    </button>
 </div>
diff --git a/frontend/src/components/overlays/EditMessage.svelte b/frontend/src/components/overlays/EditMessage.svelte
new file mode 100644
index 0000000..ffa3f62
--- /dev/null
+++ b/frontend/src/components/overlays/EditMessage.svelte
@@ -0,0 +1,65 @@
+<script>
+    import { fade, fly } from "svelte/transition";
+    import { quintInOut } from "svelte/easing";
+    import { overlayStore } from "../../stores";
+    import request from "../../request";
+    import { apiRoute } from "../../storage";
+
+    export let message;
+
+    let messageContent = message.content;
+    let buttonsEnabled = true;
+
+    const close = () => overlayStore.close('editMessage');
+    const save = async () => {
+        buttonsEnabled = false;
+        const { ok } = await request("PUT", apiRoute(`messages/${message.id}`), true, {
+            content: messageContent
+        });
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't edit message"
+            });
+        }
+        close();
+    };
+    const deleteMessage = async () => {
+        buttonsEnabled = false;
+        const { ok } = await request("DELETE", apiRoute(`messages/${message.id}`), true);
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't delete message"
+            });
+        }
+        close();
+    };
+</script>
+
+<style>
+    .full-width {
+        width: 100%;
+    }
+
+    .delete-button {
+        color: var(--red-2);
+    }
+</style>
+
+<div class="modal-backdrop" transition:fade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
+    <div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
+        <div class="modal-header">
+            <span class="h4">Edit Message</span>
+        </div>
+
+        <label class="input-label">
+            Content
+            <input class="input full-width" minlength="1" maxlength="32" bind:value={ messageContent } />
+        </label>
+
+        <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="{ deleteMessage }" disabled="{ !buttonsEnabled }">Delete</button>
+            <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
+        </div>
+    </div>
+</div>
diff --git a/frontend/src/components/overlays/OverlayProvider.svelte b/frontend/src/components/overlays/OverlayProvider.svelte
index ab17ec1..d48b8f3 100644
--- a/frontend/src/components/overlays/OverlayProvider.svelte
+++ b/frontend/src/components/overlays/OverlayProvider.svelte
@@ -5,6 +5,7 @@
     import Toast from "./Toast.svelte";
     import Login from "./Login.svelte";
     import CreateAccount from "./CreateAccount.svelte";
+    import EditMessage from "./EditMessage.svelte";
 </script>
 
 {#if $overlayStore.createChannel}
@@ -22,3 +23,6 @@
 {#if $overlayStore.createAccount}
     <CreateAccount />
 {/if}
+{#if $overlayStore.editMessage}
+    <EditMessage { ...$overlayStore.editMessage } />
+{/if}
diff --git a/src/routes/api/v1/messages.ts b/src/routes/api/v1/messages.ts
index d80f28d..146b8e0 100644
--- a/src/routes/api/v1/messages.ts
+++ b/src/routes/api/v1/messages.ts
@@ -43,7 +43,8 @@ router.delete(
         dispatch(`channel:${permissionCheckResult.rows[0].channel_id}`, {
             t: GatewayPayloadType.MessageDelete,
             d: {
-                id
+                id,
+                channel_id: permissionCheckResult.rows[0].channel_id
             }
         });