undone pike
Hi, I have a menu which contains multiple actions (Favorite, Pin, Delete... etc), each one either calls fetcher.submit, or submit(). For each action, after the submission is complete and successful, I want to then display a toast confirming the action.
How can I do this in Remix?
kind moon
Use the session flashing pattern: https://github.com/remix-run/examples/tree/main/toast-message.
undone pike
wow, that's annoying... makes it difficult to pass a react fragment as the message (incase i want to bold certain text) as well as different icons for each toast, since it has to be serialized into a cookie
is this the only way?
undone pike
i ended up doing using the transition.submission.key or fetcher.submission.key and useEffect to add new toasts:
const transition = useTransition();
useEffect(() => {
if (!addToast) return;
if (transition.state === "loading" && transition.submission) {
addToast((prev) => {
if (prev.find((t) => t.id === transition.submission.key)) return prev;
if (transition.submission.formData.get("_method") === "delete") {
return [
...prev,
{
id: transition.submission.key,
message: (
<>
Deleted <span className="font-medium">{post.title}</span>
</>
),
icon: faTrash,
type: "success",
},
];
}
return prev;
});
}
}, [transition, addToast, post]);
Session flash is not the only way.
kind moon
i ended up doing using the transition.submission.key or fetcher.submission.key a...
Yea, something like this is okay too.
undone pike
really wish i could just await fetcher.submit/fetcher.load!