filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-26 04:19:49 +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]);
};
const useDebouncedSearch = ({ handleSearch }) => {
const { query } = useSearchStore();
const useDebouncedOnChange = ({ setQuery, handleSearch }) => {
const timeRef = React.useRef();
React.useEffect(() => {
timeRef.current = setTimeout(() => handleSearch(query), 300);
return () => clearTimeout(timeRef.current);
}, [query]);
const handleChange = (e) => {
clearTimeout(timeRef.current);
const { value } = e.target;
timeRef.current = setTimeout(() => (setQuery(value), handleSearch(value)), 300);
};
return handleChange;
};
function Input({ viewer, data, page, onAction }) {
@ -124,7 +124,7 @@ function Input({ viewer, data, page, onAction }) {
useSearchViaParams({ params: page.params, onAction, handleSearch });
useDebouncedSearch({ handleSearch });
const handleChange = useDebouncedOnChange({ setQuery, handleSearch });
return (
<div
@ -146,8 +146,7 @@ function Input({ viewer, data, page, onAction }) {
name="search"
placeholder={`Search ${!viewer ? "slate.host" : ""}`}
onSubmit={() => handleSearch(query)}
value={query}
onChange={(e) => setQuery(e.target.value)}
onChange={handleChange}
/>
</div>
);