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:
errorNotification: (error: ApiErrorResponse | undefined) => {
return {
message: error?.detailedMessage
searchTerm === undefined ||
searchTerm === null
) {
setIsApiEnabled(false);
} else {
setIsApiEnabled(true);
}
setButtonLoading(true);
setButtonLoading(false);
}}
>
<Form.Item
name="searchText"
className={
>
<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>
// 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
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>
