add threshold functionality to SearchBar

js/actions/piece_list_actions.js

@@ -22,10 +22,10 @@ class PieceListActions {
         this.actions.updatePieceList({
             page,
             pageSize,
-            search,
             orderBy,
             orderAsc,
             filterBy,
+            search: '',
             pieceList: [],
             pieceListCount: -1,
             unfilteredPieceListCount: -1

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -11,6 +11,7 @@ let PieceListToolbar = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
         searchFor: React.PropTypes.func,
+        searchQuery: React.PropTypes.string,
         filterParams: React.PropTypes.arrayOf(
             React.PropTypes.shape({
                 label: React.PropTypes.string,
@@ -61,7 +62,7 @@ let PieceListToolbar = React.createClass({
     },
 
     render() {
-        const { className, children, searchFor } = this.props;
+        const { className, children, searchFor, searchQuery } = this.props;
 
         return (
             <div className={className}>
@@ -74,7 +75,8 @@ let PieceListToolbar = React.createClass({
                             <SearchBar
                                 className="pull-right search-bar ascribe-input-glyph"
                                 searchFor={searchFor}
-                                threshold={1000}/>
+                                searchQuery={searchQuery}
+                                threshold={500}/>
                             <span className="pull-right">
                                 {this.getOrderWidget()}
                                 {this.getFilterWidget()}

js/components/piece_list.js

@@ -157,6 +157,7 @@ let PieceList = React.createClass({
                 <PieceListToolbar
                     className="ascribe-piece-list-toolbar"
                     searchFor={this.searchFor}
+                    searchQuery={this.state.search}
                     filterParams={this.props.filterParams}
                     orderParams={this.props.orderParams}
                     filterBy={this.state.filterBy}

js/components/search_bar.js

@@ -13,6 +13,8 @@ const { update } = React.addons;
 const SearchBar = React.createClass({
     propTypes: {
         searchFor: func.isRequired,
+        searchQuery: string.isRequired,
+
         className: string,
 
         // in milliseconds
@@ -22,35 +24,61 @@ const SearchBar = React.createClass({
     getInitialState() {
         return {
             timers: [],
-            currentSearchQuery: ''
+            searchQuery: '',
+            searching: false
         };
     },
 
+    componentDidUpdate(prevProps) {
+        const searchQueryProps = this.props.searchQuery;
+        const searchQueryPrevProps = prevProps.searchQuery;
+        const searchQueryState = this.state.searchQuery;
+        const { searching } = this.state;
+
+        if(searching && (searchQueryProps && searchQueryState && searchQueryProps === searchQueryState || !searchQueryPrevProps && searchQueryProps === searchQueryState)) {
+            this.setState({ searching: false });
+        }
+    },
+
     startTimers(searchQuery) {
         const { timers } = this.state;
         const { threshold } = this.props;
         const timer = {
             searchQuery,
-            cb: setTimeout(this.evaluateTimer, threshold)
+            cb: setTimeout(this.evaluateTimer(timers.length, searchQuery), threshold)
         };
 
-
         const newTimers = update(timers, {$push: [timer]});
         this.setState({ timers: newTimers });
     },
 
-    evaluateTimer() {
+    evaluateTimer(timerIndex, searchQuery) {
-        console.log(this);
+        return () => {
+            const { timers } = this.state;
+
+            if(timers.length <= timerIndex + 1) {
+                // clean the timers array
+                this.setState({ timers: [], searching: true }, () => {
+                    // search for the query
+                    this.props.searchFor(searchQuery);
+                });
+            }
+        };
     },
 
     handleChange({ target: { value }}) {
         this.startTimers(value);
-        this.setState({ currentSearchQuery: value });
+        this.setState({ searchQuery: value });
     },
 
     render() {
-        const searchIcon = <Glyphicon glyph='search' className="filter-glyph"/>;
+        let searchIcon = <Glyphicon glyph='search' className="filter-glyph"/>;
         const { className } = this.props;
+        const { searching } = this.state;
+
+        if(searching) {
+            searchIcon = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>;
+        }
 
         return (
             <span className={className}>