Convert records in artist page to a stream

lib/music_library_web/live/artist_live/record_components.ex

@@ -4,6 +4,7 @@ defmodule MusicLibraryWeb.ArtistLive.RecordComponents do
   alias MusicLibrary.Records
 
   attr :records, :list, required: true
+  attr :records_count, :integer, required: true
   attr :title, :string, required: true
   attr :id, :string, required: true
   attr :record_path, :any, required: true
@@ -17,16 +18,17 @@ defmodule MusicLibraryWeb.ArtistLive.RecordComponents do
           <span class="sr-only">
             {gettext("Number of records")}
           </span>
-          <.round_badge text={Enum.count(@records)} />
+          <.round_badge text={@records_count} />
         </span>
       </h2>
       <%!-- TODO: replace with OSS version --%>
       <ul
         id={@id}
+        phx-update="stream"
         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">
+        <li :for={{id, record} <- @records} id={id} 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}

lib/music_library_web/live/artist_live/show.ex

@@ -22,8 +22,10 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
      socket
      |> assign(:nav_section, :artists)
      |> assign(:artist, artist)
-     # TODO: make it a stream
+     |> stream(:collection_records, grouped_artist_records.collection)
-     |> assign(:artist_records, grouped_artist_records)
+     |> stream(:wishlist_records, grouped_artist_records.wishlist)
+     |> assign(:collection_records_count, Enum.count(grouped_artist_records.collection))
+     |> assign(:wishlist_records_count, Enum.count(grouped_artist_records.wishlist))
      |> assign_async(:artist_info, fn ->
        with {:ok, artist_info} <- Artists.get_artist_info(artist) do
          {:ok, %{artist_info: artist_info}}

lib/music_library_web/live/artist_live/show.html.heex

@@ -60,18 +60,20 @@
   </.async_result>
 
   <.grid
-    :if={Enum.any?(@artist_records.collection)}
+    :if={@collection_records_count > 0}
     title={gettext("Collection")}
     id="collection"
-    records={@artist_records.collection}
+    records={@streams.collection_records}
+    records_count={@collection_records_count}
     record_path={fn record -> ~p"/collection/#{record}" end}
   />
 
   <.grid
-    :if={Enum.any?(@artist_records.wishlist)}
+    :if={@wishlist_records_count > 0}
     title={gettext("Wishlist")}
     id="wishlist"
-    records={@artist_records.wishlist}
+    records={@streams.wishlist_records}
+    records_count={@wishlist_records_count}
     record_path={fn record -> ~p"/wishlist/#{record}" end}
   />
 </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:72
+#: lib/music_library_web/live/artist_live/show.html.heex:73
 #: lib/music_library_web/live/wishlist_live/index.ex:83
 #: lib/music_library_web/live/wishlist_live/show.ex:130
 #, elixir-autogen, elixir-format
@@ -407,7 +407,7 @@ msgstr ""
 msgid "No MB ID"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.ex:40
+#: lib/music_library_web/live/artist_live/show.ex:42
 #: lib/music_library_web/live/collection_live/show.ex:113
 #, elixir-autogen, elixir-format
 msgid "Details"
@@ -433,7 +433,7 @@ msgstr ""
 msgid "Dev dashboard"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/record_components.ex:41
+#: lib/music_library_web/live/artist_live/record_components.ex:43
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""
@@ -513,7 +513,7 @@ msgstr ""
 msgid "Errors"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/record_components.ex:18
+#: lib/music_library_web/live/artist_live/record_components.ex:19
 #, elixir-autogen, elixir-format
 msgid "Number of records"
 msgstr ""