stormy-gold•16mo ago

How to limit the display of resources from users parameters?

I have two type of users. One without ParentUserID (admin) Another with parenUserId (employee who has parentUserId from the invitator(admin)) I would like to set up something like this:

resources={
            identity.hasParent
              ? [
                  // Resources for users with a parent
                  {
                    name: "my-profile",
                    icon: <AccountCircleOutlined />,
                    options: {
                      label: "My Profile",
                    },
                    list: MyProfile,
                  },
                ]
              : [
                  // Resources for users without a parent
                  {
                    name: "building-plans",
                    list: BuildingPlan,
                    show: BuildingsDetail,
                    create: CreateBuildingPlan,
                    edit: EditBuildingPlan,
                    icon: <ArticleOutlined />,
                  },
                  {
                    name: "employees",
                    list: EmployeeList,
                    create: AddEmployee,
                    icon: <PeopleIcon />,
                  },
                  {
                    name: "contracts",
                    list: AllContracts,
                    icon: <AddHomeWorkOutlinedIcon />,
                  },
                  {
                    name: "my-profile",
                    icon: <AccountCircleOutlined />,
                    options: {
                      label: "My Profile",
                    },
                    list: MyProfile,
                  },
                ]
          }

resources={
            identity.hasParent
              ? [
                  // Resources for users with a parent
                  {
                    name: "my-profile",
                    icon: <AccountCircleOutlined />,
                    options: {
                      label: "My Profile",
                    },
                    list: MyProfile,
                  },
                ]
              : [
                  // Resources for users without a parent
                  {
                    name: "building-plans",
                    list: BuildingPlan,
                    show: BuildingsDetail,
                    create: CreateBuildingPlan,
                    edit: EditBuildingPlan,
                    icon: <ArticleOutlined />,
                  },
                  {
                    name: "employees",
                    list: EmployeeList,
                    create: AddEmployee,
                    icon: <PeopleIcon />,
                  },
                  {
                    name: "contracts",
                    list: AllContracts,
                    icon: <AddHomeWorkOutlinedIcon />,
                  },
                  {
                    name: "my-profile",
                    icon: <AccountCircleOutlined />,
                    options: {
                      label: "My Profile",
                    },
                    list: MyProfile,
                  },
                ]
          }

13 Replies

kapa.ai•16mo ago

Hi @acidias. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can achieve this by conditionally rendering the resources array based on the user's hasParent property. First, you need to get the user's identity and check if they have a parent. You can use the useUserIdentity hook provided by refine to get the user's identity. Here's an example of how you can set up the resources based on the user's hasParent property:

import { useUserIdentity } from "@refinedev/core";

const App = () => {
  const { data: identity } = useUserIdentity();

  const resources = identity?.hasParent
    ? [
        // Resources for users with a parent
        {
          name: "my-profile",
          icon: <AccountCircleOutlined />,
          options: {
            label: "My Profile",
          },
          list: MyProfile,
        },
      ]
    : [
        // Resources for users without a parent
        {
          name: "building-plans",
          list: BuildingPlan,
          show: BuildingsDetail,
          create: CreateBuildingPlan,
          edit: EditBuildingPlan,
          icon: <ArticleOutlined />,
        },
        {
          name: "employees",
          list: EmployeeList,
          create: AddEmployee,
          icon: <PeopleIcon />,
        },
        {
          name: "contracts",
          list: AllContracts,
          icon: <AddHomeWorkOutlinedIcon />,
        },
        {
          name: "my-profile",
          icon: <AccountCircleOutlined />,
          options: {
            label: "My Profile",
          },
          list: MyProfile,
        },
      ];

  return (
    <Refine resources={resources} /* other refine props */>
      {/* Your routes and other components */}
    </Refine>
  );
};

export default App;

import { useUserIdentity } from "@refinedev/core";

const App = () => {
  const { data: identity } = useUserIdentity();

  const resources = identity?.hasParent
    ? [
        // Resources for users with a parent
        {
          name: "my-profile",
          icon: <AccountCircleOutlined />,
          options: {
            label: "My Profile",
          },
          list: MyProfile,
        },
      ]
    : [
        // Resources for users without a parent
        {
          name: "building-plans",
          list: BuildingPlan,
          show: BuildingsDetail,
          create: CreateBuildingPlan,
          edit: EditBuildingPlan,
          icon: <ArticleOutlined />,
        },
        {
          name: "employees",
          list: EmployeeList,
          create: AddEmployee,
          icon: <PeopleIcon />,
        },
        {
          name: "contracts",
          list: AllContracts,
          icon: <AddHomeWorkOutlinedIcon />,
        },
        {
          name: "my-profile",
          icon: <AccountCircleOutlined />,
          options: {
            label: "My Profile",
          },
          list: MyProfile,
        },
      ];

  return (
    <Refine resources={resources} /* other refine props */>
      {/* Your routes and other components */}
    </Refine>
  );
};

export default App;

Please note that the code above assumes you have already set up the necessary components and imported the required icons. Make sure to adjust the code according to your specific components and icons. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below

xenial-black•16mo ago

You can use access control provider https://refine.dev/docs/advanced-tutorials/access-control/

Access Control | refine

Introduction

xenial-black•16mo ago

if you don't want to use 3rd party provider like casbin. You can implement your own logic with your API

stormy-gold•16mo ago

I saw them, but I would like without them How should I implement own logic? For the solution @kapa.ai wrote, I'm getting error:

Uncaught Error: No QueryClient set, use QueryClientProvider to set one...

Uncaught Error: No QueryClient set, use QueryClientProvider to set one...

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books:

xenial-black•16mo ago

You cannot use useGetIdentity outside refine

kapa.ai•16mo ago

---------------------- I apologize for the confusion. It seems like you're missing the QueryClientProvider in your application. To fix the error, you need to wrap your Refine component with the QueryClientProvider. Here's an example of how to do that: First, import the necessary components from react-query:

import { QueryClient, QueryClientProvider } from "react-query";

import { QueryClient, QueryClientProvider } from "react-query";

Then, create a QueryClient instance and wrap your Refine component with the QueryClientProvider:

const queryClient = new QueryClient();

const App = () => {
  // Your existing code for resources and useUserIdentity

  return (
    <QueryClientProvider client={queryClient}>
      <Refine resources={resources} /* other refine props */>
        {/* Your routes and other components */}
      </Refine>
    </QueryClientProvider>
  );
};

export default App;

const queryClient = new QueryClient();

const App = () => {
  // Your existing code for resources and useUserIdentity

  return (
    <QueryClientProvider client={queryClient}>
      <Refine resources={resources} /* other refine props */>
        {/* Your routes and other components */}
      </Refine>
    </QueryClientProvider>
  );
};

export default App;

This should resolve the error you're encountering. Make sure to adjust the code according to your specific components and setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-gold•16mo ago

I'm doing like this:

    getUserIdentity: async () => {
      const user = localStorage.getItem("user");
      if (user) {
        const parsedUser = JSON.parse(user);
        return Promise.resolve({
          ...parsedUser,
          hasParent: Boolean(parsedUser.parentUserID),
        });
      }
    },

    getUserIdentity: async () => {
      const user = localStorage.getItem("user");
      if (user) {
        const parsedUser = JSON.parse(user);
        return Promise.resolve({
          ...parsedUser,
          hasParent: Boolean(parsedUser.parentUserID),
        });
      }
    },

xenial-black•16mo ago

it's good. But you cant use refine hooks outside the refine component i believe access control provider documentation is clear. instead of using const enforcer = await newEnforcer(model, adapter); you your authProvider.getidentity and return can field according to your needs

stormy-gold•16mo ago

To use Access Control I will need to rewrite my userSchemas and add field for role? Right? I'm sure it is clear enough, but I'm struggeling still to understand refine, and even React... 😄 This is my first refine app and I'm new with react either @alicanerdurmaz Any chance to help me implementing an access Controler?

xenial-black•16mo ago

i will try when I found time