How to remove elements using temporary assigns and phx-update?

Phoenix Forum Questions / Help
, ,
1

Hello, Elixir Forum

I’ve recently started playing around with Phoenix Live View and read about the use of temporary assigns in sockets to allow us to reduce the amount of memory used by the server. I’m trying to build a todo list and am using the list of tasks as a temporary assign. For my list of tasks component I’m using phx-update=“prepend”. In this scenario, adding and updating tasks work perfectly. However, I got stuck in the delete feature. If the option phx-update=“prepend” only adds and updates elements, how can I remove them from the list? If it can’t be done with the prepend option, how can I have the benefits of temporary assigns and be able to perform deletions at the same time?

Thanks in advanced :wink:

2 Likes
2

You could fetch the (new) to-do list and use phx-update="replace". Then on all the other actions you would go back to phx-update="prepend".

1 Like
3

I have been thinking about the same thing in the context of charting. Imagine a line plot of time series data that is updated every second, and I want to show the last 24 hours. For that use case I really do not want to replace all 86,400 data points every second. Temporary assigns seem like the obvious solution, except for the fact that I don’t think that I can delete the oldest data point after appending a new one. If there is a way to do that/work around it I would be really interested in that.

1 Like
4

In this case, where updating happens frequently and you have a large collection as opposed to a delete every once in a while on a rather small collection, I would remove the item within an updated method hook placed on the list. Something like:

updated() {
    this.el.firstElementChild.remove()
    // or
    this.el.lastElementChild.remove()
}

Since updated gets called every time you add a new item, it works beautifully as you only have to remove either the first or last depending if you either append or prepend.

To arbitrarily remove a specific item, you could add a data attribute to the hook passing in the selector of the node to delete: data-deleted="<%= @deleted %>"

2 Likes
5

I’m trying something similar with rendering a list of (unseen) notifications that can be marked as seen.
When I try rendering only unseen notifications using unless notification.seen it doesn’t update the list because of phx-update="prepend".

When I set a seen class applying display: none; to the notification hides, but I would prefer to remove it and hit the else statement rendering the “No notifications” message.

What this require fetching the whole notifications list again and update it by temporary setting phx-update="replace"?

Recommendations are welcome, thanks in advance!

<div id="notifications-dropdown">
  <%= if Enum.any? @notifications do %>
  
    <ul phx-update="prepend" id="notification-list">
      <%= for notification <- @notifications do %>
        <%= unless notification.seen do %>
          <li id="notification-#{notification.id}" class="notification">
            <p><%= notification.message %></p>
            <button phx-click="toggle-seen"
                    phx-value-id="<%= notification.id %>">
              Mark as seen
            </button>
          </li>
        <% end %>
      <% end %>
    </ul>

  <% else %>
    <p>No notifications</p>
  <% end %>
</div>

def handle_event("toggle-seen", %{"id" => notification_id}, socket) do
  notification = Repo.get(Notification, notification_id)

  {:ok, notification} =
    Notifications.toggle_seen_status(
      notification,
      %{seen: !notification.seen},
      socket.assigns.user
    )
    
  socket =
    update(
      socket,
      :notifications,
      fn notifications -> [notification | notifications] end
    )

  {:noreply, socket}
end
1 Like