Add debounce for 300 ms when searching

This commit is contained in:
Faheem Abrar 2019-12-13 10:55:47 -05:00
parent dc5430e53d
commit 0a68db1f38
No known key found for this signature in database
GPG Key ID: CD6BC6DDB7A81E33
2 changed files with 18 additions and 8 deletions

View File

@ -7,6 +7,7 @@ import { MenuItem } from '../SideMenu/MenuItem';
import { MarkerService } from '../../services/MarkerService';
import { SearchResult } from '../../services/SearchWorker.worker';
import { bind, debounce } from 'decko';
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
import {
ClearIcon,
@ -99,6 +100,14 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
this.props.marker.mark(term);
}
@bind
@debounce(300)
searchCallback(searchTerm: string) {
this.props.search.search(searchTerm).then(res => {
this.setResults(res, searchTerm);
});
}
search = (event: React.ChangeEvent<HTMLInputElement>) => {
const q = event.target.value;
if (q.length < 3) {
@ -106,13 +115,12 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
return;
}
this.setState({
this.setState(
{
term: q,
});
this.props.search.search(event.target.value).then(res => {
this.setResults(res, q);
});
},
() => this.searchCallback(this.state.term),
);
};
render() {

View File

@ -387,7 +387,9 @@ describe('Utils', () => {
expect(pluralizeType('objects (Pet)')).toEqual('objects (Pet)');
expect(pluralizeType('strings <email>')).toEqual('strings <email>');
expect(pluralizeType('objects or strings')).toEqual('objects or strings');
expect(pluralizeType('objects (Pet) or numbers <int64>')).toEqual('objects (Pet) or numbers <int64>');
expect(pluralizeType('objects (Pet) or numbers <int64>')).toEqual(
'objects (Pet) or numbers <int64>',
);
});
});