feat(chat): add messages

lib/slax/chat.ex

@@ -5,6 +5,7 @@ defmodule Slax.Chat do
 
   import Ecto.Query
 
+  alias Slax.Chat.Message
   alias Slax.Chat.Room
   alias Slax.Repo
 
@@ -37,4 +38,11 @@ defmodule Slax.Chat do
     query = from(r in Room, order_by: [asc: :name])
     Repo.all(query)
   end
+
+  def list_messages_in_room(%Room{id: room_id}) do
+    query =
+      from(m in Message, where: m.room_id == ^room_id, order_by: [asc: m.inserted_at, asc: m.id])
+
+    Repo.all(query)
+  end
 end

lib/slax/chat/message.ex

@@ -0,0 +1,22 @@
+defmodule Slax.Chat.Message do
+  use Ecto.Schema
+  import Ecto.Changeset
+  alias Slax.Chat.Room
+  alias Slax.Accounts.User
+
+  schema "messages" do
+    field :body, :string
+
+    belongs_to :user, User
+    belongs_to :room, Room
+
+    timestamps(type: :utc_datetime)
+  end
+
+  @doc false
+  def changeset(message, attrs) do
+    message
+    |> cast(attrs, [:user_id, :room_id, :body])
+    |> validate_required([:user_id, :room_id, :body])
+  end
+end

lib/slax/chat/room.ex

@@ -1,11 +1,14 @@
 defmodule Slax.Chat.Room do
   use Ecto.Schema
   import Ecto.Changeset
+  alias Slax.Chat.Message
 
   schema "rooms" do
     field :name, :string
     field :topic, :string
 
+    has_many :messages, Message
+
     timestamps(type: :utc_datetime)
   end
 

lib/slax_web/live/chat_room_live.ex

@@ -3,6 +3,7 @@ defmodule SlaxWeb.ChatRoomLive do
   use SlaxWeb, :live_view
 
   alias Slax.Chat
+  alias Slax.Chat.Message
   alias Slax.Chat.Room
 
   @impl Phoenix.LiveView
@@ -85,6 +86,9 @@ defmodule SlaxWeb.ChatRoomLive do
           <% end %>
         </ul>
       </div>
+      <div class="flex flex-col flex-grow overflow-auto">
+        <.message :for={message <- @messages} message={message} />
+      </div>
     </div>
     """
   end
@@ -107,7 +111,15 @@ defmodule SlaxWeb.ChatRoomLive do
           Chat.get_first_room!()
       end
 
-    {:noreply, assign(socket, hide_topic?: false, page_title: "# #{room.name}", room: room)}
+    messages = Chat.list_messages_in_room(room)
+
+    {:noreply,
+     assign(socket,
+       hide_topic?: false,
+       messages: messages,
+       page_title: "# #{room.name}",
+       room: room
+     )}
   end
 
   @impl Phoenix.LiveView
@@ -135,4 +147,22 @@ defmodule SlaxWeb.ChatRoomLive do
     </.link>
     """
   end
+
+  attr :message, Message, required: true
+
+  defp message(assigns) do
+    ~H"""
+    <div class="relative flex px-4 py-3">
+      <div class="h-10 w-10 rounded flex-shrink-0 bg-slate-300"></div>
+      <div class="ml-2">
+        <div class="-mt-1">
+          <.link class="text-sm font-semibold hover:underline">
+            <span>User</span>
+          </.link>
+          <p class="text-sm"><%= @message.body %></p>
+        </div>
+      </div>
+    </div>
+    """
+  end
 end

priv/repo/migrations/20241023113747_create_messages.exs

@@ -0,0 +1,16 @@
+defmodule Slax.Repo.Migrations.CreateMessages do
+  use Ecto.Migration
+
+  def change do
+    create table(:messages) do
+      add :body, :text, null: false
+      add :user_id, references(:users, on_delete: :delete_all), null: false
+      add :room_id, references(:rooms, on_delete: :delete_all), null: false
+
+      timestamps(type: :utc_datetime)
+    end
+
+    create index(:messages, [:user_id])
+    create index(:messages, [:room_id])
+  end
+end