feat: Delete message

data-miner00 · Apr 20, 2024 · fb73f74 · fb73f74
1 parent 3b38ece
commit fb73f74
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 9 deletions.
diff --git 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
@@ -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>
 }