ambitious-aqua•16mo ago

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 !

        <CanAccess fallback={<CatchAllNavigate to="/" />} >

        <CanAccess fallback={<CatchAllNavigate to="/" />} >

33 Replies

kapa.ai•16mo ago

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:

import { useEffect } from "react";
import { toast } from "react-toastify";
import { CatchAllNavigate } from "@refinedev/core";

const CustomFallback = () => {
  useEffect(() => {
    toast.error("You don't have access to this page.");
  }, []);

  return <CatchAllNavigate to="/" />;
};

import { useEffect } from "react";
import { toast } from "react-toastify";
import { CatchAllNavigate } from "@refinedev/core";

const CustomFallback = () => {
  useEffect(() => {
    toast.error("You don't have access to this page.");
  }, []);

  return <CatchAllNavigate to="/" />;
};

Now, you can use this CustomFallback component as the fallback prop in your <CanAccess /> component:

<CanAccess fallback={<CustomFallback />}>
  // Your protected content here
</CanAccess>

<CanAccess fallback={<CustomFallback />}>
  // Your protected content here
</CanAccess>

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: ----------------------

kapa.ai•16mo ago

<@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

kapa.ai•16mo ago

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: ----------------------

kapa.ai•16mo ago

<@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