Handling item feeds the right way

Hi guys!

I have an implemented solution for handling a social feed, and it’s kinda working, but I would appreciate some feedback. Am I doing this right?

So I have a list/feed of items, with cursor based pagination (10 items per load), with this markup:

<div id="items" phx-update="<%= @update_action %>">
  <%= for item <- @items do %>
    <div id="item-<%= item.id %>">...</div>
  <% end %>
</div>
def mount(_params, session, socket) do
    if connected?(socket), do: Client.subscribe("items")

    {:ok, socket, temporary_assigns: [items: []]}
  end

update_action is “replace” by default (assigned at index action)

Load more: sending an event with phx-click, assigning the update_action with “append”

{:noreply, update(socket, :items, fn items -> items ++ next_items end)}

Load new items: sending an event with phx-click, assigning the update_action with “prepend”

{:noreply, update(socket, :items, fn items -> new_items ++ items end)}

Toggling items (filtering): live_patch with params to index action, where the update_action is assigned back to “replace”

<%= live_patch "Solved", to: Routes.item_index_path(@socket, :index, toggle_params(@params, :status, :solved)) %>

This is all working, with one exception: if there is an empty result after the filtering, the view remains unchanged. So if I assign [] to items, with phx-update “replace”, then it is ignored by the DOM patching it seems… I solved this by assigning total_count to 0, and adding an “if” block, but I’m pretty sure that there is a better way to do this. Changing the container div id to “items-#{@counter}” doesn’t help.

Any ideas? Am I doing this wrong or am I missing something important here? Thanks for your help and all the posts!

My understanding of the issue is: you are assigning an empty list to items on temporary assigns, and when the result of the filtering is also an empty list, LiveView does not detect any changes. I think you can either go with your current solution or assign a different variable to items on temporary assigns (something that you do not expect from filtered results)

1 Like

I have changed the temporary_assigns items (so it is not an empty list now) and it is working as it should! I think that this is more elegant than my solution was, and I will stick with this solution for sure.

Thank You @avergin!

1 Like