update phoenix and switch to streams

Author: okkdev

lib/chuko_web/components/components.ex

@@ -4,7 +4,7 @@ defmodule ChukoWeb.Components do
   def item(assigns) do
     ~H"""
     <div
-      id={"item-#{@item.id}"}
+      id={@id}
       class="relative flex flex-col overflow-hidden bg-white border border-gray-200 rounded-lg shadow-xl group"
     >
       <div class="overflow-hidden rounded-lg shadow-md aspect-w-3 h-96">

lib/chuko_web/live/home_live.ex

@@ -39,7 +39,7 @@ defmodule ChukoWeb.HomeLive do
             <.loading />
           <% @query == "" && @items == [] -> %>
             <div class="py-16 text-center">
-              try searching something 🕵️
+              search something 🕵️
             </div>
           <% @query != "" && @items == [] -> %>
             <div class="py-16 text-center">
@@ -61,18 +61,19 @@ defmodule ChukoWeb.HomeLive do
                 </select>
               </form>
             </div>
+          <% :otherwise -> %>
             <%!-- Actual product container --%>
-            <%= if @sorting do %>
-              <.loading />
-            <% else %>
+            <%= unless @sorting do %>
               <div
                 id="infinite-scroll-body"
-                phx-update="append"
+                phx-update="stream"
                 class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:grid-cols-3 lg:gap-x-8"
               >
-                <.item :for={item <- @page_items} item={item} />
+                <.item :for={{id, item} <- @streams.page_items} item={item} id={id} />
               </div>
               <div id="infinite-scroll-marker" phx-hook="InfiniteScroll" data-page={@page}></div>
+            <% else %>
+              <.loading />
             <% end %>
         <% end %>
       </div>
@@ -83,20 +84,22 @@ defmodule ChukoWeb.HomeLive do
   @impl true
   def mount(_params, _session, socket) do
     socket =
-      assign(socket,
+      socket
+      |> assign(
         query: "",
         items: [],
         page: 1,
         pages: 0,
         searching: false,
         sorting: false
       )
+      |> stream(:page_items, [], dom_id: &"item-#{&1.id}")
 
     if connected?(socket) do
       Phoenix.PubSub.subscribe(Chuko.PubSub, "session_#{socket.id}")
     end
 
-    {:ok, socket, temporary_assigns: [page_items: []]}
+    {:ok, socket}
   end
 
   @impl true
@@ -117,11 +120,12 @@ defmodule ChukoWeb.HomeLive do
       )
       when page < pages do
     socket =
-      assign(socket,
+      socket
+      |> assign(
         items: items,
-        page_items: Enum.at(items, page, []),
         page: page + 1
       )
+      |> insert_page_items(Enum.at(items, page, []))
 
     {:noreply, socket}
   end
@@ -170,12 +174,13 @@ defmodule ChukoWeb.HomeLive do
   @impl true
   def handle_info({:items_sorted, %{items: items}}, socket) do
     socket =
-      assign(socket,
+      socket
+      |> assign(
         items: items,
-        page_items: Enum.at(items, 0, []),
         page: 1,
         sorting: false
       )
+      |> insert_page_items(Enum.at(items, 0, []))
 
     {:noreply, socket}
   end
@@ -188,13 +193,15 @@ defmodule ChukoWeb.HomeLive do
       |> Enum.chunk_every(9)
 
     socket =
-      assign(socket,
+      socket
+      |> assign(
         items: items,
         page_items: Enum.at(items, 0, []),
         page: 1,
         pages: Enum.count(items),
         searching: false
       )
+      |> insert_page_items(Enum.at(items, 0, []))
 
     {:noreply, socket}
   end
@@ -212,4 +219,8 @@ defmodule ChukoWeb.HomeLive do
 
     assign(socket, query: query, page_title: query, searching: true)
   end
+
+  defp insert_page_items(socket, pages) do
+    Enum.reduce(pages, socket, &stream_insert(&2, :page_items, &1))
+  end
 end

mix.exs

@@ -32,7 +32,7 @@ defmodule Chuko.MixProject do
   # Type `mix help deps` for examples and options.
   defp deps do
     [
-      {:phoenix, "~> 1.7.0-rc.0", override: true},
+      {:phoenix, "~> 1.7.2", override: true},
       {:phoenix_ecto, "~> 4.4"},
       {:ecto_sql, "~> 3.6"},
       {:ecto_sqlite3, ">= 0.0.0"},