#Only first flash message shows

1 messages · Page 1 of 1 (latest)

shrewd monolith
#

I've created a flash message by following the documentation on shared data.

The flash message works just fine on a fresh page load. But when i hit the store method multiple times without doing a full page reload nothing happens after the first.

I guess this has something to do with the way inertia handles requests, but i'm not sure how to cotinue from here.

Here is my code:

In my ProductController i have:

public function store(Request $request)
    {

        return Redirect::route('product.create')->with([
            'message' => 'Product created.',
        ]);
    }

HandleInertiaRequests.php

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'ziggy' => function () use ($request) {
            return array_merge((new Ziggy)->toArray(), [
                'location' => $request->url(),
            ]);
        },
        'flash' => [
            'message' => fn() => $request->session()->get('message')
        ],
    ]);
}

My flash message component:

import { usePage } from "@inertiajs/react";
import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

export default function FlashMessage() {
    const { flash } = usePage().props;
    const [showFlash, setShowFlash] = useState(true);

    useEffect(() => {
        if (flash.message) {
            setShowFlash(true);

            const timeout = setTimeout(() => {
                setShowFlash(false);
            }, 3000);

            return () => clearTimeout(timeout);
        }
    }, [flash.message]);

    return (
        <AnimatePresence>
            {showFlash && flash.message && (
                <motion.div
                    initial={{ opacity: 0, y: 50 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 50 }}
                    transition={{ duration: 1 }}
                    className="absolute bottom-8 right-8 flex items-center w-full max-w-xs p-4 space-x-4 text-gray-500 bg-white divide-x divide-gray-200 rounded-lg shadow space-x"
                    role={"alert"}
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth={1.5}
                        stroke="currentColor"
                        className="w-6 h-6"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
                        />
                    </svg>
                    <div className="pl-4 text-sm font-normal">
                        {flash.message}
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    );
}

Any help would be greatly appreciated!

grave crown
shrewd monolith
#

I've figured out that it does work when the flashed message is different than the one before it. Which does help me for now, but I would still ilke to be able to show the same message mutliple times.

grave crown