ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-29 00:58:03 +02:00
Code Issues Releases Wiki Activity

Simplify SearchBar timing functionality

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-10-12 17:33:07 +02:00
parent cc089fe92b
commit c48c7dc4bd
1 changed files with 19 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/components/search_bar.js
View File

@ -1,6 +1,6 @@
'use strict'; 'use strict';
import React from 'react/addons'; import React from 'react';
import Input from 'react-bootstrap/lib/Input'; import Input from 'react-bootstrap/lib/Input';
import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Glyphicon from 'react-bootstrap/lib/Glyphicon';
@ -8,7 +8,6 @@ import { getLangText } from '../utils/lang_utils';
const { func, string, number } = React.PropTypes; const { func, string, number } = React.PropTypes;
const { update } = React.addons;
const SearchBar = React.createClass({ const SearchBar = React.createClass({
propTypes: { propTypes: {
@ -27,7 +26,7 @@ const SearchBar = React.createClass({
getInitialState() { getInitialState() {
return { return {
timers: [], timer: null,
searchQuery: '', searchQuery: '',
loading: false loading: false
}; };
@ -69,39 +68,28 @@ const SearchBar = React.createClass({
} }
}, },
startTimers(searchQuery) { startTimer(searchQuery) {
const { timers } = this.state; const { timer } = this.state;
const { threshold } = this.props; const { threshold } = this.props;
// the timer waits for the specified threshold time in milliseconds // The timer waits for the specified threshold time in milliseconds
// and then calls `evaluateTimer`, that checks if another letter // and then calls `evaluateTimer`.
// has been added to the query (by checking if there are newer // If another letter has been called in the mean time (timespan < `threshold`),
// timers on the stack aka. `this.state.timers`) // the present timer gets cleared and a new one is added to `this.state`.
const timer = { // This means that `evaluateTimer`, will only be called when the threshold has actually
searchQuery, // passed,
cb: setTimeout(this.evaluateTimer(timers.length, searchQuery), threshold) clearTimeout(timer); // apparently `clearTimeout` can be called with null, without throwing errors
}; const newTimer = setTimeout(this.evaluateTimer(searchQuery), threshold);
const newTimers = update(timers, {$push: [timer]}); this.setState({ timer: newTimer });
this.setState({ timers: newTimers });
}, },
evaluateTimer(timerIndex, searchQuery) { evaluateTimer(searchQuery) {
return () => { return () => {
const { timers } = this.state; this.setState({ timer: null, loading: true }, () => {
// search for the query
// If there have been no timers added to `this.state.timers`, this.props.searchFor(searchQuery);
// while the `threshold` was passed, we start loading });
// by querying the server.
if(timers.length <= timerIndex + 1) {
// However, we're doing that only after setting `this.state.loading`
// to `true`, as we want to display a little spinner while loading.
// We also clean the now worthless `timers` array.
this.setState({ timers: [], loading: true }, () => {
// search for the query
this.props.searchFor(searchQuery);
});
}
}; };
}, },
@ -109,7 +97,7 @@ const SearchBar = React.createClass({
// On each letter entry we're updating the state of the component // On each letter entry we're updating the state of the component
// and start a timer, which we're also pushing to the state // and start a timer, which we're also pushing to the state
// of the component // of the component
this.startTimers(value); this.startTimer(value);
this.setState({ searchQuery: value }); this.setState({ searchQuery: value });
}, },