Notification about action result

[otatar]

Hi there,

I was playing, testing and experimenting with remix framework last couple of months, it really impressed me. But I came from SPA world (Angular) and I have always build web apps that used a lot of notifications, toasts, modals for action results (CRUD). It seems that is not an easy task in remix. For example, in Angular I had always have a service for toast notification that I could just use from component code whenever I had result of particular action like:

toastService.showSuccess("Success message")
toastService.showError("Error message")

Remix is different and action is a server-only function to handle data mutations and other actions. You cannot fire some service that could make some changes in UI.

What is the best strategy for this in Remix. Currently, I am doing this way. I have a route component called "success" that I redirect to, in action function, when some CRUD operation is successful. And than I have an OK button and when clicked it navigates further to provided link. I am supplying that link info using splat route, eg. success.$.tsx, so everything after /success is a link to navigate through. I don't like this approach, but that is all I have for now. I could provide that info using cookies and flash, but that seems to me like misusing the concept of cookies (although this idea with splat route is misusing the concept of URLs).

Here is example:

https://stackblitz.com/edit/remix-run-remix-2q7yww?file=app%2Froutes%2F_index.tsx

Is there a better way, how can we implement toast service from action....

Thank you

[AlemTuzlak]

The way I've done it and the way it is done in the Epic Stack by Kent is using flash session.
You add this:
https://github.com/epicweb-dev/epic-stack/blob/main/app/utils/flash-session.server.ts
then you use these redirects to redirect with toasts
and you need to fetch them in the root and return to the frontend, the code is here:
https://github.com/epicweb-dev/epic-stack/blob/main/app/root.tsx
and this will show a toast everytime you use redirectWithToast, you can extend it to use whatever else you need

[otatar]

Thank you