Replace event bus with property-based function references

Author: Brandon Tilley

src/js/client/bus.js

@@ -1,5 +1,3 @@
-var bus = require('./bus');
-
 module.exports = React.createClass({
   render: function() {
     return (
@@ -14,6 +12,6 @@ module.exports = React.createClass({
   },
 
   onChange: function(evt) {
-    bus.emit('change:searchAllWindows', evt.target.checked);
+    this.props.changeSearchAllWindows(evt.target.checked);
   }
 });

src/js/client/status_bar.jsx

@@ -1,4 +1,3 @@
-var bus = require('./bus');
 var stringSpanner = require('./string_spanner');
 
 var MATCH_START = '<span class="match">';
@@ -39,10 +38,10 @@ module.exports = React.createClass({
   },
 
   onMouseEnter: function(evt) {
-    bus.emit('change:selected', this.props.tab);
+    this.props.changeSelected(this.props.tab);
   },
 
   onClick: function(evt) {
-    bus.emit('action:activate');
+    this.props.activateSelected();
   }
 });

src/js/client/tab_item.jsx

@@ -7,7 +7,9 @@ module.exports = React.createClass({
       <ul>
         {this.props.tabs.map(function(tab, i) {
           return <TabItem tab={tab} key={tab.id} filter={this.props.filter}
-            selected={this.props.selectedTab === tab} />;
+            selected={this.props.selectedTab === tab}
+            changeSelected={this.props.changeSelected}
+            activateSelected={this.props.activateSelected} />;
         }.bind(this))}
       </ul>
       /* jshint ignore:end */

src/js/client/tab_list.jsx

@@ -1,5 +1,3 @@
-var bus = require('./bus');
-
 var KEY_ENTER = 13;
 var KEY_ESC = 27;
 var KEY_UP = 38;
@@ -22,24 +20,24 @@ module.exports = React.createClass({
   onKeydown: function(evt) {
     switch (evt.which) {
     case KEY_ESC:
-      bus.emit('exit');
+      this.props.exit();
       break;
     case KEY_ENTER:
-      bus.emit('action:activate');
+      this.props.activateSelected();
       break;
     case KEY_UP:
-      bus.emit('select:previous');
+      this.props.modifySelected(-1);
       evt.preventDefault();
       break;
     case KEY_DOWN:
-      bus.emit('select:next');
+      this.props.modifySelected(1);
       evt.preventDefault();
       break;
     }
   },
 
   onChange: function(evt) {
     if (event.target.value !== this.props.filter)
-      bus.emit('change:filter', event.target.value);
+      this.props.changeFilter(event.target.value);
   }
 });

src/js/client/tab_search_box.jsx

@@ -1,4 +1,3 @@
-var bus = require('./bus');
 var stringScore = require('../../../vendor/string_score');
 var tabBroker = require('./tab_broker')(chrome);
 var tabFilter = require('./tab_filter')(stringScore);
@@ -7,24 +6,6 @@ var TabSearchBox = require('./tab_search_box.jsx');
 var TabList = require('./tab_list.jsx');
 var StatusBar = require('./status_bar.jsx');
 
-/**
- * TabSwitcher is the main component of our application. It contains
- * all the state, and all other components communicate their intent
- * to change that state via events on the bus (which is a Node.js
- * EventEmitter). All child components receive their data via properties.
- *
- * Bus events:
- * - change:searchAllWindows(boolean) - the 'search all windows'
- *   option was toggled
- * - change:filter(string) - the filter text was changed
- * - change:selected(tab) - the selected tab was changed
- * - action:activate - the user wishes to swich to the currently
- *   selected tab
- * - select:previous - the tab above the selected one should be selected
- * - select:next - the tab below the selected one should be selected
- * - exit - the extension should exit, closing the window
- */
-
 module.exports = React.createClass({
   getInitialState: function() {
     // TODO: move into a model
@@ -44,26 +25,29 @@ module.exports = React.createClass({
   },
 
   componentDidMount: function() {
-    bus.on('change:filter', this.changeFilter);
-    bus.on('change:selected', this.changeSelected);
-    bus.on('change:searchAllWindows', this.changeSearchAllWindows);
-    bus.on('select:previous', this.moveSelection.bind(this, -1));
-    bus.on('select:next', this.moveSelection.bind(this, 1));
-    bus.on('action:activate', this.activateSelection);
-    bus.on('exit', this.close);
     window.onblur = this.close;
-
     this.refreshTabs();
   },
 
   render: function() {
     return (
       /* jshint ignore:start */
       <div>
-        <TabSearchBox filter={this.state.filter} />
-        <TabList tabs={this.filteredTabs()} filter={this.state.filter}
-          selectedTab={this.getSelected()} />
-        <StatusBar searchAllWindows={this.state.searchAllWindows} />
+        <TabSearchBox
+          filter={this.state.filter}
+          exit={this.close}
+          changeFilter={this.changeFilter}
+          activateSelected={this.activateSelected}
+          modifySelected={this.modifySelected} />
+        <TabList
+          tabs={this.filteredTabs()}
+          filter={this.state.filter}
+          selectedTab={this.getSelected()}
+          changeSelected={this.changeSelected}
+          activateSelected={this.activateSelected} />
+        <StatusBar
+          searchAllWindows={this.state.searchAllWindows}
+          changeSearchAllWindows={this.changeSearchAllWindows} />
       </div>
       /* jshint ignore:end */
     );
@@ -94,11 +78,11 @@ module.exports = React.createClass({
     return this.state.selected || this.filteredTabs()[0];
   },
 
-  activateSelection: function() {
+  activateSelected: function() {
     var selected = this.getSelected();
     if (selected) {
       tabBroker.switchTo(selected);
-      bus.emit('exit');
+      this.close();
     }
   },
 
@@ -110,7 +94,7 @@ module.exports = React.createClass({
     this.setState({selected: tab});
   },
 
-  moveSelection: function(change) {
+  modifySelected: function(change) {
     var filteredTabs = this.filteredTabs();
     if (!filteredTabs.length) return;
 
@@ -119,7 +103,7 @@ module.exports = React.createClass({
     if (newIndex < 0) newIndex = 0;
     if (newIndex >= filteredTabs.length) newIndex = filteredTabs.length - 1;
     var newTab = filteredTabs[newIndex];
-    bus.emit('change:selected', newTab);
+    this.changeSelected(newTab);
   },
 
   changeSearchAllWindows: function(value) {