Extract grid component from artist view

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

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}
 

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">
+  <.grid
-    <h2 class="flex items-end font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+    :if={Enum.any?(@artist_records.collection)}
-      {gettext("Collection")}
+    title={gettext("Collection")}
-      <span class="ml-2">
+    id="collection"
-        <span class="sr-only">
+    records={@artist_records.collection}
-          {gettext("Number of albums")}
+    record_path={fn record -> ~p"/collection/#{record}" end}
-        </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>
 
-  <div :if={@artist_records.wishlist !== []} class="mt-4">
+  <.grid
-    <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+    :if={Enum.any?(@artist_records.wishlist)}
-      {gettext("Wishlist")}
+    title={gettext("Wishlist")}
-      <span>
+    id="wishlist"
-        <span class="sr-only">
+    records={@artist_records.wishlist}
-          {gettext("Number of albums")}
+    record_path={fn record -> ~p"/wishlist/#{record}" end}
-        </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>
 </div>

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/record_components.ex:41
-#: lib/music_library_web/live/artist_live/show.html.heex:136
 #, 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 ""