fix: toast

Author: duy211099

app/controllers/inertia_example_controller.rb

@@ -25,4 +25,12 @@ def create
     flash[:notice] = "POST request successful! Toast triggered from backend."
     redirect_to controller: "inertia_example", action: "demo"
   end
+
+  def client_fetch
+    if rand < 0.5
+      render json: { message: "Request succeeded!" }, status: :ok
+    else
+      render json: { message: "Request failed (simulated error)." }, status: :unprocessable_entity
+    end
+  end
 end

app/frontend/components/Layout.tsx

@@ -1,21 +1,11 @@
-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) {
-  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 />

app/frontend/entrypoints/inertia.tsx

@@ -3,6 +3,7 @@ import { createInertiaApp, router } from '@inertiajs/react'
 import { createElement, type ReactNode } from 'react'
 import { createRoot } from 'react-dom/client'
 import snakecaseKeys from 'snakecase-keys'
+import { toast } from 'sonner'
 import ErrorBoundary from '@/components/ErrorBoundary'
 import Layout from '@/components/Layout'
 
@@ -53,7 +54,11 @@ createInertiaApp({
 
   setup({ el, App, props }) {
     if (el) {
-      createRoot(el).render(createElement(ErrorBoundary, null, createElement(App, props)))
+      if (!(el as any).__reactRoot) {
+        ;(el as any).__reactRoot = createRoot(el)
+      }
+      const root = (el as any).__reactRoot
+      root.render(createElement(ErrorBoundary, null, createElement(App, props)))
     } else {
       console.error(
         'Missing root element.\n\n' +
@@ -89,3 +94,11 @@ const redirectToErrorPage = (event: Event) => {
 
 document.addEventListener('inertia:exception', redirectToErrorPage)
 document.addEventListener('inertia:invalid', redirectToErrorPage)
+
+// HMR-safe: clean up previous listener before re-registering
+;(window as any).__flashToastCleanup?.()
+;(window as any).__flashToastCleanup = router.on('flash', (event) => {
+  const flash = event.detail.flash as { notice?: string; alert?: string }
+  if (flash?.notice) toast.success(flash.notice)
+  if (flash?.alert) toast.error(flash.alert)
+})

app/frontend/pages/inertia_example/demo.tsx

@@ -1,5 +1,6 @@
 import { router } from '@inertiajs/react'
 import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
 import {
   Accordion,
   AccordionContent,
@@ -124,6 +125,7 @@ function ComponentShowcase({
 }
 
 const Demo = () => {
+  const [fetching, setFetching] = useState(false)
   const [sliderValue, setSliderValue] = useState([50])
   const [switchChecked, setSwitchChecked] = useState(false)
   const [selectValue, setSelectValue] = useState('')
@@ -134,6 +136,28 @@ const Demo = () => {
   const [dialogOpen, setDialogOpen] = useState(false)
   const [alertDialogOpen, setAlertDialogOpen] = useState(false)
 
+  const handleClientFetch = async () => {
+    setFetching(true)
+    try {
+      const csrfToken =
+        document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content ?? ''
+      const res = await fetch('/demo/fetch', {
+        method: 'POST',
+        headers: { 'X-CSRF-Token': csrfToken, 'Content-Type': 'application/json' },
+      })
+      const data = await res.json()
+      if (res.ok) {
+        toast.success(data.message)
+      } else {
+        toast.error(data.message)
+      }
+    } catch {
+      toast.error('Network error')
+    } finally {
+      setFetching(false)
+    }
+  }
+
   useEffect(() => {
     if (switchChecked) {
       document.documentElement.classList.add('dark')
@@ -153,17 +177,31 @@ 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>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <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>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Client Fetch Demo</CardTitle>
+              <CardDescription>Uses raw fetch() — 50% success, 50% error</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-wrap gap-2">
+              <Button variant="outline" onClick={handleClientFetch} disabled={fetching}>
+                {fetching ? 'Sending…' : 'Send Fetch Request'}
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
 
         <Tabs value={tabsValue} onValueChange={setTabsValue}>
           <TabsList>

config/routes/demo.rb

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