From 04d60b09a4b79f49d3a682c844a37048b818a16b Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Fri, 13 Dec 2024 23:22:21 +0300
Subject: [PATCH] Extract search component

---
 .../components/record_components.ex           | 19 +++++++++++++++++++
 .../live/collection_live/index.html.heex      | 13 +------------
 .../live/wishlist_live/index.html.heex        | 13 +------------
 priv/gettext/default.pot                      | 11 +++++------
 4 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex
index 202f930c..1e7e9fd5 100644
--- a/lib/music_library_web/components/record_components.ex
+++ b/lib/music_library_web/components/record_components.ex
@@ -188,6 +188,25 @@ defmodule MusicLibraryWeb.RecordComponents do
     """
   end
 
+  attr :query, :string, required: true
+
+  def search_form(assigns) do
+    ~H"""
+    <form class="w-2/3" for={@query} phx-submit="search" phx-change="search">
+      <.input
+        type="search"
+        id={:query}
+        name={:query}
+        value={@query}
+        placeholder={gettext("Search")}
+        phx-debounce="500"
+        autocorrect="off"
+        autocapitalize="none"
+      />
+    </form>
+    """
+  end
+
   defp toggle_actions_menu(record_id) do
     JS.toggle(to: "#actions-#{record_id}")
     |> JS.toggle_class("pointer-events-none", to: "#records > li")
diff --git a/lib/music_library_web/live/collection_live/index.html.heex b/lib/music_library_web/live/collection_live/index.html.heex
index dcadc460..14d592be 100644
--- a/lib/music_library_web/live/collection_live/index.html.heex
+++ b/lib/music_library_web/live/collection_live/index.html.heex
@@ -1,18 +1,7 @@
 <div>
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
-      <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
-        <.input
-          type="search"
-          id={:query}
-          name={:query}
-          value={@record_list_params.query}
-          placeholder={gettext("Search")}
-          phx-debounce="500"
-          autocorrect="off"
-          autocapitalize="none"
-        />
-      </form>
+      <.search_form query={@record_list_params.query} />
       <.link patch={~p"/collection/import"}>
         <.button>{gettext("Import")}</.button>
       </.link>
diff --git a/lib/music_library_web/live/wishlist_live/index.html.heex b/lib/music_library_web/live/wishlist_live/index.html.heex
index 26a1d847..cb181437 100644
--- a/lib/music_library_web/live/wishlist_live/index.html.heex
+++ b/lib/music_library_web/live/wishlist_live/index.html.heex
@@ -1,18 +1,7 @@
 <div>
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
-      <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
-        <.input
-          type="search"
-          id={:query}
-          name={:query}
-          value={@record_list_params.query}
-          placeholder={gettext("Search")}
-          phx-debounce="500"
-          autocorrect="off"
-          autocapitalize="none"
-        />
-      </form>
+      <.search_form query={@record_list_params.query} />
       <.link patch={~p"/wishlist/import"}>
         <.button>{gettext("Import")}</.button>
       </.link>
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 8ddf176f..073b085c 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -113,8 +113,8 @@ msgstr ""
 msgid "Hang in there while we get back on track"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:17
-#: lib/music_library_web/live/wishlist_live/index.html.heex:17
+#: lib/music_library_web/live/collection_live/index.html.heex:6
+#: lib/music_library_web/live/wishlist_live/index.html.heex:6
 #, elixir-autogen, elixir-format
 msgid "Import"
 msgstr ""
@@ -231,8 +231,7 @@ msgstr ""
 msgid "Saving..."
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:10
-#: lib/music_library_web/live/wishlist_live/index.html.heex:10
+#: lib/music_library_web/components/record_components.ex:201
 #, elixir-autogen, elixir-format
 msgid "Search"
 msgstr ""
@@ -254,8 +253,8 @@ msgstr ""
 msgid "Show"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:23
-#: lib/music_library_web/live/wishlist_live/index.html.heex:23
+#: lib/music_library_web/live/collection_live/index.html.heex:12
+#: lib/music_library_web/live/wishlist_live/index.html.heex:12
 #, elixir-autogen, elixir-format
 msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records"
 msgstr ""