Is it possible to specify a Resource name in React Admin with a path variable?
Problem
When the user authenticate, if admin, should see a list of email accounts. Clicking on the email it redirects to the path experts/${email}/requests
.
To map this path I need to define a new Resource for each email. The problem of this is that I have to do it before the authentication.
What I would like to have, is a path variable for the resource name. e.g. experts/:email/requests
.
Example of the current implementation
function App() {
const [emails, setEmails] = useState<string[]>([]);
useEffect(() => {
(async () => {
const experts = await firebase.firestore().collection("experts").get();
const docIds: string[] = experts.docs.map((doc) => doc.id);
setEmails(docIds);
})();
}, []);
return (
<Admin
authProvider={authProvider}
dataProvider={dataProvider}
>
{(props) => {
if (props.admin) {
return [
emails.map((email) => {
return (
<Resource
key={email}
options={{ label: `${email}` }}
name={`experts/${email}/requests`}
list={RequestList}
edit={RequestEdit}
/>
);
}),
<Resource name={`experts`} list={ExpertList} />,
];
} else {
return [
<Resource
options={{ label: `${props.email}` }}
name={`experts/${props.email}/requests`}
list={RequestList}
edit={RequestEdit}
/>,
];
}
}}
</Admin>
);
}
Instead of a path variable (not possible with React Admin) I decided to override the login of the Firebase authProvider to fetch the data right after the user log in.
The timeout is needed because it can happen that the localStorage is setup after the first rendering.