unwilling-turquoise•8mo ago

Resources having me confused

I tried using useList, but it didn't call the route I added in the list. instead its calling a /campaigns?_end=10&_start=0& route this is how I called the useList:

  const { data: campaigns, isLoading: isLoadingDeals } = useList<Campaign>({
    resource: "campaigns",
  });

  const { data: campaigns, isLoading: isLoadingDeals } = useList<Campaign>({
    resource: "campaigns",
  });

and this is my resource:

export const resources: IResourceItem[] = [
{
    name: "campaigns",
    list: "/gw/campaign/all/dashboard/fetch",
    create: "/campaign/sales/create",
    edit: "/campaign/sales/edit/:id",
    meta: {
      label: "Campaigns",
      icon: <ProjectOutlined />,
    },
  },
]

export const resources: IResourceItem[] = [
{
    name: "campaigns",
    list: "/gw/campaign/all/dashboard/fetch",
    create: "/campaign/sales/create",
    edit: "/campaign/sales/edit/:id",
    meta: {
      label: "Campaigns",
      icon: <ProjectOutlined />,
    },
  },
]

16 Replies

kapa.ai•8mo ago

Hi @script4559. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useList hook in Refine automatically detects the resource parameter from the current route. However, it seems like you're expecting it to use the list property from your resources array as the API endpoint. This is not how Refine works. In Refine, the list property in the resources array is used to define the route in your application where the list view for that resource will be displayed, not the API endpoint. The actual API endpoint is determined by the dataProvider you're using. The useList hook will call the getList method of your dataProvider with the resource parameter you've provided. This getList method should then make a GET request to the appropriate API endpoint. The resource parameter is usually used as part of the API endpoint path, but how it's used exactly depends on how you've implemented your dataProvider. If you want to change the API endpoint that's called when you use the useList hook, you'll need to modify your dataProvider's getList method. Here's an example of how you might implement the getList method in your dataProvider:

const dataProvider: DataProvider = {
  // ...
  getList: async ({ resource }) => {
    const response = await fetch(`/api/${resource}`);
    const data = await response.json();

    return {
      data,
      total: data.length,
    };
  },
  // ...
};

const dataProvider: DataProvider = {
  // ...
  getList: async ({ resource }) => {
    const response = await fetch(`/api/${resource}`);
    const data = await response.json();

    return {
      data,
      total: data.length,
    };
  },
  // ...
};

In this example, if you call useList({ resource: "campaigns" }), it will make a GET request to /api/campaigns. For more information on how to create a data provider, you can refer to the Creating a Data Provider (https://refine.dev/docs/core/providers/data-provider/#creating-a-data-provider) section of the Refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

unwilling-turquoise•8mo ago

@kapa.ai How can I access the "cancel" and "save" button in my create route? I want to make the modal 3 steps before finally submitting the form.

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, you can access the "cancel" and "save" buttons using the useForm or useModalForm hooks. These hooks provide saveButtonProps and cancelButtonProps which contain all the props needed by the "submit" and "cancel" buttons respectively. Here's an example of how you can use these props:

import { useForm } from "@refinedev/mantine";  
import { TextInput } from "@mantine/core";

const CreatePage = () => {  
  const { saveButtonProps, cancelButtonProps, getInputProps } = useForm({  
    initialValues: {  
      name: "",  
      surname: "",  
    },  
    transformValues: (values) => ({  
      fullName: `${values.name} ${values.surname}`,  
    }),  
  });

  return (  
    <Create saveButtonProps={saveButtonProps}>
      <form>  
        <TextInput mt={8} label="Name" placeholder="Name" {...getInputProps("name")} />  
        <TextInput mt={8} label="Surname" placeholder="Surname" {...getInputProps("surname")} />  
        <button type="submit" {...saveButtonProps}>Save</button>
        <button type="button" {...cancelButtonProps}>Cancel</button>
      </form>  
    </Create>  
  );  
};

import { useForm } from "@refinedev/mantine";  
import { TextInput } from "@mantine/core";

const CreatePage = () => {  
  const { saveButtonProps, cancelButtonProps, getInputProps } = useForm({  
    initialValues: {  
      name: "",  
      surname: "",  
    },  
    transformValues: (values) => ({  
      fullName: `${values.name} ${values.surname}`,  
    }),  
  });

  return (  
    <Create saveButtonProps={saveButtonProps}>
      <form>  
        <TextInput mt={8} label="Name" placeholder="Name" {...getInputProps("name")} />  
        <TextInput mt={8} label="Surname" placeholder="Surname" {...getInputProps("surname")} />  
        <button type="submit" {...saveButtonProps}>Save</button>
        <button type="button" {...cancelButtonProps}>Cancel</button>
      </form>  
    </Create>  
  );  
};

In this example, the "Save" button will be disabled and show a loading indicator while the form is being submitted, and the "Cancel" button will reset the form to its initial values when clicked. For a multi-step form, you can use the useStepsForm hook. This hook provides a steps object with currentStep and gotoStep properties that you can use to control which step of the form is currently shown. Here's an example of how you can use useStepsForm to create a multi-step form:

import { useStepsForm } from "@refinedev/mantine";  
import React from "react";
const UserCreate: React.FC = () => {  
  const {  
    saveButtonProps,  
    getInputProps,  
    values,  
    steps: { currentStep, gotoStep },  
  } = useStepsForm({  
    refineCoreProps: { action: "create" },  
    initialValues: {  
      name: "",  
      surname: "",  
    },  
    transformValues: (values) => ({  
      fullName: `${values.name} ${values.surname}`,  
    }),  
  });  

  // ...  
};

import { useStepsForm } from "@refinedev/mantine";  
import React from "react";
const UserCreate: React.FC = () => {  
  const {  
    saveButtonProps,  
    getInputProps,  
    values,  
    steps: { currentStep, gotoStep },  
  } = useStepsForm({  
    refineCoreProps: { action: "create" },  
    initialValues: {  
      name: "",  
      surname: "",  
    },  
    transformValues: (values) => ({  
      fullName: `${values.name} ${values.surname}`,  
    }),  
  });  

  // ...  
};

In this example, you can use currentStep to determine which step of the form to render, and gotoStep to navigate between steps. For more information, refer to the useForm (https://refine.dev/docs/ui-integrations/mantine/hooks/use-form/#how-can-i-change-the-form-data-before-submitting-it-to-the-api), useModalForm (https://refine.dev/docs/packages/react-hook-form/use-modal-form/#savebuttonprops), and useStepsForm (https://refine.dev/docs/api-reference/mantine/hooks/form/useStepsForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

unwilling-turquoise•8mo ago

@kapa.ai its a modal form so my hook is useModalForm. How can I do steps with modal form

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To create a multi-step form within a modal, you can use the useStepsForm hook in conjunction with useModalForm. The useStepsForm hook allows you to split your form into multiple sections using an Ant Design Steps component, which can be used to manage your form. Here's an example of how you can use useStepsForm to create a multi-step form:

import { useStepsForm } from "@pankod/refine";

const UserCreate: React.FC = () => {  
  const {  
    saveButtonProps,  
    getInputProps,  
    values,  
    steps: { currentStep, gotoStep },  
  } = useStepsForm({  
    refineCoreProps: { action: "create" },
    initialValues: {  
      name: "",  
      surname: "",  
    },  
    transformValues: (values) => ({  
      fullName: `${values.name} ${values.surname}`,  
    }),  
  });  

  // ...  
};

import { useStepsForm } from "@pankod/refine";

const UserCreate: React.FC = () => {  
  const {  
    saveButtonProps,  
    getInputProps,  
    values,  
    steps: { currentStep, gotoStep },  
  } = useStepsForm({  
    refineCoreProps: { action: "create" },
    initialValues: {  
      name: "",  
      surname: "",  
    },  
    transformValues: (values) => ({  
      fullName: `${values.name} ${values.surname}`,  
    }),  
  });  

  // ...  
};

In this example, you can use currentStep to determine which step of the form to render, and gotoStep to navigate between steps. For more information, refer to the useStepsForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-steps-form/) documentation. To use this within a modal, you can use the useModalForm hook. This hook allows you to manage a form inside of your modal component. It returns Ant Design Form and Modal props. Here's an example of how you can use useModalForm:

import { useModalForm } from "@pankod/refine";

const { formProps, modalProps } = useModalForm("posts");

return (
    <Modal {...modalProps}>
        <Form {...formProps}>
            // Your form fields go here
        </Form>
    </Modal>
);

import { useModalForm } from "@pankod/refine";

const { formProps, modalProps } = useModalForm("posts");

return (
    <Modal {...modalProps}>
        <Form {...formProps}>
            // Your form fields go here
        </Form>
    </Modal>
);

For more information, refer to the useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/) documentation. Please note that you would need to manage the state of the steps within the modal yourself, as useModalForm does not inherently support multi-step forms. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

unwilling-turquoise•8mo ago

@kapa.ai what about the cancel button, how can I get it?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useModalForm and useForm hooks in Refine provide cancelButtonProps which contain all the props needed by the "cancel" button. Here's an example of how you can use these props:

import { useModalForm } from "@pankod/refine";
import { Button } from "antd";

const MyComponent = () => {
  const { formProps, modalProps, cancelButtonProps } = useModalForm("posts");

  return (
    <Modal {...modalProps}>
      <Form {...formProps}>
        // Your form fields go here
        <Button {...cancelButtonProps}>Cancel</Button>
      </Form>
    </Modal>
  );
};

import { useModalForm } from "@pankod/refine";
import { Button } from "antd";

const MyComponent = () => {
  const { formProps, modalProps, cancelButtonProps } = useModalForm("posts");

  return (
    <Modal {...modalProps}>
      <Form {...formProps}>
        // Your form fields go here
        <Button {...cancelButtonProps}>Cancel</Button>
      </Form>
    </Modal>
  );
};

In this example, the "Cancel" button will reset the form to its initial values when clicked. For more information, refer to the useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

unwilling-turquoise•8mo ago

@kapa.ai I created a modal form using useModalForm then added a step form to it which I did myself, now how can I call the validation function of the form when i click my next button?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To manually trigger form validation in Refine, you can use the trigger method from the useForm or useModalForm hooks. This method allows you to manually trigger validation for specified fields or all fields. Here's an example of how you can use the trigger method:

import { useModalForm } from "@pankod/refine";

const MyComponent = () => {
  const { formProps, modalProps, trigger } = useModalForm("posts");

  const handleNextClick = async () => {
    const isValid = await trigger(); // trigger validation for all fields

    if (isValid) {
      // If the form is valid, proceed to the next step
    }
  };

  return (
    <Modal {...modalProps}>
      <Form {...formProps}>
        // Your form fields go here
        <Button onClick={handleNextClick}>Next</Button>
      </Form>
    </Modal>
  );
};

import { useModalForm } from "@pankod/refine";

const MyComponent = () => {
  const { formProps, modalProps, trigger } = useModalForm("posts");

  const handleNextClick = async () => {
    const isValid = await trigger(); // trigger validation for all fields

    if (isValid) {
      // If the form is valid, proceed to the next step
    }
  };

  return (
    <Modal {...modalProps}>
      <Form {...formProps}>
        // Your form fields go here
        <Button onClick={handleNextClick}>Next</Button>
      </Form>
    </Modal>
  );
};

In this example, when the "Next" button is clicked, it will trigger validation for all fields in the form. If the form is valid, it will proceed to the next step. For more information, refer to the useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

unwilling-turquoise•8mo ago

@kapa.ai my api endpoint routes does not follow the standard REST Api way of having one route to hand all methods(post, get, put, etc.). How can I make data provider work for me?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: @script4559 That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!