feat(chat): use streams to show messages

This commit is contained in:
João Paulo Dubas 2024-10-30 23:39:56 +00:00
parent a13a47a697
commit af2c4e4e95
Signed by: joao.dubas
SSH Key Fingerprint: SHA256:V1mixgOGRc/YMhGx/DNkOSmJxgA2vHNrDZEk3wt/kOA

View File

@ -86,8 +86,8 @@ defmodule SlaxWeb.ChatRoomLive do
<% end %> <% end %>
</ul> </ul>
</div> </div>
<div class="flex flex-col flex-grow overflow-auto"> <div id="room-messages" class="flex flex-col flex-grow overflow-auto" phx-update="stream">
<.message :for={message <- @messages} message={message} /> <.message :for={{dom_id, message} <- @streams.messages} dom_id={dom_id} message={message} />
</div> </div>
<div class="h-12 bg-white px-4 pb-4"> <div class="h-12 bg-white px-4 pb-4">
<.form <.form
@ -137,7 +137,8 @@ defmodule SlaxWeb.ChatRoomLive do
{:noreply, {:noreply,
socket socket
|> assign(hide_topic?: false, messages: messages, page_title: "# #{room.name}", room: room) |> assign(hide_topic?: false, page_title: "# #{room.name}", room: room)
|> stream(:messages, messages, reset: true)
|> assign_message_form(Chat.change_message(%Message{}))} |> assign_message_form(Chat.change_message(%Message{}))}
end end
@ -160,7 +161,7 @@ defmodule SlaxWeb.ChatRoomLive do
case Chat.create_message(room, user, message_params) do case Chat.create_message(room, user, message_params) do
{:ok, message} -> {:ok, message} ->
socket socket
|> update(:messages, &(&1 ++ [message])) |> stream_insert(:messages, message)
|> assign_message_form(Chat.change_message(%Message{})) |> assign_message_form(Chat.change_message(%Message{}))
{:error, changeset} -> {:error, changeset} ->
@ -191,11 +192,12 @@ defmodule SlaxWeb.ChatRoomLive do
""" """
end end
attr :dom_id, :string, required: true
attr :message, Message, required: true attr :message, Message, required: true
defp message(assigns) do defp message(assigns) do
~H""" ~H"""
<div class="relative flex px-4 py-3"> <div id={@dom_id} class="relative flex px-4 py-3">
<div class="h-10 w-10 rounded flex-shrink-0 bg-slate-300"></div> <div class="h-10 w-10 rounded flex-shrink-0 bg-slate-300"></div>
<div class="ml-2"> <div class="ml-2">
<div class="-mt-1"> <div class="-mt-1">