Mental model for context based toasts

[t-blackwell]

I've just started porting my website over to Remix and I've been really impressed with what I've seen so far. The amount of state management/effect code I've been able to strip out is incredible! One stumbling block that I've run into is how toast messages should work in the new Remix world. Previously I would have used a context and handled mutations manually, something like this...

const { showAlert } = useSnackbar();

const handleClick = () => {
  fetch('/do-a-thing', { method: 'POST'})
  .then((response) => response.json())
  .then((data) => {
    showAlert('All good!', 'success');
  })
  .catch((error) => {
    showAlert('Sad times :(', 'error');
  });
}

Now that the mutation happens via an action i.e. no explicit event, I don't have a mental model of how I can fire toast messages. I've tried the code below but I can't get it to work...

const actionData = useActionData<ActionData>();
const { showAlert } = useSnackbar();
const transition = useTransition();

// if the formError is populated, the toast shows incorrectly
// when you redirect away from current route
React.useEffect(() => {
  if (actionData?.formError !== undefined && transition.submission) {
    showAlert(actionData.formError, 'error');
  }
}, [actionData?.formError, transition.submission, showAlert]);

What am I missing? I've put together a simple repo that shows the inner workings of the context etc. in case anyone wants to spin it up.

Any help would be greatly appreciated.

Thanks,
Tom

[ccssmnn]

Whenever you submit a form, remix will refetch all loaders to revalidate the data. This keeps all the UI data in your nested components fresh. The flow is:

1. Form is submitted
2. Action has finished with redirect on success and response with an error
3. all Loaders are called to refresh your data

In your case, you will set error/success in the action and want to know this in a loader. You can use sessions for this. Store the information in a sessionCookie and read it in a loader / route to render your toast.

[t-blackwell]

Thanks for the link, @ccssmnn - that looks like what I'm after. It does feel like overkill to have to put the toast messages into cookies, well to me at least, but do I like the session.flash makes it that little bit more transient.

[kwiat1990]

Do I get it correctly that I need to somehow use session.flash to manage success message after submitting a form? Right know I'm trying to acomplish this task and it turned out to be cumbersome. On the following screenshot you can see states of useTransition and useActionData in my form component:

Yellow - on initial render
Blue - after submitting and successful response from the server
Green - on every following render (component is toggled in the DOM).

After step 2 (successful form submission) I show a message box instead of the form and it stays in the view during following renders.

[ccssmnn]

You don't need a cookie to display a success message for a form submission. You can return an object containing success or error from your action and read from that in your action data.

The original question was seeking for a way to avoid useContext to show a toast that lives on one location in the app based on an action anywhere in the app. For this, you can use a cookie, as you might not have access to action data there.

[kwiat1990]

@ccssmnn that’s kind of what I’ve tried to do and failed successfully 😉 because after initial form submission the useActionData hooks returns data from the server response. The problem is, that if I re-mount a component with the form I still see the message box instead the form because useActionData returns previously submitted data.

I’ve see in docs that useFetcher hook has a type === “done” but normal forms used with useTransition hook don’t have it.

[ccssmnn]

Can you provide a codesandbox or stackblitz project reproducing your issue?

[kwiat1990]

I have solved my problem using transition.type === "actionReload" to check if a form was submitted and data returned from the server.