adverse-sapphire•2y ago

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

kapa.ai•2y 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'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:

import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Refine } from "@refinedev/core";
// ... other imports ...

import { InvitationRegistration } from "pages/InvitationRegistration";

function App() {
  return (
    <BrowserRouter>
      <Refine
        // ... other refine props ...
      >
        <Switch>
          <Route
            path="/invitation-registration/:token"
            element={<InvitationRegistration />}
          />
        </Switch>
      </Refine>
    </BrowserRouter>
  );
}

export default App;

import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Refine } from "@refinedev/core";
// ... other imports ...

import { InvitationRegistration } from "pages/InvitationRegistration";

function App() {
  return (
    <BrowserRouter>
      <Refine
        // ... other refine props ...
      >
        <Switch>
          <Route
            path="/invitation-registration/:token"
            element={<InvitationRegistration />}
          />
        </Switch>
      </Refine>
    </BrowserRouter>
  );
}

export default App;

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: ----------------------

kapa.ai•2y ago

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

adverse-sapphireOP•2y ago

@kapa.ai Module '"react-router-dom"' has no exported member 'Switch'.ts(2305) import Switch

kapa.ai•2y ago

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:

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Refine } from "@refinedev/core";
// ... other imports ...

import { InvitationRegistration } from "pages/InvitationRegistration";

function App() {
  return (
    <BrowserRouter>
      <Refine
        // ... other refine props ...
      >
        <Routes>
          <Route
            path="/invitation-registration/:token"
            element={<InvitationRegistration />}
          />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
}

export default App;

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Refine } from "@refinedev/core";
// ... other imports ...

import { InvitationRegistration } from "pages/InvitationRegistration";

function App() {
  return (
    <BrowserRouter>
      <Refine
        // ... other refine props ...
      >
        <Routes>
          <Route
            path="/invitation-registration/:token"
            element={<InvitationRegistration />}
          />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
}

export default App;

kapa.ai•2y ago

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

adverse-sapphireOP•2y 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

kapa.ai•2y ago

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:

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Refine } from "@refinedev/core";
// ... other imports ...

import { InvitationRegistration } from "pages/InvitationRegistration";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/invitation-registration/:token"
          element={<InvitationRegistration />}
        />
        <Route
          path="*"
          element={
            <Refine
              // ... other refine props ...
            />
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Refine } from "@refinedev/core";
// ... other imports ...

import { InvitationRegistration } from "pages/InvitationRegistration";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/invitation-registration/:token"
          element={<InvitationRegistration />}
        />
        <Route
          path="*"
          element={
            <Refine
              // ... other refine props ...
            />
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

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: ----------------------

kapa.ai•2y ago

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

adverse-sapphireOP•2y 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

kapa.ai•2y ago

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Refine } from "@refinedev/core";
// ... other imports ...

import { InvitationRegistration } from "pages/InvitationRegistration";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/invitation-registration/:token"
          element={<InvitationRegistration />}
        />
        <Route
          path="*"
          element={
            <Refine
              // ... other refine props ...
            />
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Refine } from "@refinedev/core";
// ... other imports ...

import { InvitationRegistration } from "pages/InvitationRegistration";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/invitation-registration/:token"
          element={<InvitationRegistration />}
        />
        <Route
          path="*"
          element={
            <Refine
              // ... other refine props ...
            />
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

kapa.ai•2y ago

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

How to adding Resource type?

Did you find this page helpful?