Flash Notifications
How can we display a success or failure message after a POST, which should not always be displayed at the form, but rather as a message on the page to which the request was redirected, preferably using a toast or even when redirecting? It could help when accessing protected routes, and you need to know why you can't access them.
6 Replies
Assuming:
- You have a toast provider that makes posting toasts available to all components under it .
- In the component use an
action to trigger the POST request.
- Monitor that action with a submission.
- If that submission throws an Error, pass it on to the toast provider inside the component.
It could help when accessing protected routesHow would this even happen (during a POST request)? Are you redirecting to routes that a visitor doesn't have access to? Protected routes are loaded via GET or because of client side navigation. The navigation could cause an authorisation check but that would be typically handled over a
query which uses GET.action - SolidDocs
Documentation for SolidJS, the signals-powered UI framework
query - SolidDocs
Documentation for SolidJS, the signals-powered UI framework
How about a success notification in redirect or rather a protected route that does not depend on any actions how would flash notifications be handled for this case @peerreynders
How about a success postMonitor for the
submission result provided the action returns something or when the submission is no longer pending and there is no error (you may have to clear results and errors if you issue more than one submission between navigations).
rather a protected routeA route authentication check typically looks something like this: Conceivably you could do an authorisation check in a similar manner (while the actual back end operations still have their own, independent guards). In the worst case you could just put the encoded error text into the (error) redirect URL as an
error-message searchParam so that the page can just grab it from there.
The other possibility is to have the toast provider in the Router root (where it exists for the entire client session) and have the toast provider subscribe to toast events from an external JS module.
This example uses the same approach to make navigate available outside of the component tree.MDN Web Docs
encodeURIComponent() - JavaScript | MDN
The encodeURIComponent() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two surrogate characters). Compared to encodeURI(), this function encodes more characters, in...
peerreynders
StackBlitz
solid-router external navigation - StackBlitz
external.ts holds a link object that flipper.ts sends NavigationEvents to which are forwarded to the root component in app.tsx
GitHub
strello/src/lib/index.ts at 9c9ae973d96cc045914e696757a1b5f31efc6fa...
Contribute to solidjs-community/strello development by creating an account on GitHub.
Another way would possibly be cookies.
But they'd need to expire the instant they're subscribed to
I'll have a look at these implementations many thanks for the input 😉
Another way would possibly be cookies. But they'd need to expire the instant they're subscribed toYour authentication cookie should be
httpOnly so you would need a separate cookie that is client modifiable. Reading the cookie should invalidate it (an only a valid cookie should be able to be read).
Also manipulating cookies server side can be at times tricky if the server decides to eagerly stream a response.Will implement and give feedback on approached :p