Programming Phoenix LiveView B.7: live_modal to live_component (page 101)

Community PragProg Customers
, ,
1

Programming Phoenix Liveview: live_modal to live_component (page 101)

Hi, First of all thank you for this awesome book.

I saw minor change for live_modal. If someone encounters an undefined function live_modal/2:

change from:

<%= if @live_action in [:new, :edit] do %>
  <%= live_modal PentoWeb.ProductLive.FormComponent,
    id: @product.id || :new,
    title: @page_title,
    action: @live_action,
    product: @product,
    return_to: Routes.product_index_path(@socket, :index) %>
<% end %>

to:

<%= if @live_action in [:new, :edit] do %>
  <%= live_component PentoWeb.ProductLive.FormComponent,
    id: @product.id || :new,
    title: @page_title,
    action: @live_action,
    product: @product,
    return_to: Routes.product_index_path(@socket, :index) %>
<% end %>

I created a new liveview project (0.17.10) and here’s the modal:

<%= if @live_action in [:new, :edit] do %>
  <.modal return_to={Routes.product_index_path(@socket, :index)}>
    <.live_component
      module={PentoWeb.ProductLive.FormComponent}
      id={@product.id || :new}
      title={@page_title}
      action={@live_action}
      product={@product}
      return_to={Routes.product_index_path(@socket, :index)}
    />
  </.modal>
<% end %>
2

Hello and thanks so much for sharing this for other readers! We’re working on the next Beta release over the summer and that new release will include all the upgraded code.

1 Like
3

Hi @SophieDeBenedetto, excited for the updates :pray:
Last quick question: will page 104 be updated also? because im following mix phx.gen.live (liveview v0.17.10) specifically this one:

# generate_web/pento/lib/pento_web/live/modal_component.ex

@impl true
def render(assigns) do
  ~H"""
  <div
      id={@id}
      class="phx-modal"
      phx-capture-click="close"
      phx-window-keydown="close"
      phx-key="escape"
      phx-target={@myself}
      phx-page-loading>
      <div class="phx-modal-content">
        <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
        <%= live_component @component, @opts %>
      </div>
    </div>
    """
end

this snippet looks similar to livedasboard modal component
Phoenix.LiveDashboard.ModalComponent
found it in deps/phoenix/live_dashboard/info/modal_component.ex

That’s all. Again your book’s explanation really helps especially crc! :pray:

4

Hello again! Yes we will be updating all of the modal-related code.

1 Like