Fixing search with promises

src/NewContainer.react.js

@@ -8,56 +8,57 @@ var assign = require('object-assign');
 var Promise = require('bluebird');
 
 var _recommended = [];
+var _searchPromise = null;
 
 var NewContainer = React.createClass({
-  _searchRequest: null,
   getInitialState: function () {
     return {
       query: '',
-      results: _recommended,
+      results: [],
       loading: false,
-      tags: {},
+      tags: {}
-      active: null
     };
   },
   componentDidMount: function () {
     this.refs.searchInput.getDOMNode().focus();
-    if (!_recommended.length) {
     this.recommended();
+  },
+  componentWillUnmount: function () {
+    if (_searchPromise) {
+      _searchPromise.cancel();
     }
   },
   search: function (query) {
-    if (this._searchRequest) {
+    if (_searchPromise) {
-      this._searchRequest.abort();
+      _searchPromise.cancel();
-      this._searchRequest = null;
+      _searchPromise = null;
     }
 
     if (!query.length) {
+      this.setState({
+        query: query,
+        results: _recommended,
+        loading: false
+      });
       return;
     }
 
     this.setState({
+      query: query,
       loading: true
     });
 
-    var self = this;
+    _searchPromise = Promise.delay(200).then(() => Promise.resolve($.get('https://registry.hub.docker.com/v1/search?q=' + query))).cancellable().then(data => {
-    this._searchRequest = $.get('https://registry.hub.docker.com/v1/search?q=' + query, function (result) {
+      this.setState({
-      self.setState({
+        results: data.results,
         query: query,
         loading: false
       });
-      self._searchRequest = null;
+      _searchPromise = null;
-      if (self.isMounted()) {
+    }).catch(Promise.CancellationError, () => {
-        self.setState(result);
-      }
     });
   },
   recommended: function () {
-    if (this._searchRequest) {
-      this._searchRequest.abort();
-      this._searchRequest = null;
-    }
-
     if (_recommended.length) {
       return;
     }
@@ -88,23 +89,10 @@ var NewContainer = React.createClass({
   },
   handleChange: function (e) {
     var query = e.target.value;
-
     if (query === this.state.query) {
       return;
     }
-
+    this.search(query);
-    clearTimeout(this.timeout);
-    if (!query.length) {
-      this.setState({
-        query: query,
-        results: _recommended
-      });
-    } else {
-      var self = this;
-      this.timeout = setTimeout(function () {
-        self.search(query);
-      }, 200);
-    }
   },
   handleClick: function (name) {
     ContainerStore.create(name, 'latest', function (err) {
@@ -115,9 +103,6 @@ var NewContainer = React.createClass({
     }.bind(this));
   },
   handleDropdownClick: function (name) {
-    this.setState({
-      active: name
-    });
     if (this.state.tags[name]) {
       return;
     }

src/SetupStore.js

@@ -165,7 +165,6 @@ var SetupStore = assign(Object.create(EventEmitter.prototype), {
   run: Promise.coroutine(function* () {
     yield this.updateBinaries();
     var steps = yield this.requiredSteps();
-    console.log(steps);
     for (let step of steps) {
       console.log(step.name);
       _currentStep = step;