Isolate SearchBar from PieceListToolbar and start implement threshold logic

js/actions/piece_list_actions.js

@@ -3,14 +3,11 @@
 import alt from '../alt';
 import Q from 'q';
 
-import ActionQueue from '../utils/action_queue_utils';
-
 import PieceListFetcher from '../fetchers/piece_list_fetcher';
 
-class PieceListActions extends ActionQueue {
-    constructor() {
-        super();
 
+class PieceListActions {
+    constructor() {
         this.generateActions(
             'updatePieceList',
             'updatePieceListRequestActions',
@@ -35,7 +32,6 @@ class PieceListActions extends ActionQueue {
         });
 
         // afterwards, we can load the list
-
         return Q.Promise((resolve, reject) => {
             PieceListFetcher
                 .fetch(page, pageSize, search, orderBy, orderAsc, filterBy)

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -4,13 +4,10 @@ import React from 'react';
 
 import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget';
 import PieceListToolbarOrderWidget from './piece_list_toolbar_order_widget';
+import SearchBar from '../search_bar';
 
-import Input from 'react-bootstrap/lib/Input';
-import Glyphicon from 'react-bootstrap/lib/Glyphicon';
-import { getLangText } from '../../utils/lang_utils';
 
 let PieceListToolbar = React.createClass({
-
     propTypes: {
         className: React.PropTypes.string,
         searchFor: React.PropTypes.func,
@@ -39,11 +36,6 @@ let PieceListToolbar = React.createClass({
         ])
     },
 
-    searchFor() {
-         let searchTerm = this.refs.search.getInputDOMNode().value;
-         this.props.searchFor(searchTerm);
-    },
-
     getFilterWidget(){
         if (this.props.filterParams){
             return (
@@ -55,6 +47,7 @@ let PieceListToolbar = React.createClass({
         }
         return null;
     },
+
     getOrderWidget(){
         if (this.props.orderParams){
             return (
@@ -68,24 +61,20 @@ let PieceListToolbar = React.createClass({
     },
 
     render() {
-        let searchIcon = <Glyphicon glyph='search' className="filter-glyph"/>;
+        const { className, children, searchFor } = this.props;
 
         return (
-            <div className={this.props.className}>
+            <div className={className}>
                 <div className="row">
                     <div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
                         <div className="row">
                             <span className="pull-left">
-                                {this.props.children}
+                                {children}
-                            </span>
-                            <span className="pull-right search-bar ascribe-input-glyph">
-                                <Input
-                                    type='text'
-                                    ref="search"
-                                    placeholder={getLangText('Search%s', '...')}
-                                    onChange={this.searchFor}
-                                    addonAfter={searchIcon} />
                             </span>
+                            <SearchBar
+                                className="pull-right search-bar ascribe-input-glyph"
+                                searchFor={searchFor}
+                                threshold={1000}/>
                             <span className="pull-right">
                                 {this.getOrderWidget()}
                                 {this.getFilterWidget()}

js/components/search_bar.js

@@ -0,0 +1,68 @@
+'use strict';
+
+import React from 'react/addons';
+
+import Input from 'react-bootstrap/lib/Input';
+import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+import { getLangText } from '../utils/lang_utils';
+
+
+const { func, string, number } = React.PropTypes;
+const { update } = React.addons;
+
+const SearchBar = React.createClass({
+    propTypes: {
+        searchFor: func.isRequired,
+        className: string,
+
+        // in milliseconds
+        threshold: number.isRequired
+    },
+
+    getInitialState() {
+        return {
+            timers: [],
+            currentSearchQuery: ''
+        };
+    },
+
+    startTimers(searchQuery) {
+        const { timers } = this.state;
+        const { threshold } = this.props;
+        const timer = {
+            searchQuery,
+            cb: setTimeout(this.evaluateTimer, threshold)
+        };
+
+
+        const newTimers = update(timers, {$push: [timer]});
+        this.setState({ timers: newTimers });
+    },
+
+    evaluateTimer() {
+        console.log(this);
+    },
+
+    handleChange({ target: { value }}) {
+        this.startTimers(value);
+        this.setState({ currentSearchQuery: value });
+    },
+
+    render() {
+        const searchIcon = <Glyphicon glyph='search' className="filter-glyph"/>;
+        const { className } = this.props;
+
+        return (
+            <span className={className}>
+                <Input
+                    type='text'
+                    placeholder={getLangText('Search%s', '...')}
+                    onChange={this.handleChange}
+                    addonAfter={searchIcon} />
+            </span>
+        );
+    }
+});
+
+
+export default SearchBar;

js/utils/action_queue_utils.js

@@ -1,18 +0,0 @@
-'use strict';
-
-
-class ActionQueue {
-    constructor() {
-        let actionClass = this.constructor.prototype;
-        let actionClassPropertyNames = Object.getOwnPropertyNames(actionClass);
-
-        this.constructor = actionClass.constructor;
-
-        for(let i = 1; i < actionClassPropertyNames.length; i++) {
-            let methodName = actionClassPropertyNames[i];
-            actionClass[methodName] = () => console.log('hello');
-        }
-    }
-}
-
-export default ActionQueue;