From e267ca4fc49c57075b8409f0e591e186bcb79d62 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Wed, 20 Apr 2022 17:49:31 +0300
Subject: [PATCH] frontend: implement autoscroll

---
 .../src/components/pages/main/ChannelView.svelte   |  5 +++--
 frontend/src/components/pages/main/Messages.svelte | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/pages/main/ChannelView.svelte b/frontend/src/components/pages/main/ChannelView.svelte
index 99c9342..ed979df 100644
--- a/frontend/src/components/pages/main/ChannelView.svelte
+++ b/frontend/src/components/pages/main/ChannelView.svelte
@@ -1,7 +1,7 @@
 <script>
     import { HashIcon } from "svelte-feather-icons";
     import request from "../../../request";
-import { apiRoute } from "../../../storage";
+    import { apiRoute } from "../../../storage";
     import { messagesStoreProvider, userInfoStore } from "../../../stores";
     import Messages from "./Messages.svelte";
 
@@ -28,9 +28,10 @@ import { apiRoute } from "../../../storage";
             createdAt: Date.now().toString()
         };
         messages.addMessage(optimisticMessage);
+        messageInput = "";
 
         const res = await request("POST", apiRoute(`channels/${channel.id}/messages`), true, {
-            content: messageInput
+            content: optimisticMessage.content
         });
         
         if (res.success && res.ok) {
diff --git a/frontend/src/components/pages/main/Messages.svelte b/frontend/src/components/pages/main/Messages.svelte
index a168eed..212e602 100644
--- a/frontend/src/components/pages/main/Messages.svelte
+++ b/frontend/src/components/pages/main/Messages.svelte
@@ -1,10 +1,23 @@
 <script>
+    import { afterUpdate, beforeUpdate } from "svelte";
     import { messagesStoreProvider } from "../../../stores.js";
 
     export let channelId;
+    let scrollTarget;
+    let shouldAutoscroll = false;
 
     $: messages = messagesStoreProvider.getStore(channelId);
 
+    beforeUpdate(() => {
+        shouldAutoscroll = scrollTarget && (scrollTarget.offsetHeight + scrollTarget.scrollTop) > (scrollTarget.scrollHeight - 20);
+    });
+
+    afterUpdate(() => {
+        if (shouldAutoscroll && scrollTarget) {
+            scrollTarget.scrollIntoView();
+        }
+    });
+
     const onScroll = (e) => {
         const { scrollTop, offsetHeight, scrollHeight } = e.target;
         if (scrollTop === 0) {
@@ -37,4 +50,5 @@
             <span>{ message.content }</span>
         </div>
     {/each}
+    <div bind:this={ scrollTarget }></div>
 </div>