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
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?
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.
Explicitly passing @flash down through the child components does get the behavior I’m after. However, there are many layers of nested LiveComponents in my actual app and I was hoping to avoid passing flash through all of them and instead pluck it out of the socket in the specific child component that needs it.
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.
I was thinking about flash in more request/response lifecycle. But it sounds like every LiveView/LiveComponent will have its own flash, which would make sense. Just so I’m clear, does this mean that put_flash/2 will only set @flash for the LiveView it’s called from and not the socket in general?
Stumbled on this too. In my case of a nested child component but with no redirection, an easy option is to send a message from the child component so the parent LV parent can put_flash in the handle_info.
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
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
Thank you @KristerV and @jtormey for this code! I was struggling to get my Live Component to flash when there was an error. I set up this LiveFlash and it works great – except for one small problem. I can’t get the flash message to go away.
I tried using clear_flash(socket in my component when the user enters new information but that didn’t work. I also tried adding <div phx-window-keydown="clear-flash"></div> in the LiveView but that didn’t work either. I then tried phx-click="lv:clear-flash in the component form which has a phx_target={@myself} but that also did not work.
The following code is already in my live.html.heex so it seems like it should be clearing the flash message when there is a key click:
I’m running out of things to try. Could you tell me what code you use to clear the flash?
UPDATE: I think I figured it out. There is a handle_event in the LiveComponent for handling the text_input. In that handle_event, I added push_flash(:error, nil) and that clears any previous flash messages. Not sure if that is correct, but it works!
Odd that the code above in my live.html.heex file doesn’t clear the flash message when the user clicks onto the page again. I’m assuming it doesn’t work because the form text_input is in a LiveComponent so the phx_click isn’t registering.
Could you tell me what code you use to clear the flash?
