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!