feat(chat): validate and submit messages

lib/slax/chat.ex

@@ -11,7 +11,7 @@ defmodule Slax.Chat do
 
   def create_room(attrs) do
     %Room{}
-    |> Room.changeset(attrs)
+    |> change_room(attrs)
     |> Repo.insert()
   end
 
@@ -50,4 +50,14 @@ defmodule Slax.Chat do
 
     Repo.all(query)
   end
+
+  def create_message(room, user, attrs) do
+    %Message{room: room, user: user}
+    |> change_message(attrs)
+    |> Repo.insert()
+  end
+
+  def change_message(message, attrs \\ %{}) do
+    Message.changeset(message, attrs)
+  end
 end

lib/slax/chat/message.ex

@@ -16,7 +16,7 @@ defmodule Slax.Chat.Message do
   @doc false
   def changeset(message, attrs) do
     message
-    |> cast(attrs, [:user_id, :room_id, :body])
+    |> cast(attrs, [:body])
-    |> validate_required([:user_id, :room_id, :body])
+    |> validate_required([:body])
   end
 end

lib/slax_web/live/chat_room_live.ex

@@ -89,6 +89,28 @@ defmodule SlaxWeb.ChatRoomLive do
       <div class="flex flex-col flex-grow overflow-auto">
         <.message :for={message <- @messages} message={message} />
       </div>
+      <div class="h-12 bg-white px-4 pb-4">
+        <.form
+          id="new-message-form"
+          for={@new_message_form}
+          phx-change="validate-message"
+          phx-submit="submit-message"
+          class="flex items-center border-2 border-slate-300 rounded-sm p-1"
+        >
+          <textarea
+            class="flex-grow text-sm px-3 border-1 border-slate-300 mx-1 resize-none"
+            cols=""
+            id="chat-message-textarea"
+            name={@new_message_form[:body].name}
+            placeholder={"Message ##{@room.name}"}
+            phx-debounce
+            rows="1"
+          ><%= Phoenix.HTML.Form.normalize_value("textarea", @new_message_form[:body].value) %></textarea>
+          <button class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-slate-200">
+            <.icon name="hero-paper-airplane" class="h-4 w-4" />
+          </button>
+        </.form>
+      </div>
     </div>
     """
   end
@@ -114,12 +136,9 @@ defmodule SlaxWeb.ChatRoomLive do
     messages = Chat.list_messages_in_room(room)
 
     {:noreply,
-     assign(socket,
+     socket
-       hide_topic?: false,
+     |> assign(hide_topic?: false, messages: messages, page_title: "# #{room.name}", room: room)
-       messages: messages,
+     |> assign_message_form(Chat.change_message(%Message{}))}
-       page_title: "# #{room.name}",
-       room: room
-     )}
   end
 
   @impl Phoenix.LiveView
@@ -127,6 +146,30 @@ defmodule SlaxWeb.ChatRoomLive do
     {:noreply, update(socket, :hide_topic?, &(!&1))}
   end
 
+  @impl Phoenix.LiveView
+  def handle_event("validate-message", %{"message" => message_params}, socket) do
+    changeset = Chat.change_message(%Message{}, message_params)
+    {:noreply, assign_message_form(socket, changeset)}
+  end
+
+  @impl Phoenix.LiveView
+  def handle_event("submit-message", %{"message" => message_params}, socket) do
+    %{current_user: user, room: room} = socket.assigns
+
+    socket =
+      case Chat.create_message(room, user, message_params) do
+        {:ok, message} ->
+          socket
+          |> update(:messages, &(&1 ++ [message]))
+          |> assign_message_form(Chat.change_message(%Message{}))
+
+        {:error, changeset} ->
+          assign_message_form(socket, changeset)
+      end
+
+    {:noreply, socket}
+  end
+
   attr :active, :boolean, required: true
   attr :room, Room, required: true
 
@@ -169,4 +212,8 @@ defmodule SlaxWeb.ChatRoomLive do
   defp username(user) do
     user.email |> String.split("@") |> List.first() |> String.capitalize()
   end
+
+  defp assign_message_form(socket, changeset) do
+    assign(socket, :new_message_form, to_form(changeset))
+  end
 end