fix: flash

Author: duy211099

app/controllers/inertia_controller.rb

@@ -1,8 +1,6 @@
 # frozen_string_literal: true
 
 class InertiaController < ApplicationController
-  # Share data with all Inertia responses
-  # see https://inertia-rails.dev/guide/shared-data
   inertia_share flash: -> {
     {
       notice: flash[:notice],

app/controllers/inertia_example_controller.rb

@@ -20,4 +20,9 @@ def index
   def demo
     render inertia: {}
   end
+
+  def create
+    flash[:notice] = "POST request successful! Toast triggered from backend."
+    redirect_to controller: "inertia_example", action: "demo"
+  end
 end

app/frontend/components/Layout.tsx

@@ -1,9 +1,25 @@
+import { usePage } from '@inertiajs/react'
 import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+import { toast } from 'sonner'
+import { Toaster } from '@/components/ui/sonner'
 
 interface LayoutProps {
   children: ReactNode
 }
 
 export default function Layout({ children }: LayoutProps) {
-  return children
+  const { flash } = usePage().props as { flash?: { notice?: string; alert?: string } }
+
+  useEffect(() => {
+    if (flash?.notice) toast.success(flash.notice)
+    if (flash?.alert) toast.error(flash.alert)
+  }, [flash?.notice, flash?.alert])
+
+  return (
+    <>
+      <Toaster position="top-right" richColors closeButton />
+      {children}
+    </>
+  )
 }

app/frontend/entrypoints/inertia.tsx

@@ -44,14 +44,11 @@ createInertiaApp({
 
     const Component = page.default ?? page
 
-    const WrappedComponent: any = (props: any) => {
-      return createElement(Layout, null, createElement(Component, props))
+    if (!Component.layout) {
+      Component.layout = (page: ReactNode) => createElement(Layout, null, page)
     }
 
-    WrappedComponent.layout =
-      Component.layout || ((page: ReactNode) => createElement(Layout, null, page))
-
-    return WrappedComponent
+    return Component
   },
 
   setup({ el, App, props }) {

app/frontend/pages/inertia_example/demo.tsx

@@ -1,3 +1,4 @@
+import { router } from '@inertiajs/react'
 import { useEffect, useState } from 'react'
 import {
   Accordion,
@@ -152,6 +153,18 @@ const Demo = () => {
           </div>
         </div>
 
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Flash Messages Test</CardTitle>
+            <CardDescription>Click buttons to trigger flash messages via Inertia</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-wrap gap-2">
+            <Button variant="default" onClick={() => router.post('/demo')}>
+              Trigger POST Toast
+            </Button>
+          </CardContent>
+        </Card>
+
         <Tabs value={tabsValue} onValueChange={setTabsValue}>
           <TabsList>
             <TabsTrigger value="tab1">Form Controls</TabsTrigger>

config/routes/demo.rb

@@ -3,3 +3,4 @@
 root "inertia_example#index"
 get "inertia-example", to: "inertia_example#index"
 get "demo", to: "inertia_example#demo"
+post "demo", to: "inertia_example#create"