How come flash messages are not propagating to the `live_component` parent?

Phoenix Forum Questions / Help
, ,
1

I have an app with posts and comments, and a “Post a comment” form. The “Post a comment” form is a LiveComponent and most of the code in it has been copied from the default implementation for the way the new/update form works on default-generated index and show pages created via the phx.gen.live generator.

However, one piece of behavior that works fine with generated index/show pages is not working for the comment form and I can’t figure out why. When a user creates a new comment, this code should trigger a flash message:

      {:ok, comment} ->
        notify_parent({:comment_saved, comment})

        {:noreply,
         socket
         |> put_flash(:info, "Comment created successfully")}

but it doesn’t.

If I instead trigger a flash message in the Post show.ex file that the comment form is rendered from, it works fine. That is, this works:

  @impl true
  def handle_info({FormComponent, {:comment_saved, comment}}, socket) do
    {:noreply,
     socket
     |> stream_insert(:comments, comment)
     |> put_flash(:info, "Comment saved successfully")}
  end

But I’d rather the code for that flash message stay in the relevant form_component file.

The LiveComponent is invoked in the show.html.heex file like this:

      <.live_component
        module={FormComponent}
        id={"post-#{@post.id}-new-comment"}
        post={@post}
        current_user={@current_user}
        action={:new}
        comment={@new_comment}
      />

If there’s any other code that would be helpful to provide to help track down why this isn’t working in this case, let me know.

2

The socket for the live component is different to the socket for the parent live view.

To update the live view socket you will need to send a message to the parent liveview and handle the message there to update the correct socket.

In the live component (in place of put_flash):

 send self(), {:update_flash, {:info, "Comment saved successfully"}}

In the live view:

  def handle_info({:update_flash, {flash_type, msg}}, socket) do
    update_socket = put_flash(socket, flash_type, msg)
    {:noreply, updated_socket}
  end
2 Likes
3

That makes sense, but if that’s true, why do flash messages work fine without that in the standard generated phx.gen.live code?

The only obvious difference I can see is that the standard generated code is calling push_patch after the flash message is set. Does that call make a difference to how this works?

4

Interesting and really good post by @sevenseacat about how to update messages from a LiveComponen that maybe useful for you:

4 Likes
5

Good question - have you tried commenting out the push_patch from the generated code to see what happens?

1 Like
6

Yes: Phoenix.LiveView — Phoenix LiveView v0.19.4 :blush:

3 Likes