trestrantham

LiveView flash assigns not available in child LiveComponent

I have a LiveView that renders a LiveComponent via an leex template:

defmodule MyAppWeb.ThingEditView do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    MyLiveView.render("edit.html", assigns)
  end

  def handle_info({:update_thing, thing, thing_params}, socket) do
    case Thing.update_thing(thing, thing_params) do
      {:ok, thing} ->
        {:noreply,
         socket
         |> put_flash(:info, "Thing updated successfully.")
         |> push_redirect(to: Routes.live_path(socket, MyAppWeb.ThingEditView, thing))}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign(socket, changeset: changeset)}
    end
  end
end

The template renders the LiveComponent like:

<%= live_component(@socket, MyAppWeb.MyLiveComponent) %>

When ThingEditView is rendered after the push_redirect above, I can see the flash message in MyAppWeb.ThingEditView’s socket.assigns.flash. I would then expect by passing socket into MyLiveComponent I would be able to pull out the flash message in the LiveComponent via live_flash(@flash, :info).

However, socket.assigns.flash is always an empty map when my LiveComponent is rendered. I never call live_flash/2 in the LiveView and would expect the flash message to remain in the socket assigns until I pull it out in my LiveComponent.

Is this the correct way to be thinking about flash with LiveView? Am I missing something that would enable to behavior I’m after?

9 comments

/phoenix #liveview #flash

21 5635 9

2023-02-13 02:15:09 UTC

Marked As Solved

sfusato

My understanding is that the combo put_flash + plug :fetch_live_flash is a convenience that will make the flash messages available in your main live view under the assign flash. In order to have it available in other liveviews/components rendered in your main liveview, you would have to pass it further along as an assign.

<%= live_component(@socket, MyAppWeb.MyLiveComponent, flash: @flash) %>

Post #2

Also Liked

jtormey

This approach can also be abstracted out so that it doesn’t have to be repeated in every LiveView, using a helper module with on_mount/4 and attach_hook/4.

I’ve done this in the past:

defmodule MyAppWeb.LiveFlash do
  def on_mount(:default, params, _session, socket) do
    {:ok, attach_hook(socket, :flash, :handle_info, &handle_flash/2)}
  end

  def push_flash(key, msg) do
    send(self(), {:flash, key, msg}
  end

  defp handle_flash({:flash, key, msg}, socket) do
    {:halt, put_flash(socket, key, msg)}
  end

  defp handle_flash(_otherwise, socket) do
    {:cont, socket}
  end
end

Then, in my_app_web.ex:

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MyAppWeb.Layouts, :app}

      on_mount MyAppWeb.LiveFlash

      unquote(html_helpers())
    end
  end

  def live_component do
    quote do
      use Phoenix.LiveComponent

      import MyAppWeb.LiveFlash, only: [push_flash: 2]

      unquote(html_helpers())
    end
  end

Now calling push_flash/2 from a LiveComponent will make the parent LiveView render the flash

Post #8

KristerV

very cool. i’m using phoenix 1.7 RC2+ (actually git master due to bugs) so had to make a few adjustments.

live_flash.ex

defmodule AppWeb.LiveFlash do
  import Phoenix.LiveView

  def on_mount(:default, _params, _session, socket) do
    {:cont, attach_hook(socket, :flash, :handle_info, &handle_flash/2)}
  end

  def push_flash(key, msg) do
    send(self(), {:flash, key, msg})
  end

  defp handle_flash({:flash, key, msg}, socket) do
    {:halt, put_flash(socket, key, msg)}
  end

  defp handle_flash(_otherwise, socket) do
    {:cont, socket}
  end
end

app_web.ex

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {AppWeb.Layouts, :app}

      on_mount AppWeb.LiveFlash                          # add this line

      unquote(html_helpers())
    end
  end

  def live_component do
    quote do
      use Phoenix.LiveComponent

      import AppWeb.LiveFlash, only: [push_flash: 2]     # add this line

      unquote(html_helpers())
    end
  end

very clever, thanks @jtormey

Post #9

chrismccord

Creator of Phoenix

Passing flash down as assigns is the way to go. Note, that you may want to pass it down as @parent_flash or similar as the nested components may have their own flash to display which you don’t necessary want to display on the parent.

Post #4