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
-     |> assign(:artist_records, grouped_artist_records)
+     |> stream(:collection_records, grouped_artist_records.collection)
+     |> 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>