Hi,
I’m building a wizard that lets users assemble a package of compatible hardware parts.
The user can select the hardware he wants from a select menu. When that happens, I update the internal state of the LiveComponent named WizardLive.Form. This should be the source of truth.
This is defined in WizardLive.Edit
<.live_component
module={EasySolutionsWeb.WizardLive.Form}
summary={@summary}
id="form"
step={@step}
sub_step={@sub_step}
/>
And within WizardLive.Form:
<%= if @step == "camera" do %>
<.live_component
id="camera"
module={ComponentSelector}
context="camera"
form={@form}
selectable_options={Cameras.list_approved_cameras()}
/>
<% end %>
This is the function that is triggered within ComponentSelector when Add is clicked.
def handle_event("add_component", %{"value" => context}, socket) do
IO.puts("add_component: #{context}")
component_id = socket.assigns.component_id_selected
socket =
if component_id == nil do
{:noreply, socket}
else
component =
case context do
"camera" ->
Cameras.get_camera!(component_id)
end
components = socket.assigns.selected_components
# We want to tell the parent component that the selected components have changed.
# Tell WizardLive.Form to update its assigns with the newly selected components.
send self(), {:selected_components, [component | components]}
# ^ Iterated to use send_update. Please see later posts in this thread. :-)
end
{:noreply, socket}
end
I then defined a handle_event in ComponentSelector’s parent (WizardLive.Form)
def handle_info( {:selected_components, list}, socket) do
IO.inspect(list)
{:noreply, socket}
end
But that triggers this error:
** (MatchError) no match of right hand side value: {:selected_components, [%MyApp.Cameras.Camera{meta: ecto.Schema.Metadata…
I’ve tried to put the handle_event function in both ComponentSelector’s parent, the WizardLive.Form and the main LiveView (Wizard.Summary.Edit).
The structure is as follows:
Wizard.Summary.Edit
This is the parent LiveView that renders .livecomponent module=Form
WizardLive.Form
This is a LiveComponent.
Within Form’s render I do .livecomponent module=ComponentSelector.
ComponentSelector
This is also a LiveComponent and is where I try to send the message that I want to be received in WizardLive.Form.
How can I craft the message sent from ComponentSelector so that WizardLive.Form receives it?
