Recommended way to open a LiveComponent Modal *from* another LiveComponent?

[srpablo]

Hi friends!

I’m building my first app with LiveView, and the scaffolding generates that really nice live_modal to render the FormComponent of my resources so one can :new and :edit it from views like the :index or :show

With my app growing, I’m wanting to make a different LiveComponent for “list of my resource” (since it shows up in many places — the index view, but also of subresources and parent resource pages have “associated X’s” in a list) and I’d like to preserve the “edit/create from here” functionality.

Unless I’m misunderstanding, if I make the component stateless, then every LiveView that includes it will need to handle actions like edit and delete, potentially duplicating a lot of logic. But if I make the component stateful, I have to do a “threading” of @live_action from the parent to the child while also targeting events to @myself, and losing the URL-ability of live_patch or live_redirect, and maybe adjusting live_modal since it has a return_to: field that’ll depend on who called it (and adjusting the router to add an edit action…).

I guess, as I’m breaking out my first LiveComponent, I wonder if I’m missing a simpler way to architect this, or if I’m trying to do something unreasonable?

Thanks for any help, happy to elaborate if this isn’t clear

[josevalim]

Your intuition is correct: the parent LiveView is the one that coordinates the components, so if you want to open up a component from another component, you need to ask the LiveView to do so, either by changing the URL or by sending it a message.

[i-n-g-m-a-r]

Hi José,

After quite some time I am revisiting LiveView / LiveComponents.
I am a little surprised that apparently this is the only recent post on the subject:
https://elixirforum.com/search?q=livecomponent

Also your answer surprises me.
The project I am revisiting uses a lot of deeply nested components while completely ignoring the parent LiveView internally.
The parent LiveView is used as an entrypoint / router.

Has the LiveComponent concept changed?
Is it still being used / developed?

[i-n-g-m-a-r]

@i-n-g-m-a-r

Has the LiveComponent concept changed?
Is it still being used / developed?

Can someone please answer this?

To me the question put forward by srpablo is not so much about sending a :redirect to self() which is easy.
It’s more about component state and how to get state back into nested components.
Patching equals state lost except for the component sending the redirect.
On mount components do not receive anything useful.
So the “parent” component, the one directly communicating with the LiveView has to manage state for all nested components.
The parent has to know everything about it’s child components.
To me this is not how components should work.
Children should be able to implement details without parents knowing anything about it.

Please correct me if I am wrong, but to me the stateful components are not at all stateful.
Technically you can push state into children, but practically children would want to pull state (on mount) which is difficult because it’s hidden from them.