quentin-bettoum
Synced list items and table actions with the new LiveView streams
Hello,
I am building a webapp using Phoenix/LiveView where I have a list of items that I want to keep synchronized for all the users viewing it, and I also want to prevent concurrent editing.
I managed to do this by using a mix of Presence and Endpoint.broadcast.
The new LiveView streams are very useful to avoid unecessary queries, but I have one problem with it.
I want to disable the actions of each item that is already being edited and re-enable them when the user is done.
The problem I have with streams is, it seems that there is no way to refresh the actions column without using stream_insert, even when the item didn’t change.
There are cases where I want to refresh this column and where I don’t necessary have an item to submit to stream_insert.
For exemple, when a user start editing, I want to disable the actions of this item in the list, so I usually use stream_insert with the retrieved item by the user when he loads the changeset.
form_component.ex
defp save_fruit(socket, :edit, fruit_params) do
case Fruits.update_fruit(socket.assigns.fruit, fruit_params) do
{:ok, fruit} ->
notify_parent({:saved, fruit})
# in my code, this will trigger a broadcast so all users connected
# to this liveview will get their list refreshed with an updated state of
# the table actions for this item
But when a user closes his form without submitting it, or when he closes his browser tab, the only way I found to refresh the table actions is to fetch the item from the database (by using the id of the item I stored in the Presence metas).
I tried to change the table component by putting a phx-update="replace" on the actions <td>, but unfortunately it’s not working. I guess nesting different phx-update is not possible (the parent <tbody> is already set to "stream").
I made an example project available here so you can see how I manage to do this at the moment.
You can try it by just creating an account and by adding/editing/deleting fruits with multiple browser tabs opened. The list and its actions are kept synchronized, but I feel the way I did it is not ideal.
Any idea on how to improve this would be appreciated.
Marked As Solved
quentin-bettoum
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









