Hi,

My background in components composition is mostly with DDAU in Ember.js. So it naturally serves me as a jump pad as I wrap my head around Live View and wonder how close my mental model is to the idiomatic LiveView approach.

Let me illustrate my thinking process with an example of breaking a modal component further down into smaller components.

I have a Dashboard LiveView within which there is a UploadModal that hosts PatientSelector component.

upload components breakdown897×514 22.8 KB

PatientSelector is a typical typeahead: the clinician types patient names and sees a list of patients whose names match his query.
The selected patient becomes a value of that typeahead and must be propagated to the parent UploadModal component.

                                                                                               
      ───────────────────────────────Chronological flow─────────────────────────────────▶     
                                                                                              
                                                                                              
                                                                                              
     ┌───────────────────────────────────────────────────────────────────────────────────┐    
     │                            Upload Modal Live Component                            │    
     │                                                                                   │    
     └─────────────────────────────────────────────▲────────────────────────────┬────────┘    
            │                                      │                            │             
            │                                      │                            │             
       destination                                 │                            │             
 for`on_selected` event                sends `patient_selected`    updates `selected_patient` 
 and `selected_patient`                 event to `on_selected`                  │             
        property                                target                          │             
            │                                      │                            │             
            │                                      │                            │             
      ┌─────▼──────────────────────────────────────┴────────────────────────────▼────────┐    
      │                          PatientSelector Live Component                          │    
      │                                                                                  │    
      └──────────────────────────────────────────────────────────────────────────────────┘    
                               ▲                                                              
                               │                                                              
                               │                                                              
                     User selects patient                                                     
                               │                                                              
                               │                                                              
                               │                                                              
                               │                                                              
                     ┌───────────────────┐                                                    
                     │       User        │                                                    
                     └───────────────────┘                                                                                   

The cornerstone of this component is an input which triggers a patient lookup

 <input
  phx-debounce="100"
  phx-focus={show_results()}
  phx-blur={hide_results()}
  name="search"
  type="text"
  autocomplete="off"
  placeholder="Search by patient name or email"
   value={@selected_patient.name}
/>

and then there is an autocompletion list in which items are entry points to patient selection:

<ul id="upload-modal-patient-selector-results" class="rounded">
  <%= for patient <- @found_patients do %>
    <li
      phx-click="patient_selected"
      phx-value-selected-patient-id={@patient.id}
      phx-target={@myself}
   >

As I understand it - I can’t assign a struct to phx-value-*, so instead, I’m setting selected patient id phx-value-selected-patient-id={@patient.id} .

Then, since PatientSelector keeps a list of found_patients in its state, I can pull Patient from that list in the event handler and send it to the parent component

def handle_event("patient_selected", %{"selected-patient-id" => selected_patient_id}, socket) do
  selected_patient = Enum.find(socket.assigns.found_patients, &(&1.id == selected_patient_id))

  send_update(socket.assigns.on_selected.module,
    id: socket.assigns.on_selected.id,
    selected_patient: selected_patient,
    event: :patient_selected
  )

  {:noreply, socket}
end

Now, because selected_patient is passed to the PatientSelector, when I update it in the parent component, the child component also gets it.

<!-- somewhere in the parent component template --> 
<.live_component module={PatientSelector} id="patient-selector-component" selected_patient={@selected_patient} on_selected={%{module: __MODULE__, id: @id}} current_user={@current_user} />

defmodule UploadModal do
  use ObfuscatedWeb, :live_component
  alias PatientSelector

  def mount(socket) do
    {:ok, assign(socket, :selected_patient, %{name: nil})}
  end

  def update(%{event: :patient_selected, selected_patient: selected_patient}, socket) do
    {:ok, assign(socket, :selected_patient, selected_patient)}
  end

  def update(assigns, socket) do
    {:ok, assign(socket, assigns)}
  end
end

It all works fine, but I wonder if I’m going against the LV programming model with this or not. The primary motivation behind this wiring is to make the upload modal reusable without exposing its wiring/implementation details to hosting LiveView.

Pinging @chrismccord like he’s not busy enough already

UPDATE: I’m not sure how it happens but after patient being selected for the first time update in the parent component is not triggered, but I still can see selected patient name in the parent component’s template.