feat(chat): extract room forms to SlaxWeb.RoomComponents

lib/slax_web/components/room_components.ex

@@ -0,0 +1,20 @@
+defmodule SlaxWeb.RoomComponents do
+  @moduledoc false
+  use Phoenix.Component
+
+  import SlaxWeb.CoreComponents
+
+  attr :form, Phoenix.HTML.Form, required: true
+
+  def room_form(assigns) do
+    ~H"""
+    <.simple_form for={@form} id="room-form" phx-change="validate-room" phx-submit="save-room">
+      <.input field={@form[:name]} type="text" label="Name" phx-debounce />
+      <.input field={@form[:topic]} type="text" label="Topic" phx-debounce />
+      <:actions>
+        <.button phx-disable-with="Saving..." class="w-full">Save</.button>
+      </:actions>
+    </.simple_form>
+    """
+  end
+end

lib/slax_web/live/chat_room_live.ex

@@ -4,6 +4,8 @@ defmodule SlaxWeb.ChatRoomLive do
 
   require Logger
 
+  import SlaxWeb.RoomComponents
+
   alias Slax.Accounts
   alias Slax.Accounts.User
   alias Slax.Chat
@@ -215,18 +217,7 @@ defmodule SlaxWeb.ChatRoomLive do
       on_cancel={JS.navigate(~p"/rooms/#{@room}")}
     >
       <.header>New chat room</.header>
-      <.simple_form
+      <.room_form form={@new_room_form} />
-        for={@new_room_form}
-        id="room-form"
-        phx-change="validate-room"
-        phx-submit="save-room"
-      >
-        <.input field={@new_room_form[:name]} type="text" label="Name" phx-debounce />
-        <.input field={@new_room_form[:topic]} type="text" label="Topic" phx-debounce />
-        <:actions>
-          <.button phx-disable-with="Saving..." class="w-full">Save</.button>
-        </:actions>
-      </.simple_form>
     </.modal>
     """
   end

lib/slax_web/live/chat_room_live/edit.ex

@@ -2,6 +2,8 @@ defmodule SlaxWeb.ChatRoomLive.Edit do
   @moduledoc false
   use SlaxWeb, :live_view
 
+  import SlaxWeb.RoomComponents
+
   alias Slax.Chat
 
   @impl Phoenix.LiveView
@@ -19,13 +21,7 @@ defmodule SlaxWeb.ChatRoomLive.Edit do
           </.link>
         </:actions>
       </.header>
-      <.simple_form for={@form} id="room-form" phx-change="validate-room" phx-submit="save-room">
+      <.room_form form={@form} />
-        <.input field={@form[:name]} type="text" label="Name" phx-debounce />
-        <.input field={@form[:topic]} type="text" label="Topic" phx-debounce />
-        <:actions>
-          <.button phx-disable-with="Saving..." class="w-full">Save</.button>
-        </:actions>
-      </.simple_form>
     </div>
     """
   end