Deep Linking with React + Flux, main controller view, replace links with AppLink component

tasks_app.jsx

TasksApp = React.createClass({
  getInitialState: function() {
    return {
      selectedTask: TaskStore.selectedTask(),
      tasks: TaskStore.tasks(),
    };
  },
  componentWillMount: function() {
    TaskStore.addChangeListener(this.updateState);
  },
  componentWillUnmount: function() {
    TaskStore.removeChangeListener(this.updateState);
  },
  updateState: function() {
    this.setState({
      selectedTask: TaskStore.selectedTask(),
      tasks: TaskStore.tasks(),
    });
  },
  render: function() {
    return (
      <div>
        <ul id="tasks" className="left-pane">
          {this.renderTaskListItems()}
        </ul>
        {this.renderTodoDetailPane()}
      </div>
    );
  },
  renderTaskListItems: function() {
    return this.state.tasks.map(function(task) {
      // instead of <a> tags, we use a special component that dispatches "navigate" Actions
      return (
        <li key={task.id}>
          <AppLink href={"/tasks/" + task.id}>{task.title}</AppLink>
        </li>
      );
    });
  },
  renderTodoDetailPane: function() {
    if (this.state.selectedTask) {
      return (<TaskDetail className="right-pane" key={task.id} task={task} />);
    }
  },
});

TaskDetail = React.createClass({
  render: function() {
    // left as an exercise
    return (<div></div>);
  },
});