useful-bronze
useful-bronze15mo 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
kapa.ai15mo 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
kapa.ai15mo ago
<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
extended-salmon
extended-salmon15mo ago
extended-salmon
extended-salmon15mo ago
if you don't want to use 3rd party provider like casbin. You can implement your own logic with your API
useful-bronze
useful-bronze15mo 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
kapa.ai15mo ago
Let me check the knowledge base for you. One moment! :books:
extended-salmon
extended-salmon15mo ago
You cannot use useGetIdentity outside refine
kapa.ai
kapa.ai15mo 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
kapa.ai15mo ago
<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
useful-bronze
useful-bronze15mo 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),
});
}
},
extended-salmon
extended-salmon15mo 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
useful-bronze
useful-bronze15mo 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?
extended-salmon
extended-salmon15mo ago
i will try when I found time