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

View File

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