quentin-bettoum

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

quentin-bettoum

The problem has been discussed and solved in this topic

Where Next?

Popular in Questions Top

beno
I will often find my self writing things similar to: case some_value do nil -&gt; something() "" -&gt; something() _ -&gt; somethi...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call t...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
AstonJ
We’ve put together this wiki for Phoenix LiveView - please feel free to add any info you feel is worth including. What is Phoenix LiveV...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54250 245
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

We're in Beta

About us Mission Statement