|
@@ -7,6 +7,7 @@ import { ReactComponent as IconSearch } from '@assets/img/svg/ico_search_gray.sv
|
|
|
import useSearch from '@src/hooks/useSearch';
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
import { fetchExploreKeyword } from '@src/store/reducers/ExploreReducer';
|
|
|
+import { useDebounce } from 'usehooks-ts';
|
|
|
|
|
|
const cx = classNames.bind(styles);
|
|
|
|
|
@@ -22,7 +23,7 @@ const CollectionLayerFilter: React.FC<IOwnProps> = ({
|
|
|
collection,
|
|
|
setCollection,
|
|
|
update,
|
|
|
- hide,
|
|
|
+ hide = () => {},
|
|
|
handler
|
|
|
}) => {
|
|
|
const dispatch = useDispatch();
|
|
@@ -30,14 +31,14 @@ const CollectionLayerFilter: React.FC<IOwnProps> = ({
|
|
|
const [selected, setSelected] = useState<string>(collection);
|
|
|
const { keyword, setKeyword, onKeyPress } = useSearch();
|
|
|
const { collectionList } = useSelector(store => store.explore);
|
|
|
-
|
|
|
+ const debounceKeyword = useDebounce(keyword, 1000);
|
|
|
useEffect(() => {
|
|
|
setSelected(collection);
|
|
|
}, [update]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
- dispatch(fetchExploreKeyword(keyword));
|
|
|
- }, [keyword]);
|
|
|
+ dispatch(fetchExploreKeyword(debounceKeyword));
|
|
|
+ }, [debounceKeyword]);
|
|
|
|
|
|
const handleClick = (title: string) => {
|
|
|
if (title === selected) {
|
|
@@ -54,10 +55,14 @@ const CollectionLayerFilter: React.FC<IOwnProps> = ({
|
|
|
const handleSubmit = () => {
|
|
|
setCollection(selected);
|
|
|
hide();
|
|
|
- setKeyword('');
|
|
|
+ // setKeyword('');
|
|
|
handler?.();
|
|
|
};
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
+ setCollection(selected);
|
|
|
+ handler?.();
|
|
|
+ }, [selected])
|
|
|
return (
|
|
|
<div className={cx('ly_filter')}>
|
|
|
<div className={cx('search_wrap')}>
|