From 0d95b0240191a1d0255d8455bb08f56a3a23f2b7 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Wed, 20 Apr 2022 03:44:48 +0300
Subject: [PATCH] frontend: send messages

---
 .../components/pages/main/ChannelView.svelte  | 42 ++++++++++++++++++-
 .../src/components/pages/main/Messages.svelte |  5 ---
 frontend/src/stores.js                        | 34 ++++++++++++++-
 test.rest                                     |  2 +-
 4 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/pages/main/ChannelView.svelte b/frontend/src/components/pages/main/ChannelView.svelte
index f5824d2..99c9342 100644
--- a/frontend/src/components/pages/main/ChannelView.svelte
+++ b/frontend/src/components/pages/main/ChannelView.svelte
@@ -1,8 +1,46 @@
 <script>
     import { HashIcon } from "svelte-feather-icons";
-import Messages from "./Messages.svelte";
+    import request from "../../../request";
+import { apiRoute } from "../../../storage";
+    import { messagesStoreProvider, userInfoStore } from "../../../stores";
+    import Messages from "./Messages.svelte";
 
     export let channel;
+    let messageInput = "";
+
+    $: messages = messagesStoreProvider.getStore(channel.id);
+
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        if (messageInput.trim() === "" || !$userInfoStore)
+            return;
+
+        // optimistically add message to store
+        const optimisticMessageId = Math.floor(Math.random() * 999999);
+        const optimisticMessage = {
+            id: optimisticMessageId,
+            content: messageInput,
+            channel_id: channel.id,
+            author_id: $userInfoStore.id,
+            author_username: $userInfoStore.username,
+            createdAt: Date.now().toString()
+        };
+        messages.addMessage(optimisticMessage);
+
+        const res = await request("POST", apiRoute(`channels/${channel.id}/messages`), true, {
+            content: messageInput
+        });
+        
+        if (res.success && res.ok) {
+            messages.updateId(optimisticMessageId, res.json.id);
+        } else {
+            messages.deleteMessage({
+                id: optimisticMessageId
+            });
+        }
+    };
 </script>
 
 <style>
@@ -51,6 +89,6 @@ import Messages from "./Messages.svelte";
     </div>
     <Messages channelId="{ channel.id }" />
     <div class="message-input-container">
-        <input type="text" class="message-input">
+        <input type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
     </div>
 </div>
diff --git a/frontend/src/components/pages/main/Messages.svelte b/frontend/src/components/pages/main/Messages.svelte
index 788df5a..a168eed 100644
--- a/frontend/src/components/pages/main/Messages.svelte
+++ b/frontend/src/components/pages/main/Messages.svelte
@@ -4,11 +4,6 @@
     export let channelId;
 
     $: messages = messagesStoreProvider.getStore(channelId);
-    $: {
-        if (!messages.didDoInitialLoad) {
-            messages.doInitialLoad();
-        }
-    }
 
     const onScroll = (e) => {
         const { scrollTop, offsetHeight, scrollHeight } = e.target;
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 8e11a7d..e5e3717 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -80,6 +80,22 @@ class GatewayStatusStore extends Store {
     }
 }
 
+class UserInfoStore extends Store {
+    constructor() {
+        super(null);
+
+        gateway.subscribe(GatewayEventType.Ready, ({ user }) => {
+            this.value = user;
+            this.updated();
+        });
+
+        gateway.subscribe(GatewayEventType.Close, () => {
+            this.value = null;
+            this.updated();
+        });
+    }
+}
+
 class MessageStore extends Store {
     constructor(channelId) {
         super([]);
@@ -96,6 +112,16 @@ class MessageStore extends Store {
         }
     }
 
+    updateId(oldId, newId) {
+        const index = this.value.findIndex(e => e.id === oldId);
+        if (index === -1)
+            return;
+
+        this.value[index].id = newId;
+
+        this.updated();
+    }
+
     updateMessage(message) {
         const index = this.value.findIndex(e => e.id === message.id);
         if (index === -1)
@@ -158,6 +184,9 @@ class MessagesStoreProvider {
         this.storeByChannel = new Map();
 
         gateway.subscribe(GatewayEventType.MessageCreate, (message) => {
+            // we currently don't care about our own messages
+            if (gateway.user && message.author_id === gateway.user.id)
+                return;
             this.getStore(message.channel_id).addMessage(message);
         });
         gateway.subscribe(GatewayEventType.MessageUpdate, (message) => {
@@ -170,7 +199,9 @@ class MessagesStoreProvider {
 
     getStore(channelId) {
         if (!this.storeByChannel.get(channelId)) {
-            this.storeByChannel.set(channelId, new MessageStore(channelId));
+            const store = new MessageStore(channelId);
+            store.doInitialLoad();
+            this.storeByChannel.set(channelId, store);
         }
         return this.storeByChannel.get(channelId);
     }
@@ -179,4 +210,5 @@ class MessagesStoreProvider {
 export const channels = new ChannelsStore();
 export const gatewayStatus = new GatewayStatusStore();
 export const messagesStoreProvider = new MessagesStoreProvider();
+export const userInfoStore = new UserInfoStore();
 export const selectedChannel = writable({ id: -1, name: "none", creator_id: -1 });
diff --git a/test.rest b/test.rest
index 7830699..385fdb4 100644
--- a/test.rest
+++ b/test.rest
@@ -70,7 +70,7 @@ Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6M
 
 ###
 
-GET http://localhost:3000/api/v1/channels/5/messages HTTP/1.1
+GET http://localhost:3000/api/v1/channels/6/messages HTTP/1.1
 Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwNDA4NTQ1LCJleHAiOjE2NTA1ODEzNDV9.DCt_IpukPaihSGl1N8a5ve5pd75N4aePxR4YKzw98Ss
 
 ###