React Admin resource name with path variable

Question

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>
    );
  }

score 0 · Accepted Answer · answered Nov 29 '21 at 15:51

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.

let authProvider = FirebaseAuthProvider(firebaseConfig, options);
const login = authProvider.login;
authProvider = {
  ...authProvider,
  login: async (params) => {
    try {
      const user = await login(params);
      const experts = await firebase.firestore().collection("experts").get();
      const docIds: string[] = experts.docs.map((doc) => doc.id);
      localStorage.setItem("emails", JSON.stringify(docIds));
      await timeout(300);
      return user;
    } catch (error) {
      console.error("error", error);
    }
  },
};

React Admin resource name with path variable

1 Answers1