Show a toast after a form POST redirect

[robcaldecott]

I am following the tutorial and would like to show a toast after successfully deleting a user but I cannot figure out the best way to do this.

Currently I am using a magic destroy route that has a single action to remove the user and then redirect back to the home page, something like this:

export async function action({ params }: ActionFunctionArgs) {
  await deleteUser(params.id as string);
  return redirect("/");
}

I then use Form to POST to the route (again, as per the tutorial)

<Form method="post" action="destroy">
  <button type="submit">Delete</button>
</Form>

This is fine and works as per the docs but I would now like to add some form of notification (like a toast) to the user when the redirect completes.

Options I have messed with so far:

Use a URL param on the redirect
I could do something like this:

redirect("/?showDeleteToast=1");

The root route could look for this param, show the toast and then use useSearchParams to remove it. The problem here is the user could end up in a situation where a page refresh shows the toast again. While I am a fan of keeping state in the URL I am not sure this is a good fit.

Use useFetcher and useFetchers
Another idea is using useFetcher for the form submission and have the root route call useFetchers looking for a successful action completion (if that is possible), showing the toast via some useEffect magic.

The problem here is the /user/:id route is getting re-rendered after the form is submitted and attempts to load a user who now no longer exists, which throws an error. What I need to do here is manually redirect to the home page after the form submission is completed but I can't see the best way to do this.

I really like using a special destroy route coupled with Form: I think it's a lovely pattern, but I cannot see how I can "know" when the action has completed in order to show my toast.

Any advice here is welcome.

[robcaldecott]

After experimenting a bit more with useLocation in my root route, this seems to work but I don't know how reliable it would be or even if it is working just by sheer luck 😅

const navigation = useNavigation();

React.useEffect(() => {
  if (
    navigation.state === "loading" &&
    navigation.formAction?.includes("destroy")
  ) {
    toast("User successfully deleted", { type: "success" });
  }
}, [navigation]);

Is this too brittle?

[matiasleidemer]

Hey @robcaldecott, I had the same question, and I was able to achieve it using the session's flash messages. The solution is similar to how Rails handles it. You can find more info about it in my blog post. Here's the TLDR version:

// app/routes/destroy-contact.tsx
export async function action({ params, request }: Route.ActionArgs) {
  await deleteContact(params.contactId);

  const session = await getSession(request.headers.get("Cookie"));
  session.flash("notice", "Contact successfully deleted");

  return redirect(`/`, {
    headers: {
      "Set-Cookie": await commitSession(session),
    },
  });
}

// app/layouts/sidebar.tsx
import { data } from "react-router";

export async function loader({ request }: Route.LoaderArgs) {
  const contacts = [];
  const session = await getSession(request.headers.get("Cookie"));
  const notice = session.get("notice");
  const flash = { notice };

  return data(
    { contacts, flash },
    {
      headers: {
        "Set-Cookie": await commitSession(session),
      },
    }
  );
}

export default function SidebarLayout({ loaderData }: Route.ComponentProps) {
  const { contacts, flash } = loaderData;

  useEffect(() => {
    if (flash.notice) {
      toast.success(flash.notice);
    }
  }, [flash]);

  return (
    <div>Your component</div>
  )
}