Set up some nested components that set flash messages on click

Author: sevenseacat

lib/phoenix_liveview_flash_components_example_web/components/first_component.ex

@@ -0,0 +1,26 @@
+defmodule PhoenixLiveviewFlashComponentsExampleWeb.FirstComponent do
+  use PhoenixLiveviewFlashComponentsExampleWeb, :live_component
+
+  alias PhoenixLiveviewFlashComponentsExampleWeb.SecondComponent
+
+  def render(assigns) do
+    ~H"""
+    <div class="m-2 p-4 border border-blue-800">
+      <p>
+        First-level component <code class="font-bold">@flash</code>:<br />
+        <code><%= inspect(@flash) %></code>
+      </p>
+
+      <.button class="m-2 !bg-blue-500 !hover:bg-blue-700" phx-click="click" phx-target={@myself}>
+        Click me in the first-level component
+      </.button>
+
+      <.live_component module={SecondComponent} id="nested-component" />
+    </div>
+    """
+  end
+
+  def handle_event("click", _params, socket) do
+    {:noreply, put_flash(socket, :info, "First-level component button clicked!")}
+  end
+end

lib/phoenix_liveview_flash_components_example_web/components/second_component.ex

@@ -0,0 +1,22 @@
+defmodule PhoenixLiveviewFlashComponentsExampleWeb.SecondComponent do
+  use PhoenixLiveviewFlashComponentsExampleWeb, :live_component
+
+  def render(assigns) do
+    ~H"""
+    <div class="m-2 p-4 border border-green-800">
+      <p>
+        Second-level component <code class="font-bold">@flash</code>: <br />
+        <code><%= inspect(@flash) %></code>
+      </p>
+
+      <.button class="m-2 !bg-green-700 !hover:bg-green-800" phx-click="click" phx-target={@myself}>
+        Click me in the second-level component
+      </.button>
+    </div>
+    """
+  end
+
+  def handle_event("click", _params, socket) do
+    {:noreply, put_flash(socket, :info, "Second-level component button clicked!")}
+  end
+end

lib/phoenix_liveview_flash_components_example_web/live/home_live.ex

@@ -0,0 +1,26 @@
+defmodule PhoenixLiveviewFlashComponentsExampleWeb.HomeLive do
+  use PhoenixLiveviewFlashComponentsExampleWeb, :live_view
+
+  alias PhoenixLiveviewFlashComponentsExampleWeb.FirstComponent
+
+  def render(assigns) do
+    ~H"""
+    <div class="text-center m-2 p-4 -mt-12 border border-red-800">
+      <p>
+        LiveView <code class="font-bold">@flash</code>:<br />
+        <code><%= inspect(@flash) %></code>
+      </p>
+
+      <.button class="m-2 !bg-red-700 !hover:bg-red-800" phx-click="click">
+        Click me in the LiveView
+      </.button>
+
+      <.live_component module={FirstComponent} id="nested-component" />
+    </div>
+    """
+  end
+
+  def handle_event("click", _params, socket) do
+    {:noreply, put_flash(socket, :info, "LiveView button clicked!")}
+  end
+end

lib/phoenix_liveview_flash_components_example_web/router.ex

@@ -17,7 +17,7 @@ defmodule PhoenixLiveviewFlashComponentsExampleWeb.Router do
   scope "/", PhoenixLiveviewFlashComponentsExampleWeb do
     pipe_through :browser
 
-    get "/", PageController, :home
+    live "/", HomeLive
   end
 
   # Other scopes may use custom stacks.