How to adding Resource type?
I managed to work with current resources. However I have a list: EmployeeList, where I have create opportunity (by admin), when admin wants to create a new Employee it is actually sends an invitation link to the email (saves the invitation to db, the email (where was sent), the Token (random generated) and parentUserId (senders Id).
I would like to make a new page for registration by invitation. So for now a page where it is displayed if the token exist in the db (invitation is valid) and if so who is the inviter. Where and how should I add this page? I assume it is not resources, or it is?
11 Replies
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're correct that this registration by invitation page is not a typical resource. Instead, you can create a custom page in refine. Here's how you can do it:
1. First, create a new folder and file for your custom page, e.g.,
src/pages/InvitationRegistration/index.tsx
.
2. In this new file, create a React component for your invitation registration page. You can fetch the invitation data from your database using a custom hook or any other method you prefer. Display the inviter's information if the token exists and is valid.
3. Next, you need to add a route for this custom page. Since refine uses react-router-dom
for routing, you can create a custom route for your invitation registration page. Open your App.tsx
file and import the BrowserRouter
, Route
, and Switch
components from react-router-dom
.
4. Wrap your <Refine>
component with the <BrowserRouter>
component. Inside the <Refine>
component, use the <Switch>
component to define your custom route using the <Route>
component. Set the path
prop to the desired URL path for your invitation registration page, and set the element
prop to your custom page component.
Here's an example of how your App.tsx
file should look like after adding the custom route:
Now, when you navigate to /invitation-registration/:token
, it will display your custom invitation registration page. Replace :token
with the actual token value in the URL.
Remember that the code snippets provided here are just examples, and you should adapt them to your specific use case and data fetching method.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
flat-fuchsia•17mo ago
@kapa.ai
Module '"react-router-dom"' has no exported member 'Switch'.ts(2305)
import Switch
Let me check the knowledge base for you. One moment! :books:
----------------------
Apologies for the confusion. In React Router v6, the
Switch
component has been replaced with the Routes
component. Here's the updated example for your App.tsx
file:
Now, when you navigate to /invitation-registration/:token
, it will display your custom invitation registration page. Replace :token
with the actual token value in the URL.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
flat-fuchsia•17mo ago
@kapa.ai
caught Error: useRoutes() may be used only in the context of a <Router> component.
at invariant (router.ts:5:1)
at useRoutes (hooks.tsx:270:1)
at Routes (components.tsx:256:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
i
Let me check the knowledge base for you. One moment! :books:
----------------------
I apologize for the confusion earlier. It seems that the
Routes
component should be placed outside the Refine
component. Here's the updated example for your App.tsx
file:
In this example, we place the Routes
component outside the Refine
component and use a catch-all route (path="*"
) to render the Refine
component for all other paths. The custom route for the invitation registration page is placed before the catch-all route.
Now, when you navigate to /invitation-registration/:token
, it will display your custom invitation registration page. Replace :token
with the actual token value in the URL.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
flat-fuchsia•17mo ago
@kapa.ai
caught Error: useRoutes() may be used only in the context of a <Router> component.
at invariant (router.ts:5:1)
at useRoutes (hooks.tsx:270:1)
at Routes (components.tsx:256:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
i
Still getting the same error
Let me check the knowledge base for you. One moment! :books:
----------------------
I apologize for the confusion earlier. It seems that the
Routes
component should be placed outside the Refine
component. Here's the updated example for your App.tsx
file:
In this example, we place the Routes
component outside the Refine
component and use a catch-all route (path="*"
) to render the Refine
component for all other paths. The custom route for the invitation registration page is placed before the catch-all route.
Now, when you navigate to /invitation-registration/:token
, it will display your custom invitation registration page. Replace :token
with the actual token value in the URL.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below