ToDoの更新機能を追加

Author: yinm

app/assets/javascripts/Task.js

@@ -1,14 +1,23 @@
 import React from "react";
 
 export default class Task extends React.Component {
+  handleUpdate(e) {
+    e.preventDefault();
+    this.props.onTaskUpdate({task: {id: this.props.id, status: e.target.value}});
+  }
+
   render() {
     return (
       <tr key={this.props.id}>
         <td>
           {this.props.content}
         </td>
         <td>
-          {this.props.status}
+          <select defaultValue={this.props.status} onChange={this.handleUpdate.bind(this)} >
+            <option value="todo" key="todo">todo</option>
+            <option value="doing" key="doing">doing</option>
+            <option value="done" key="done">done</option>
+          </select>
         </td>
       </tr>
     );

app/assets/javascripts/TaskApp.js

@@ -43,6 +43,20 @@ export default class TaskApp extends React.Component {
       });
   }
 
+  taskUpdate(task) {
+    request
+      .patch(this.props.url + '/' + task.task.id)
+      .accept('application/json')
+      .send(task)
+      .end((err, res) => {
+        if (err || !res.ok) {
+          console.error(this.props.url, status, err.toString());
+        } else {
+          this.setState({data: res.body});
+        }
+      });
+  }
+
   componentDidMount() {
     this.loadTaskFromServer();
     setInterval(this.loadTaskFromServer.bind(this),
@@ -62,7 +76,7 @@ export default class TaskApp extends React.Component {
               <th colSpan="3"></th>
             </tr>
           </thead>
-          <TaskList data={this.state.data} />
+          <TaskList data={this.state.data} onTaskUpdate={this.taskUpdate.bind(this)} />
         </table>
       </div>
     );

app/assets/javascripts/TaskList.js

@@ -6,7 +6,7 @@ export default class TaskList extends React.Component {
     var tasks = this.props.data.map((task) => {
       return (
         <Task key={task.id} id={task.id}
-              content={task.content} status={task.status}>
+              content={task.content} status={task.status} onTaskUpdate={this.props.onTaskUpdate} >
         </Task>
       );
     });