Deep Linking with React + Flux, main controller view, step 1

tasks_app.jsx

TasksApp = React.createClass({
  // all component state originates from TaskStore, upstream
  getInitialState: function() {
    return {
      selectedTask: TaskStore.selectedTask(),
      tasks: TaskStore.tasks(),
    };
  },

  // and when the TaskStore's state changes, we update this component's
  // state by copying the TaskStore's state
  componentWillMount: function() {
    TaskStore.addChangeListener(this.updateState);
  },
  componentWillUnmount: function() {
    TaskStore.removeChangeListener(this.updateState);
  },
  updateState: function() {
    this.setState({
      selectedTask: TaskStore.selectedTask(),
      tasks: TaskStore.tasks(),
    });
  },

  // draw a list of tasks, and, if we have selected a task, the details for
  // that task
  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) {
      return (
        <li key={task.id}>
          <a href={"/tasks/" + task.id}>{task.title}</a>
        </li>
      );
    });
  },
  renderTodoDetailPane: function() {
    if (this.state.selectedTask) {
      //without a key prop, React DOM diffing won't catch when we change selectedTask
      return (<TaskDetail className="right-pane" key={task.id} task={task} />);
    }
  },
});

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