task_list_box.js.jsx.coffee

@TaskListBox = React.createClass

  getInitialState: ->
    taskLists: []

  componentDidMount: ->
    $.ajax
      url: this.props.url
      dataType: 'json'
      cache: false
      success: (data) =>
        @setState
          taskLists: data
      error: (xhr, status, err) =>
        console.error @props.url, status, err.toString()

  handleTaskListSubmit: (taskList) ->
    $.ajax
      url: this.props.url
      dataType: 'json'
      type: 'POST'
      data: {task_list: taskList}
      cache: false

      success: (data) =>
        taskLists = this.state.taskLists.concat([data])
        @setState {taskLists: taskLists}

      error: (xhr, status, err) =>
        console.error this.props.url, status, err.toString()

  render: ->
      `<div className="taskListBox">
        Hello, world! I'm a Task List Box!
        <TaskListForm onTaskListSubmit={this.handleTaskListSubmit}/>
        <h1>Task Lists</h1>
        <TaskListList taskLists={this.state.taskLists} />
      </div>`