feat(chat): delete message from user

lib/slax/chat.ex

@@ -5,6 +5,7 @@ defmodule Slax.Chat do
 
   import Ecto.Query
 
+  alias Slax.Accounts.User
   alias Slax.Chat.Message
   alias Slax.Chat.Room
   alias Slax.Repo
@@ -60,4 +61,10 @@ defmodule Slax.Chat do
   def change_message(message, attrs \\ %{}) do
     Message.changeset(message, attrs)
   end
+
+  def delete_message_by_id(message_id, %User{id: user_id}) do
+    Message
+    |> Repo.get_by(id: message_id, user_id: user_id)
+    |> Repo.delete()
+  end
 end

lib/slax_web/live/chat_room_live.ex

@@ -2,6 +2,7 @@ defmodule SlaxWeb.ChatRoomLive do
   @moduledoc false
   use SlaxWeb, :live_view
 
+  alias Slax.Accounts.User
   alias Slax.Chat
   alias Slax.Chat.Message
   alias Slax.Chat.Room
@@ -89,6 +90,7 @@ defmodule SlaxWeb.ChatRoomLive do
       <div id="room-messages" class="flex flex-col flex-grow overflow-auto" phx-update="stream">
         <.message
           :for={{dom_id, message} <- @streams.messages}
+          current_user={@current_user}
           dom_id={dom_id}
           message={message}
           timezone={@timezone}
@@ -178,6 +180,13 @@ defmodule SlaxWeb.ChatRoomLive do
     {:noreply, socket}
   end
 
+  @impl Phoenix.LiveView
+  def handle_event("delete-message", %{"id" => message_id}, socket) do
+    {:ok, message} = Chat.delete_message_by_id(message_id, socket.assigns.current_user)
+
+    {:noreply, stream_delete(socket, :messages, message)}
+  end
+
   attr :active, :boolean, required: true
   attr :room, Room, required: true
 
@@ -199,6 +208,7 @@ defmodule SlaxWeb.ChatRoomLive do
     """
   end
 
+  attr :current_user, User, required: true
   attr :dom_id, :string, required: true
   attr :message, Message, required: true
   attr :timezone, :string, required: true
@@ -206,6 +216,15 @@ defmodule SlaxWeb.ChatRoomLive do
   defp message(assigns) do
     ~H"""
     <div id={@dom_id} class="relative flex px-4 py-3">
+      <button
+        :if={@current_user.id == @message.user_id}
+        class="absolute top-4 right-4 text-red-500 hover:text-red-800 cursor-pointer"
+        data-confirm="Are you sure?"
+        phx-click="delete-message"
+        phx-value-id={@message.id}
+      >
+        <.icon name="hero-trash" class="h-4 w-4" />
+      </button>
       <div class="h-10 w-10 rounded flex-shrink-0 bg-slate-300"></div>
       <div class="ml-2">
         <div class="-mt-1">