ambitious-aqua•14mo ago

Not having a list page(needs maintainers attention!)

Hey everyone. Is it possible to create only edit/delete/custom page without having a list page? If I want to have it in the sidebar menu?

18 Replies

kapa.ai•14mo ago

Hi @metammodern. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•14mo ago

---------------------- Yes, it is possible to create only edit, delete, or custom pages without having a list page in refine. You can customize the sidebar menu by using the meta prop in the resources configuration of the <Refine> component. Here's an example of how to add a custom edit page to the sidebar menu:

import { CustomEditPage } from "./pages/custom";

function App() {
  return (
    <Refine
      // ...
      resources={[
        {
          name: "custom",
          edit: CustomEditPage,
          meta: { label: "Custom Edit", route: "/custom-edit" },
        },
      ]}
    />
  );
}

import { CustomEditPage } from "./pages/custom";

function App() {
  return (
    <Refine
      // ...
      resources={[
        {
          name: "custom",
          edit: CustomEditPage,
          meta: { label: "Custom Edit", route: "/custom-edit" },
        },
      ]}
    />
  );
}

In this example, we're adding a custom edit page called CustomEditPage to the sidebar menu with the label "Custom Edit" and a custom route /custom-edit. You can do the same for delete or any other custom pages. Keep in mind that you'll need to implement the functionality for the custom edit or delete pages yourself. You can refer to the following extracts for examples on how to use useDelete and <Edit> components: - useDelete example (https://refine.dev/blog/refine-react-invoice-generator-3#adding-crud-pages) - Edit component example (https://refine.dev/docs/api-reference/antd/components/basic-views/edit#resource) Remember to replace the imported components and resource names with the ones relevant to your project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Adding CRUD Pages | refine

We'll be adding CRUD pages for Company, Client and Contact resources in this post.

Edit | refine

`` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button.

kapa.ai•14mo ago

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

ambitious-aqua•14mo ago

@kapa.ai can you write me an implementation of a custom page for deleting resource, that has a small form with 1 input(for resource id) and a button to submit deletion? And then shows a notification that deletion was successful(better using a modal window).

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here's an implementation of a custom delete page with a form containing an input for the resource ID and a button to submit the deletion. This example uses the useDelete hook and the NotificationProvider for showing a success notification. First, create a new file called CustomDeletePage.tsx and add the following code:

import { useState } from "react";
import { useDelete, useForm, useNotification } from "@pankod/refine";

const CustomDeletePage = () => {
  const [resourceId, setResourceId] = useState("");
  const { mutate: deleteResource } = useDelete();
  const { open } = useNotification();

  const handleSubmit = async () => {
    try {
      await deleteResource({
        id: resourceId,
        resource: "yourResourceName",
      });
      open({
        message: `Resource with ID ${resourceId} deleted successfully.`,
        type: "success",
      });
    } catch (error) {
      open({
        message: `Error deleting resource with ID ${resourceId}.`,
        type: "error",
      });
    }
  };

  return (
    <div>
      <h1>Delete Resource</h1>
      <input
        type="text"
        value={resourceId}
        onChange={(e) => setResourceId(e.target.value)}
        placeholder="Enter resource ID"
      />
      <button onClick={handleSubmit}>Delete</button>
    </div>
  );
};

export default CustomDeletePage;

import { useState } from "react";
import { useDelete, useForm, useNotification } from "@pankod/refine";

const CustomDeletePage = () => {
  const [resourceId, setResourceId] = useState("");
  const { mutate: deleteResource } = useDelete();
  const { open } = useNotification();

  const handleSubmit = async () => {
    try {
      await deleteResource({
        id: resourceId,
        resource: "yourResourceName",
      });
      open({
        message: `Resource with ID ${resourceId} deleted successfully.`,
        type: "success",
      });
    } catch (error) {
      open({
        message: `Error deleting resource with ID ${resourceId}.`,
        type: "error",
      });
    }
  };

  return (
    <div>
      <h1>Delete Resource</h1>
      <input
        type="text"
        value={resourceId}
        onChange={(e) => setResourceId(e.target.value)}
        placeholder="Enter resource ID"
      />
      <button onClick={handleSubmit}>Delete</button>
    </div>
  );
};

export default CustomDeletePage;

Replace yourResourceName with the actual name of the resource you want to delete. Next, update your App.tsx file to include the custom delete page in the sidebar menu:

import { CustomDeletePage } from "./CustomDeletePage";

function App() {
  return (
    <Refine
      // ...
      resources={[
        {
          name: "custom-delete",
          edit: CustomDeletePage,
          meta: { label: "Custom Delete", route: "/custom-delete" },
        },
      ]}
    />
  );
}

import { CustomDeletePage } from "./CustomDeletePage";

function App() {
  return (
    <Refine
      // ...
      resources={[
        {
          name: "custom-delete",
          edit: CustomDeletePage,
          meta: { label: "Custom Delete", route: "/custom-delete" },
        },
      ]}
    />
  );
}

This implementation will show a success notification using the NotificationProvider when the deletion is successful. If you prefer to use a modal window for notifications, you'll need to implement it using a UI library of your choice, such as Ant Design or Mantine, and handle the modal state in your custom delete page component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

ambitious-aqua•14mo ago

@kapa.ai meta doesn't exist on type ResourceProp. Was it added in later releases? I have refine core v3.18

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•14mo ago

---------------------- I apologize for the confusion. The meta prop was introduced in refine 4.x.x, and it seems you are using refine core v3.18. In refine 3.x.x, you should use the options prop instead of meta. Here's how you can update the example for refine 3.x.x: Update your App.tsx file to include the custom delete page in the sidebar menu using the options prop:

import { CustomDeletePage } from "./CustomDeletePage";

function App() {
  return (
    <Refine
      // ...
      resources={[
        {
          name: "custom-delete",
          edit: CustomDeletePage,
          options: { label: "Custom Delete", route: "/custom-delete" },
        },
      ]}
    />
  );
}

import { CustomDeletePage } from "./CustomDeletePage";

function App() {
  return (
    <Refine
      // ...
      resources={[
        {
          name: "custom-delete",
          edit: CustomDeletePage,
          options: { label: "Custom Delete", route: "/custom-delete" },
        },
      ]}
    />
  );
}

Please note that the options prop is deprecated in refine 4.x.x, and it's recommended to upgrade to the latest version of refine to take advantage of the new features and improvements. You can follow the migration guide (https://refine.dev/docs/migration-guide/3x-to-4x) to upgrade from 3.x.x to 4.x.x. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Migrating from 3.x.x to 4.x.x | refine

Motivation behind the release

kapa.ai•14mo ago

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

ambitious-aqua•14mo ago

@kapa.ai actually I also had to use routerProvider, and I found it here. https://refine.dev/docs/3.xx.xx/advanced-tutorials/custom-pages/#layout-for-custom-pages Leaving for anyone else to find. Thanks and bye bye:)

Custom Pages | refine

This document is related to how to create custom pages for react applications. Since Nextjs and Remix have a file system based router built on the page concept, you can create your custom pages under the pages or routes folder.

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•14mo ago

---------------------- I'm glad you found the solution for your version of refine. For anyone else looking for the same information, in refine 3.x.x, you can use the routerProvider to create custom pages. Here's the documentation link (https://refine.dev/docs/3.xx.xx/advanced-tutorials/custom-pages/#layout-for-custom-pages) for reference. If you have any more questions or need further assistance, feel free to ask. Good luck with your project! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Custom Pages | refine

kapa.ai•14mo ago

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

ambitious-aqua•14mo ago

@kapa.ai I've got another issue: in refine v3.18 I've created a separate custom page and a resource with empty list page. My resource is called "user" and my cusotm page is under "/delete-user" route. But when I click "User" on sidebar, it navigates me to "/user" and not to "/user-delete". How do I make it navigate to "/delete-user"? When I put {options: { route: '/delete-user'}} and click the page in Sidebar I get an empty page opened at "http://delete-user/". What causes this? Do I have to declate full url as route?

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In refine 3.x.x, you can use the options prop to customize the route for a resource. However, it seems like there's an issue with the route configuration in your case. To fix this, you can try the following steps: 1. Make sure you have the correct route configuration in your App.tsx file. You should have a custom route for your "delete-user" page:

import {{ CustomDeletePage }} from "./CustomDeletePage";

function App() {{
  return (
    <Refine
      // ...
      resources={{[
        {{
          name: "user",
          list: "",
          options: {{ label: "User", route: "/delete-user" }},
        }},
      ]}}
    />
  );
}}

import {{ CustomDeletePage }} from "./CustomDeletePage";

function App() {{
  return (
    <Refine
      // ...
      resources={{[
        {{
          name: "user",
          list: "",
          options: {{ label: "User", route: "/delete-user" }},
        }},
      ]}}
    />
  );
}}

2. Ensure that you have the correct route configuration for your custom page in your router configuration. You should have something like this:

import {{ Route }} from "react-router-dom";
import {{ CustomDeletePage }} from "./CustomDeletePage";

// ...

<Route path="/delete-user" component={{CustomDeletePage}} />

import {{ Route }} from "react-router-dom";
import {{ CustomDeletePage }} from "./CustomDeletePage";

// ...

<Route path="/delete-user" component={{CustomDeletePage}} />

By following these steps, clicking on the "User" item in the sidebar should navigate you to the "/delete-user" route and display the CustomDeletePage component. If you still encounter issues, please double-check your route configurations and make sure there are no typos or incorrect paths. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

ambitious-aqua•14mo ago

For anyone who tries to do the same: I just named my resource "delete-user" and it started working Can someone please tell why having options: route: "/delete-user" is opening a "http://delete-user/" url?