Session Flash not clearing when in a layout #9679

kunanyi · 2024-07-01T04:52:03Z

kunanyi
Jul 1, 2024

I'm having issues getting Flash messaging to work in a layout.

In this repo I've done a session.get in the root, as a universal spot to show any flash error messages.

Problem is, the session flash does not clear. It persists.

If I move the session.get from the root layout to a lower layout (like "movie"), it's the same issue. It only seems to work if I put it inside a route endpoint like routes/movie.index?

Any suggestions on how to get the Flash display to work (and clear) from a universal location?

Thanks 😊

The repo is just a plain remix install.

It uses app/sessions.ts from the docs.

With these two files the main difference:

/app/root.tsx

import { Links, Meta, Outlet, Scripts, ScrollRestoration, json, useRouteLoaderData } from "@remix-run/react";
import "./tailwind.css";
import { commitSession, getSession } from "./sessions";
import { LoaderFunctionArgs } from "@remix-run/cloudflare";

export async function loader({ request }: LoaderFunctionArgs) {
	const session = await getSession(request.headers.get("Cookie"));
	const error = session.get("error");
	console.log("loading");
	return json(
		{ error },
		{
			headers: {
				"Set-Cookie": await commitSession(session),
			},
		}
	);
}

export function Layout({ children }: { children: React.ReactNode }) {
	/* tsignore-next-line */
	const { error } = useRouteLoaderData("root") as any;
	return (
		<html lang="en">
			<head>
				<meta charSet="utf-8" />
				<meta
					name="viewport"
					content="width=device-width, initial-scale=1"
				/>
				<Meta />
				<Links />
			</head>
			<body className="m-20">
				<p>Flash error: {error || "None"}</p>
				<br />
				{children}
				<ScrollRestoration />
				<Scripts />

				<p className="mt-12 text-xs text-gray-500">Epoch time just to see root updating: {Date.now()}</p>
			</body>
		</html>
	);
}

export default function App() {
	return <Outlet />;
}

app/routes/movie.$movieId.edit.tsx

import { Form } from "@remix-run/react";
import { getSession, commitSession } from "../sessions";
import { ActionFunctionArgs, json, LoaderFunctionArgs, redirect } from "@remix-run/cloudflare";

export async function action({ request }: ActionFunctionArgs) {
	const session = await getSession(request.headers.get("Cookie"));
	session.flash("error", "Flash error from edit action");
	return redirect("/movie", {
		headers: {
			"Set-Cookie": await commitSession(session),
		},
	});
}

export async function loader({ request }: LoaderFunctionArgs) {
	return json({});
}

export default function Index() {
	return (
		<>
			<h1 className="text-3xl">Edit Movie</h1>
			<Form method="POST">
				<button
					className="underline"
					type="submit">
					Save
				</button>
			</Form>
			<a className="underline" href="javascript:history.back()">Back</a>
		</>
	);
}

kunanyi · 2024-07-01T10:13:47Z

kunanyi
Jul 1, 2024
Author

OK so it seems that parent loaders aren't called unless there is a mutation for the current parent route.

So perhaps this is the issue? After a movie is edited, the flash is retrieved by the loader.... but then that state (with the flash value present) is never cleared unless you change route entirely or cause a mutation?

If so, any suggestions for displaying flash in a global location? Or is it too tricky with remix caches/nesting?

1 reply

do4Mother Jul 26, 2024

just add useEffect in root.tsx with timeout to clear error message

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Session Flash not clearing when in a layout #9679

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Session Flash not clearing when in a layout #9679

Uh oh!

Uh oh!

kunanyi Jul 1, 2024

/app/root.tsx

app/routes/movie.$movieId.edit.tsx

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

kunanyi Jul 1, 2024 Author

Uh oh!

do4Mother Jul 26, 2024

kunanyi
Jul 1, 2024

Replies: 1 comment 1 reply

kunanyi
Jul 1, 2024
Author