Phoenix Live View live navigation with `patch` issue in liveview 0.20.0

Phoenix Forum Questions / Help
, , ,
1

Out of curiosity, I updated my live_view from 0.19.5 to the current 0.20.0 and quickly realized that my patch on my <.link> is not re-rendering/updating my live view.

<.link
    patch={
      ~p"/budgets?#{%{@options | sort_by: @sort_by, sort_order: next_sort_order(@options.sort_order)}}"
    }
>
  <%= render_slot(@inner_block) %>
  <%= sort_indicator(@sort_by, @options) %>
</.link>

I quickly checked with IO.inspect inside my handle_params to see if my options (and my budgets) were changing, and they were.

here’s my handle_params

  def handle_params(params, _uri, socket) do
    current_user = socket.assigns.current_user
    sort_by = valid_sort_by(params)
    sort_order = valid_sort_order(params)
    page = param_to_integer(params["page"], 1)
    per_page = param_to_integer(params["per_page"], 36)
    date = Date.utc_today()
    year = param_to_integer(params["year"], date.year)
    month = param_to_integer(params["month"], date.month)

    options = %{
      sort_by: sort_by,
      sort_order: sort_order,
      page: page,
      per_page: per_page,
      year: year,
      month: month
    }

    budgets = Keihi.list_budgets(current_user, options)

   # both options and budgets change per click of my <.link> tag
   # IO.inspect(options, label: "options")
   # IO.inspect(budgets, label: "budgets")

    socket =
      socket
      |> stream(:budgets, budgets)
      |> assign(:selected_budget, select_budget(budgets, param_to_integer(params["id"], 0)))
      |> assign(:options, options)
  
    {:noreply, socket}
end

I also tried to set the stream to reset likeso:

 |> stream(:budgets, budgets, reset: true)

with no changes.

Any clues? Of course I can just stay on 0.19.5, but I’m wondering if I’m doing something wrong here.

2

Hmm, that’s odd it’s not re-rendering after re-streaming with reset: true…

Could you share more of the template, especially around where the stream is consumed?

3

Thanks for the reply.

here’s how I use the stream within my template:

div id="budgets" phx-update="stream" class="py-4 flex flex-col sm:flex-row flex-wrap gap-2">
  <.link
    :for={{budget_id, budget} <- @streams.budgets}
    id={budget_id}
    patch={~p"/budgets/#{budget}?#{@options}"}
    class="w-full sm:w-fit"
  >
    <div class={"
      w-full sm:w-[23rem] h-[200px] flex flex-col justify-between budget-card block
      max-w-sm p-6 border rounded-lg shadow border-gray-700 hover:bg-gray-700
    "}>
      <p class="mb-2 text-1xl font-bold tracking-tight text-white overflow-scroll">
        <%= @budget.description %>
      </p>

      <div class="flex justify-between gap-4">
        <p class="font-normal text-gray-400 text-end">
          <%= @budget.created_at %>
        </p>

        <p class="font-normal text-gray-400 text-end">
          <%= @budget.cost %>円
        </p>
      </div>
    </div>
  </.link>
</div>

not sure what else to look at/consider :man_bowing:t2:

4

Take another look at the example below from the stream/4 docs and how it uses song within the :for loop/comprehension.

<table>
  <tbody id="songs" phx-update="stream">
    <tr
      :for={{dom_id, song} <- @streams.songs}
      id={dom_id}
    >
      <td><%= song.title %></td>
      <td><%= song.duration %></td>
    </tr>
  </tbody>
</table>
1 Like
5

That was just my dumb mistake in copying. It doesn’t use the @ with budget.

<div class={"
  w-full sm:w-[23rem] h-[200px] flex flex-col justify-between budget-card block
  max-w-sm p-6 border rounded-lg shadow border-gray-700 hover:bg-gray-700
  #{if @is_current_users_budget do "bg-[#111827]" else "bg-[#111827]" end}
"}>
  <h6 class="mb-2 text-1xl font-bold tracking-tight text-white overflow-scroll">
    <%= budget.description %>
  </h6>

  <div class="flex justify-between gap-4">
    <p class="font-normal text-gray-400 text-end">
      <%= budget.created_at %>
    </p>

    <p class="font-normal text-gray-400 text-end">
      <%= budget.cost %>円
    </p>
  </div>
</div>
6

Any clues??

here again the complete code:

<%!-- live.html.heex --%>

<div
  id="budget_stream"
  phx-update="stream"
  class="py-4 flex flex-col sm:flex-row flex-wrap gap-2"
  >
  <.link
    :for={{budget_id, budget} <- @streams.budgets}
    id={"budgets-#{budget_id}"}
    patch={~p"/budgets/#{budget}?#{@options}"}
    class="w-full sm:w-fit"
  >
    <div class={"
      w-full sm:w-[23rem] h-[200px] flex flex-col justify-between budget-card block
      max-w-sm p-6 border rounded-lg shadow border-gray-700 hover:bg-gray-700
    "}>
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">
        <%= String.capitalize(budget.title) %>
      </h5>
  
      <h6 class="mb-2 text-1xl font-bold tracking-tight text-white overflow-scroll">
        <%= budget.description %>
      </h6>
  
      <div class="flex justify-between gap-4">
        <p class="font-normal text-gray-400 text-end">
          <%= budget.created_at %>
        </p>
  
        <p class="font-normal text-gray-400 text-end">
          <%= budget.cost %>円
        </p>
      </div>
    </div>
  </.link>
</div>

<div class="flex flex-col sm:flex-row items-center gap-4">
  <%= confirmed_user_add_budget(%{confirmed_user: @confirmed_user, options: @options}) %>

  <.sort_link sort_by={:category_id} options={@options}>
    Category
  </.sort_link>

  <.sort_link sort_by={:cost} options={@options}>
    Cost
  </.sort_link>

  <.sort_link sort_by={:inserted_at} options={@options}>
    Created
  </.sort_link>
</div>

<%!-- live.ex --%>
  def handle_params(params, _uri, socket) do
    current_user = socket.assigns.current_user
    sort_by = valid_sort_by(params)
    sort_order = valid_sort_order(params)

    page = param_to_integer(params["page"], 1)
    per_page = param_to_integer(params["per_page"], 36)

    date = Date.utc_today()

    year = param_to_integer(params["year"], date.year)
    month = param_to_integer(params["month"], date.month)

    options = %{
      sort_by: sort_by,
      sort_order: sort_order,
      page: page,
      per_page: per_page,
      year: year,
      month: month
    }

    budgets = Keihi.list_budgets(current_user, options)

    socket =
      socket
      |> stream(:budgets, budgets, reset: true)
      |> assign(:selected_budget, select_budget(budgets, param_to_integer(params["id"], 0)))
      |> assign(:options, options)

    {:noreply, socket}
  end

<!-- sort link -->
  def sort_link(assigns) do
    ~H"""
    <.link
      class="px-4 w-32 text-center"
      patch={
        ~p"/budgets?#{%{@options | sort_by: @sort_by, sort_order: next_sort_order(@options.sort_order)}}"
      }
    >
      <%= render_slot(@inner_block) %>
      <%= sort_indicator(@sort_by, @options) %>
    </.link>
    """
  end

checking budgets inside my handle_params, i can see that the budgets assign does change when I click on any one of my sort_links, but again it doesn’t re-render it on the client.

this works when I’m on liveview 0.19.5 however…

7

It might be related to this:

1 Like
8

seems to be the exact situation I faced. Thanks for the link!