From 02eafaa80c2e2338b59c0f1db7400e229b48b01a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 12 Oct 2015 13:57:37 +0200
Subject: [PATCH] Isolate SearchBar from PieceListToolbar and start implement
 threshold logic

---
 js/actions/piece_list_actions.js              |  8 +--
 .../piece_list_toolbar.js                     | 29 +++-----
 js/components/search_bar.js                   | 68 +++++++++++++++++++
 js/utils/action_queue_utils.js                | 18 -----
 4 files changed, 79 insertions(+), 44 deletions(-)
 create mode 100644 js/components/search_bar.js
 delete mode 100644 js/utils/action_queue_utils.js

diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js
index 31f1bca5..87304ca7 100644
--- a/js/actions/piece_list_actions.js
+++ b/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)
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
index 0890db00..d2c3265f 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
+++ b/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}
-                            </span>
-                            <span className="pull-right search-bar ascribe-input-glyph">
-                                <Input
-                                    type='text'
-                                    ref="search"
-                                    placeholder={getLangText('Search%s', '...')}
-                                    onChange={this.searchFor}
-                                    addonAfter={searchIcon} />
+                                {children}
                             </span>
+                            <SearchBar
+                                className="pull-right search-bar ascribe-input-glyph"
+                                searchFor={searchFor}
+                                threshold={1000}/>
                             <span className="pull-right">
                                 {this.getOrderWidget()}
                                 {this.getFilterWidget()}
diff --git a/js/components/search_bar.js b/js/components/search_bar.js
new file mode 100644
index 00000000..942b63cd
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/js/utils/action_queue_utils.js b/js/utils/action_queue_utils.js
deleted file mode 100644
index 6009198a..00000000
--- a/js/utils/action_queue_utils.js
+++ /dev/null
@@ -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;
\ No newline at end of file