From fb73f74ebc6080c9d8fe53dffadfe4e0cd2c328a Mon Sep 17 00:00:00 2001
From: data-miner00 <data-miner00@users.noreply.github.com>
Date: Sat, 20 Apr 2024 11:53:12 +0800
Subject: [PATCH] feat: Delete message

---
 src/Linker.Mvc/Hubs/ChatHub.cs                | 15 ++++++++
 src/Linker.Mvc/Views/Workspace/Details.cshtml | 38 ++++++++++++++-----
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/Linker.Mvc/Hubs/ChatHub.cs b/src/Linker.Mvc/Hubs/ChatHub.cs
index f3af6b3..b27943d 100644
--- a/src/Linker.Mvc/Hubs/ChatHub.cs
+++ b/src/Linker.Mvc/Hubs/ChatHub.cs
@@ -83,6 +83,21 @@ public Task EditMessage(EditChatMessage edit)
         return Task.WhenAll(tasks);
     }
 
+    public Task DeleteMessage(string workspaceId, string chatId)
+    {
+        if (!this.connectionManager.Connections.TryGetValue(this.Context.ConnectionId, out var connection))
+        {
+            return Task.CompletedTask;
+        }
+
+        IEnumerable<Task> tasks = [
+            this.repository.SoftDeleteChatMessageAsync(chatId, default),
+            this.Clients.Group(workspaceId).SendAsync("DeleteMessage", chatId),
+        ];
+
+        return Task.WhenAll(tasks);
+    }
+
     private void KeepConnection(ChatConnection connection)
     {
         this.connectionManager.Connections[this.Context.ConnectionId] = connection;
diff --git a/src/Linker.Mvc/Views/Workspace/Details.cshtml b/src/Linker.Mvc/Views/Workspace/Details.cshtml
index fb35f2b..bf5e058 100644
--- a/src/Linker.Mvc/Views/Workspace/Details.cshtml
+++ b/src/Linker.Mvc/Views/Workspace/Details.cshtml
@@ -165,15 +165,25 @@
                     <article class="border-b border-solid border-black p-2 bg-gray-50">
                         <div class="flex justify-between">
                             <p class="text-xs">@username - @message.CreatedAt</p>
-                            <div class="flex gap-4">
-                                <button class="block" onclick="return toggleChatEdit('@message.Id')"><i class="bi bi-pencil"></i></button>
-                                <button class="block"><i class="bi bi-trash"></i></button>
-                            </div>
+                            @if (!message.IsDeleted)
+                            {
+                                <div class="flex gap-4">
+                                    <button class="block" onclick="return toggleChatEdit('@message.Id')"><i class="bi bi-pencil"></i></button>
+                                    <button class="block" onclick="return deleteChat('@message.Id')"><i class="bi bi-trash"></i></button>
+                                </div>
+                            }
                         </div>
-                        <p id="p-@message.Id" class="bg-pink-50">@message.Message</p>
-                        <form id="f-@message.Id" class="hidden" onsubmit="return editChatMessage(event, '@message.Id')">
-                            <input class="bg-purple-50" name="editMessage" value="@message.Message" />
-                        </form>
+                        @if (!message.IsDeleted)
+                        {
+                            <p id="p-@message.Id" class="bg-pink-50">@message.Message</p>
+                            <form id="f-@message.Id" class="hidden" onsubmit="return editChatMessage(event, '@message.Id')">
+                                <input class="bg-purple-50" name="editMessage" value="@message.Message" />
+                            </form>
+                        }
+                        else
+                        {
+                            <p class="bg-pink-50 italic">The message has been deleted.</p>
+                        }
                     </article>
                 }
             </div>
@@ -239,7 +249,7 @@
                     <p class="text-xs">${usr} - ${msg.createdAt}</p>
                     <div class="flex gap-4">
                         <button class="block" onclick="return toggleChatEdit('${msg.id}')"><i class="bi bi-pencil"></i></button>
-                        <button class="block"><i class="bi bi-trash"></i></button>
+                        <button class="block" onclick="return deleteChat('${msg.id}')"><i class="bi bi-trash"></i></button>
                     </div>
                 </div>
                 <p id="p-${msg.id}" class="bg-pink-50">${msg.message}</p>
@@ -256,6 +266,10 @@
             console.log(msg);
         });
 
+        connection.on("DeleteMessage", (chatId) => {
+            $(`#p-${chatId}`).text("The message has been deleted.").addClass("italic");
+        })
+
         connection.start().then(() => {
             connection.invoke("JoinSpecificChatRoom", {
                 username: "@User.FindFirstValue(ClaimTypes.Name)",
@@ -330,5 +344,11 @@
         function openAllLinksInNewTab(links) {
             links.forEach((link) => window.open(link, "_blank"));
         }
+
+        function deleteChat(chatId) {
+            connection
+                .invoke("DeleteMessage", "@Model.WorkspaceId", chatId)
+                .catch(console.error);
+        }
     </script>
 }