rare-sapphire•2y ago

call the api only on button click.

const [searchTerm, setSearchTerm] = useState(''); // const [searchDetail, setSearchDetail] = useState(''); const [isApiEnabled, setIsApiEnabled] = useState(false); const [buttonLoading, setButtonLoading] = useState<boolean>(false); // const [searchResults, setSearchResults] = useState([]); const { data: customerDetails } = useCustom< CustomerSearchResponse, ApiErrorResponse >({ method: 'get', url: ${apiUrl}/${apiPaths.customer.searchCustomer(searchTerm)}, errorNotification: (error: ApiErrorResponse | undefined) => { return { message: error?.detailedMessage '', type: 'error', }; }, queryOptions: { enabled: isApiEnabled }, }); return ( <Show title={t('pages.customer.search.title')} canEdit={false} headerButtons={() => <div />} > <Form className="mb-3" layout="inline" onFinish={() => { if ( searchTerm === '' searchTerm === undefined || searchTerm === null ) { setIsApiEnabled(false); } else { setIsApiEnabled(true); } setButtonLoading(true); setButtonLoading(false); }} > <Form.Item name="searchText" className={w-64}} > <Input placeholder={'search by coinomId/emailId'} onChange={(e) => setSearchTerm(e.target.value)} allowClear /> </Form.Item> <Button htmlType="submit" type="default" shape={'round'} icon={<SearchOutlined />} loading={buttonLoading} onClick={() => { setSearchTerm(searchTerm); }} > {t('buttons.search')} </Button> </Form> <div></div> </Show>

8 Replies

kapa.ai•2y ago

Hi @amala. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided extracts, it seems like you're trying to make an API call only when a button is clicked. In refine, you can achieve this by using the useForm or useTable hooks with the onSearch function. This function is called when the form is submitted, which can be triggered by a button click. Here's an example of how you can use the onSearch function with useForm:

import { useForm } from "@refinedev/react-hook-form";  

const PostEditPage: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm();  

 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <input {...register("title", { required: true })} />  
 {errors.title && <span>This field is required</span>}  
 <input type="submit" value="Submit" />  
 {formLoading && <p>Loading</p>}  
 </form>  
 );  
};

import { useForm } from "@refinedev/react-hook-form";  

const PostEditPage: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm();  

 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <input {...register("title", { required: true })} />  
 {errors.title && <span>This field is required</span>}  
 <input type="submit" value="Submit" />  
 {formLoading && <p>Loading</p>}  
 </form>  
 );  
};

In this example, onFinish is a function that is called when the form is submitted. The handleSubmit function from useForm is used to handle the form submission, and it takes onFinish as a parameter. When the submit button is clicked, the form data is submitted and onFinish is called. For more information, you can check the following documentation pages: - useForm hook (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/) - useTable hook (https://refine.dev/docs/guides-concepts/tables/#search) Please note that the provided code snippets are based on the information available in the extracts and may need to be adjusted to fit your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

rare-sapphireOP•2y ago

@kapa.ai use antd form

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use Ant Design's Form with Refine, you can utilize the useForm hook provided by Refine. This hook helps manage form data and integrates seamlessly with Ant Design's Form component. Here's an example of how you can use the useForm hook with Ant Design's Form:

import { useForm, SaveButton } from "@refinedev/antd";  
import { Form, Input, InputNumber } from "antd";  
  
export const ProductCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IProduct>();  
  
 return (  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Price"  
 name="price"  
 rules={[{ required: true }]}  
 >  
 <InputNumber />  
 </Form.Item>  
 <Form.Item  
 label="Description"  
 name="description"  
 rules={[{ required: true }]}  
 >  
 <Input.TextArea rows={4} />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}  
  
interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
}

import { useForm, SaveButton } from "@refinedev/antd";  
import { Form, Input, InputNumber } from "antd";  
  
export const ProductCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IProduct>();  
  
 return (  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Price"  
 name="price"  
 rules={[{ required: true }]}  
 >  
 <InputNumber />  
 </Form.Item>  
 <Form.Item  
 label="Description"  
 name="description"  
 rules={[{ required: true }]}  
 >  
 <Input.TextArea rows={4} />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}  
  
interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
}

In this example, useForm is used to handle form data. The formProps and saveButtonProps properties are destructured from the useForm hook and passed to the Form and SaveButton components, respectively. The formProps property contains all the necessary properties for the form to handle the POST request for its data automatically, while the saveButtonProps property handles the submission functionality of the form via the save button. For more information, you can refer to the useForm hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

rare-sapphireOP•2y ago

@kapa.ai use ant d form with get api

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, the useForm hook is primarily used for handling form data and submissions. It doesn't directly fetch data from an API. However, it can be used in conjunction with other hooks like useEffect and fetch API to retrieve data. Here's an example of how you can use useForm in a component that fetches data from an API using the fetch API:

import { useEffect, useState } from "react";  
import { useForm } from "@refinedev/react-hook-form";  

function MyComponent() {  
 const [data, setData] = useState(null);  
 const { register } = useForm();

 useEffect(() => {  
 const fetchData = async () => {  
 const response = await fetch("<<https://api.example.com/data>">);  
 const data = await response.json();  
 setData(data);  
 };  
  
 fetchData();  
 }, []);  
  
 return (  
 <div>  
 {/* Display the fetched data */}
 {data && <p>{data.message}</p>}  
 {/* Use the register function from useForm for form inputs */}
 <input {...register("name")} />  
 </div>  
 );  
}

import { useEffect, useState } from "react";  
import { useForm } from "@refinedev/react-hook-form";  

function MyComponent() {  
 const [data, setData] = useState(null);  
 const { register } = useForm();

 useEffect(() => {  
 const fetchData = async () => {  
 const response = await fetch("<<https://api.example.com/data>">);  
 const data = await response.json();  
 setData(data);  
 };  
  
 fetchData();  
 }, []);  
  
 return (  
 <div>  
 {/* Display the fetched data */}
 {data && <p>{data.message}</p>}  
 {/* Use the register function from useForm for form inputs */}
 <input {...register("name")} />  
 </div>  
 );  
}

In this example, useForm is used to handle form data, while useEffect and fetch are used to retrieve data from an API. The fetched data is stored in the data state variable using the setData function. The useEffect hook with an empty dependency array [] ensures the data fetching only occurs once when the component mounts. Please note that the useForm hook is part of the Refine library, which is a framework for building data-intensive applications in React. It provides a lot of out-of-the-box functionality for rapid development, including form handling with useForm. For more information, you can refer to the useForm hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/). Source: Discord support thread: useForm (https://discord.com/channels/837692625737613362/1160890494289715200) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

call the api only on button click.

Did you find this page helpful?