How to send toast with CanAccess ?
Is it possible to send a notification with CanAccess component ? Redirection works but letting the user know why he cant access will be great. As of yet the disabling of button on hover shows the title, but what if the user tries to enter with the url. CanAcces works but with no feedback. Adding toast to the redirection will be helpful.
This is how I am doing it. everything works but a toast will be great !
33 Replies
Hi @haribo_mushi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You can use the
fallback
prop of the <CanAccess />
component to display a toast notification using react-toastify
when the user doesn't have access. First, you need to create a custom fallback component that triggers the toast notification and then redirects the user.
Here's an example of how you can create a custom fallback component:
Now, you can use this CustomFallback
component as the fallback
prop in your <CanAccess />
component:
This way, when a user tries to access the protected content without the required permissions, they will see a toast notification and be redirected to the specified path ("/" in this example).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@886127984711438378> kapa.ai is still learning and improving, please let us how it did by reacting below
ambitious-aqua•16mo ago
Hey @kapa.ai does refine offers prefetching ?
a prefetching hook for the pages will be great, do u have a demo for it ? lets say I am on a home page and I have my bookings card. On hovering that card I want to trigger prefetch so when the user actucally clicks that my useTable in that booking resource List page will already have it. That will speed up my perfmance
Let me check the knowledge base for you. One moment! :books:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, you can explore the refine documentation for more information on available features and hooks: refine documentation (https://refine.dev/docs).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@886127984711438378> kapa.ai is still learning and improving, please let us how it did by reacting below
sensitive-blue•15mo ago
this is related the router you are using
<CanAccess> component doesn't have this feature. you can open feature request if you want
ambitious-aqua•15mo ago
surw will do so
I dont think so
its not realted to any routing library
prefetching is done by server state mangement libraries
like rtk from redux or react-query which is being used by refine
ideally it would be great if refine can offer a prefetch hook
I have already implemented prefetching of data in my client facing website where I am using rtk-query
I beleive react-query also offers prefetching
sensitive-blue•15mo ago
i was thinking you are talking about this:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
https://nextjs.org/docs/pages/api-reference/components/link#prefetch
if you are talking about this:
https://tanstack.com/query/v4/docs/react/guides/prefetching
yeah actually it's a good feature. we can add this to <ShowButton>, <ListButton> etc.
you can open feature request again if you want 🥹 whether you open or not i will discuss this feature with the core team
ambitious-aqua•15mo ago
sure, I will open for both of them 👍
sensitive-blue•15mo ago
thanks 🚀
ambitious-aqua•15mo ago
yup was talking about this one
like-gold•15mo ago
Hey @haribo_mushi, we think that prefetching will be a good addition to our feature set. We'll try to include it in our next sprints 🚀
For your case in
CanAccess
, did you considered using useCan
instead of the CanAccess
? If you're doing page level controls + need some callbacks, I think it can be a solution 🤔ambitious-aqua•15mo ago
CanAccess is perfect for me
like-gold•15mo ago
But i guess its easier to use the component since it infers the resource, action, id etc.
ambitious-aqua•15mo ago
since I want it on my entire application