From 7cd1e8e9448e2e3bb1e7f7488430fe6824037ff0 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Thu, 2 Jan 2025 23:32:05 +0000
Subject: [PATCH] Extract grid component from artist view

---
 .../live/artist_live/record_components.ex     |  60 ++++++++++
 .../live/artist_live/show.ex                  |   1 +
 .../live/artist_live/show.html.heex           | 104 +++---------------
 priv/gettext/default.pot                      |  18 ++-
 4 files changed, 83 insertions(+), 100 deletions(-)
 create mode 100644 lib/music_library_web/live/artist_live/record_components.ex

diff --git a/lib/music_library_web/live/artist_live/record_components.ex b/lib/music_library_web/live/artist_live/record_components.ex
new file mode 100644
index 00000000..34bd2161
--- /dev/null
+++ b/lib/music_library_web/live/artist_live/record_components.ex
@@ -0,0 +1,60 @@
+defmodule MusicLibraryWeb.ArtistLive.RecordComponents do
+  use MusicLibraryWeb, :live_component
+
+  alias MusicLibrary.Records
+
+  attr :records, :list, required: true
+  attr :title, :string, required: true
+  attr :id, :string, required: true
+  attr :record_path, :any, required: true
+
+  def grid(assigns) do
+    ~H"""
+    <div class="mt-4">
+      <h2 class="flex items-end font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+        {@title}
+        <span class="ml-2">
+          <span class="sr-only">
+            {gettext("Number of records")}
+          </span>
+          <.round_badge text={Enum.count(@records)} />
+        </span>
+      </h2>
+      <%!-- TODO: replace with OSS version --%>
+      <ul
+        id={@id}
+        role="list"
+        class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
+      >
+        <li :for={record <- @records} class="relative">
+          <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
+            <img
+              alt={record.title}
+              src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
+              class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
+            />
+            <button
+              type="button"
+              class="absolute inset-0 focus:outline-none"
+              phx-click={JS.navigate(@record_path.(record))}
+            >
+              <span class="sr-only">{gettext("View details")}</span>
+            </button>
+          </div>
+          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
+            {record.title}
+          </p>
+          <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+            {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
+              record.type
+            )}
+          </p>
+          <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+            {Records.Record.format_release(record.release)}
+          </p>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+end
diff --git a/lib/music_library_web/live/artist_live/show.ex b/lib/music_library_web/live/artist_live/show.ex
index 78ea2492..9e3f52be 100644
--- a/lib/music_library_web/live/artist_live/show.ex
+++ b/lib/music_library_web/live/artist_live/show.ex
@@ -1,5 +1,6 @@
 defmodule MusicLibraryWeb.ArtistLive.Show do
   use MusicLibraryWeb, :live_view
+  import MusicLibraryWeb.ArtistLive.RecordComponents
 
   alias MusicLibrary.{Artists, Records}
 
diff --git a/lib/music_library_web/live/artist_live/show.html.heex b/lib/music_library_web/live/artist_live/show.html.heex
index 214f2cc3..4c95fbd5 100644
--- a/lib/music_library_web/live/artist_live/show.html.heex
+++ b/lib/music_library_web/live/artist_live/show.html.heex
@@ -59,95 +59,19 @@
     </details>
   </.async_result>
 
-  <div :if={@artist_records.collection !== []} class="mt-4">
-    <h2 class="flex items-end font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
-      {gettext("Collection")}
-      <span class="ml-2">
-        <span class="sr-only">
-          {gettext("Number of albums")}
-        </span>
-        <.round_badge text={Enum.count(@artist_records.collection)} />
-      </span>
-    </h2>
-    <%!-- TODO: replace with OSS version --%>
-    <ul
-      id="collection"
-      role="list"
-      class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
-    >
-      <li :for={record <- @artist_records.collection} class="relative">
-        <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
-          <img
-            alt={record.title}
-            src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
-            class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
-          />
-          <button
-            type="button"
-            class="absolute inset-0 focus:outline-none"
-            phx-click={JS.navigate(~p"/collection/#{record}")}
-          >
-            <span class="sr-only">{gettext("View details")}</span>
-          </button>
-        </div>
-        <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
-          {record.title}
-        </p>
-        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
-          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
-            record.type
-          )}
-        </p>
-        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
-          {Records.Record.format_release(record.release)}
-        </p>
-      </li>
-    </ul>
-  </div>
+  <.grid
+    :if={Enum.any?(@artist_records.collection)}
+    title={gettext("Collection")}
+    id="collection"
+    records={@artist_records.collection}
+    record_path={fn record -> ~p"/collection/#{record}" end}
+  />
 
-  <div :if={@artist_records.wishlist !== []} class="mt-4">
-    <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
-      {gettext("Wishlist")}
-      <span>
-        <span class="sr-only">
-          {gettext("Number of albums")}
-        </span>
-        <.round_badge text={Enum.count(@artist_records.wishlist)} />
-      </span>
-    </h2>
-    <%!-- TODO: replace with OSS version --%>
-    <ul
-      id="wishlist"
-      role="list"
-      class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
-    >
-      <li :for={record <- @artist_records.wishlist} class="relative">
-        <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zing-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
-          <img
-            alt={record.title}
-            src={~p"/covers/#{record.id}?vsn=#{record.cover_hash}"}
-            class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
-          />
-          <button
-            type="button"
-            class="absolute inset-0 focus:outline-none"
-            phx-click={JS.navigate(~p"/wishlist/#{record}")}
-          >
-            <span class="sr-only">{gettext("View details")}</span>
-          </button>
-        </div>
-        <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
-          {record.title}
-        </p>
-        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
-          {Records.Record.format_long_label(record.format)} · {Records.Record.type_long_label(
-            record.type
-          )}
-        </p>
-        <p class="pointer-events-none block text-sm font-medium text-zinc-500">
-          {Records.Record.format_release(record.release)}
-        </p>
-      </li>
-    </ul>
-  </div>
+  <.grid
+    :if={Enum.any?(@artist_records.wishlist)}
+    title={gettext("Wishlist")}
+    id="wishlist"
+    records={@artist_records.wishlist}
+    record_path={fn record -> ~p"/wishlist/#{record}" end}
+  />
 </div>
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 9aa28f17..5184b058 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -306,7 +306,7 @@ msgid "Welcome to your Music Library"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:20
-#: lib/music_library_web/live/artist_live/show.html.heex:110
+#: lib/music_library_web/live/artist_live/show.html.heex:72
 #: lib/music_library_web/live/wishlist_live/index.ex:83
 #: lib/music_library_web/live/wishlist_live/show.ex:129
 #, elixir-autogen, elixir-format
@@ -407,7 +407,7 @@ msgstr ""
 msgid "No MB ID"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.ex:39
+#: lib/music_library_web/live/artist_live/show.ex:40
 #: lib/music_library_web/live/collection_live/show.ex:113
 #, elixir-autogen, elixir-format
 msgid "Details"
@@ -433,8 +433,7 @@ msgstr ""
 msgid "Dev dashboard"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:90
-#: lib/music_library_web/live/artist_live/show.html.heex:136
+#: lib/music_library_web/live/artist_live/record_components.ex:41
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""
@@ -489,12 +488,6 @@ msgstr ""
 msgid "Refresh cover"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:67
-#: lib/music_library_web/live/artist_live/show.html.heex:113
-#, elixir-autogen, elixir-format
-msgid "Number of albums"
-msgstr ""
-
 #: lib/music_library_web/live/stats_live/index.html.heex:3
 #, elixir-autogen, elixir-format
 msgid "Records"
@@ -519,3 +512,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Errors"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/record_components.ex:18
+#, elixir-autogen, elixir-format
+msgid "Number of records"
+msgstr ""