84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { Select, Spin } from 'antd';
|
|
import { useNavigate, useSearchParams } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { LuSearch } from 'react-icons/lu';
|
|
import { useGetBaseProduct } from '../../../api/baseProduct';
|
|
import { Product } from '../../../types/item';
|
|
import _ from 'lodash';
|
|
|
|
interface SearchButtonProps {
|
|
setOpen: (open: boolean) => void;
|
|
setNoDataFound: (noData: boolean) => void;
|
|
}
|
|
|
|
const SearchButton: React.FC<SearchButtonProps> = ({ setOpen, setNoDataFound }) => {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation();
|
|
const [searchParams] = useSearchParams();
|
|
const [query, setQuery] = useState<string | null>(searchParams.get('search'));
|
|
|
|
const { data, isLoading } = useGetBaseProduct({
|
|
search: query,
|
|
});
|
|
console.log(query ,"query");
|
|
|
|
const BaseProducts = (data?.products as Product[]) || [];
|
|
|
|
useEffect(() => {
|
|
setNoDataFound(!isLoading && BaseProducts.length < 1);
|
|
}, [isLoading, BaseProducts, setNoDataFound]);
|
|
|
|
const options = BaseProducts.map((product: any) => ({
|
|
value: product.base_product_id,
|
|
label: product?.name as string,
|
|
}));
|
|
console.log(BaseProducts?.length, "base_products");
|
|
|
|
const debouncedSearchChange = useCallback(
|
|
_.debounce((value: string) => {
|
|
setQuery(value);
|
|
navigate(`${window.location.pathname}?search=${value}`, {
|
|
replace: true,
|
|
});
|
|
}, 500), // Adjust the debounce delay (in milliseconds) as needed
|
|
[]
|
|
);
|
|
|
|
const handleSearchChange = (value: string) => {
|
|
debouncedSearchChange(value);
|
|
};
|
|
|
|
const handleSelectChange = (value: number) => {
|
|
const selectedProduct = BaseProducts.find(product => product.base_product_id === value);
|
|
if (selectedProduct) {
|
|
setOpen(false);
|
|
navigate(`/product/${selectedProduct.base_product_id}`);
|
|
}
|
|
};
|
|
|
|
const filterOption = (input: string, option?: { label: string }) => {
|
|
if (!option) return false;
|
|
return option?.label.toLowerCase().includes(input.toLowerCase());
|
|
};
|
|
|
|
return (
|
|
<Select
|
|
className='InputAutoComplete'
|
|
suffixIcon={<LuSearch />}
|
|
placeholder={t('Search Product Name') as string}
|
|
allowClear
|
|
showSearch
|
|
loading={isLoading}
|
|
onSearch={handleSearchChange}
|
|
onChange={handleSelectChange}
|
|
options={options}
|
|
optionFilterProp="label"
|
|
filterOption={filterOption}
|
|
notFoundContent={isLoading ? <Spin /> : null}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SearchButton;
|