From 459b1c67031e8e93c02dc6ad39b270b2a0ed35d6 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Thu, 21 Apr 2022 01:55:37 +0300
Subject: [PATCH] frontend: show pending messages in a different color

---
 frontend/public/global.css                            |  3 ++-
 frontend/src/components/pages/main/ChannelView.svelte |  5 +++--
 frontend/src/components/pages/main/Messages.svelte    |  6 +++++-
 frontend/src/stores.js                                | 10 ++++++++++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index fc94e0e..69465d1 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -10,7 +10,8 @@
 :root {
 	--background-color-1: hsl(180, 11%, 7%);
 	--background-color-2: hsl(180, 11%, 12%);
-	--foreground-color-1: #FFFFFF;
+	--foreground-color-1: hsl(0, 0%, 100%);
+	--foreground-color-2: hsl(0, 0%, 60%);
 
 	--space-unit: 1em;
 	--space-xxs: calc(0.25 * var(--space-unit));
diff --git a/frontend/src/components/pages/main/ChannelView.svelte b/frontend/src/components/pages/main/ChannelView.svelte
index ed979df..29c50db 100644
--- a/frontend/src/components/pages/main/ChannelView.svelte
+++ b/frontend/src/components/pages/main/ChannelView.svelte
@@ -25,7 +25,8 @@
             channel_id: channel.id,
             author_id: $userInfoStore.id,
             author_username: $userInfoStore.username,
-            createdAt: Date.now().toString()
+            created_at: Date.now().toString(),
+            _isPending: true
         };
         messages.addMessage(optimisticMessage);
         messageInput = "";
@@ -35,7 +36,7 @@
         });
         
         if (res.success && res.ok) {
-            messages.updateId(optimisticMessageId, res.json.id);
+            messages.setMessage(optimisticMessageId, res.json);
         } else {
             messages.deleteMessage({
                 id: optimisticMessageId
diff --git a/frontend/src/components/pages/main/Messages.svelte b/frontend/src/components/pages/main/Messages.svelte
index 653b45b..6eecbac 100644
--- a/frontend/src/components/pages/main/Messages.svelte
+++ b/frontend/src/components/pages/main/Messages.svelte
@@ -41,13 +41,17 @@
         overflow-y: auto;
         background-color: var(--background-color-1);
     }
+
+    .pending {
+        color: var(--foreground-color-2);
+    }
 </style>
 
 <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
     {#each $messages as message (message.id)}
         <div>
             <b>{ message.author_username }</b>
-            <span>{ message.content }</span>
+            <span class:pending={ message._isPending }>{ message.content }</span>
         </div>
     {/each}
 </div>
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index e5e3717..c58ae64 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -104,6 +104,16 @@ class MessageStore extends Store {
         this.didDoInitialLoad = false;
     }
 
+    setMessage(id, message) {
+        const index = this.value.findIndex(e => e.id === id);
+        if (index === -1)
+            return;
+
+        this.value[index] = message;
+
+        this.updated();
+    }
+
     addMessage(message) {
         this.value.push(message);
         // only dispatch update if collectOldMessages didn't