filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-30 02:12:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(Search): improve performance

Browse Source
This commit is contained in:
Aminejv 2022-01-04 18:19:42 +01:00
parent 41c8ddffd5
commit 79d34d78c4
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/core/Search/index.js
View File

@ -48,14 +48,14 @@ const useSearchViaParams = ({ params, handleSearch }) => {
}, [params.s]); }, [params.s]);
}; };
const useDebouncedSearch = ({ handleSearch }) => { const useDebouncedOnChange = ({ setQuery, handleSearch }) => {
const { query } = useSearchStore();
const timeRef = React.useRef(); const timeRef = React.useRef();
React.useEffect(() => { const handleChange = (e) => {
timeRef.current = setTimeout(() => handleSearch(query), 300); clearTimeout(timeRef.current);
return () => clearTimeout(timeRef.current); const { value } = e.target;
}, [query]); timeRef.current = setTimeout(() => (setQuery(value), handleSearch(value)), 300);
};
return handleChange;
}; };
function Input({ viewer, data, page, onAction }) { function Input({ viewer, data, page, onAction }) {
@ -124,7 +124,7 @@ function Input({ viewer, data, page, onAction }) {
useSearchViaParams({ params: page.params, onAction, handleSearch }); useSearchViaParams({ params: page.params, onAction, handleSearch });
useDebouncedSearch({ handleSearch }); const handleChange = useDebouncedOnChange({ setQuery, handleSearch });
return ( return (
<div <div
@ -146,8 +146,7 @@ function Input({ viewer, data, page, onAction }) {
name="search" name="search"
placeholder={`Search ${!viewer ? "slate.host" : ""}`} placeholder={`Search ${!viewer ? "slate.host" : ""}`}
onSubmit={() => handleSearch(query)} onSubmit={() => handleSearch(query)}
value={query} onChange={handleChange}
onChange={(e) => setQuery(e.target.value)}
/> />
</div> </div>
); );