Select a person by clicking on her

src/actions/people_actions.js

@@ -4,7 +4,8 @@ var Actions = Reflux.createActions([
   'add',
   'remove',
   'shuffle',
-  'nextDriver'
+  'nextDriver',
+  'selectDriver'
 ]);
 
 export default Actions;

src/components/person.js

@@ -3,23 +3,27 @@ import PeopleActions from '../actions/people_actions';
 import ClassNames from 'classnames';
 
 class Person extends React.Component {
-  handleClick() {
+  remove() {
     PeopleActions.remove(this.props.index);
   }
 
+  select() {
+    PeopleActions.selectDriver(this.props.index);
+  }
+
   render() {
     var classes = ClassNames({
       active: this.props.isCurrent
     });
 
     return (
       <li className={classes}>
-        <a href="#" className="remove" onClick={this.handleClick.bind(this)}>x</a>
-        <span>{this.props.name}</span>
+        <a href="#" className="remove" onClick={this.remove.bind(this)}>x</a>
+        <span onClick={this.select.bind(this)}>{this.props.name}</span>
       </li>
     );
   }
-};
+}
 
 Person.propTypes = {
   name: React.PropTypes.string.isRequired

src/stores/people_store.js

@@ -23,7 +23,6 @@ var Store = Reflux.createStore({
   },
 
   // Actions
-
   onAdd(name) {
     if (name.length > 0) {
       this.people.push(name);
@@ -51,6 +50,13 @@ var Store = Reflux.createStore({
     this.trigger();
   },
 
+  onSelectDriver(index) {
+    this.currentDriverIndex = index;
+
+    this.commitCurrentDriver();
+    this.trigger();
+  },
+
   onNextDriver() {
     this.currentDriverIndex += 1;
     if (this.currentDriverIndex >= this.people.length) {