From ac69d1b607993c525bccf29c13e31dc97435061c Mon Sep 17 00:00:00 2001
From: Itamar Ostricher <itamarost@gmail.com>
Date: Sat, 28 Nov 2015 15:14:44 +0200
Subject: [PATCH] Step 5 of TODO App with React tutorial - adding UI for
 checking off and deleting TODO items

---
 Task.jsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/Task.jsx b/Task.jsx
index c49e7ac..aca29a3 100644
--- a/Task.jsx
+++ b/Task.jsx
@@ -5,9 +5,37 @@ Task = React.createClass({
     // We can use propTypes to indicate it is required
     task: React.PropTypes.object.isRequired
   },
+
+  toggleChecked() {
+    // Set the checked property to the opposite of its current value
+    Tasks.update(this.props.task._id, {
+      $set: {checked: ! this.props.task.checked}
+    });
+  },
+
+  deleteThisTask() {
+    Tasks.remove(this.props.task._id);
+  },
+
   render() {
+    // Give tasks a different className when they are checked off,
+    // so that we can style them nicely in CSS
+    const taskClassName = this.props.task.checked ? "checked" : "";
+
     return (
-      <li>{this.props.task.text}</li>
+      <li className={taskClassName}>
+        <button className="delete" onClick={this.deleteThisTask}>
+          &times;
+        </button>
+
+        <input
+          type="checkbox"
+          readOnly={true}
+          checked={this.props.task.checked}
+          onClick={this.toggleChecked} />
+
+        <span className="text">{this.props.task.text}</span>
+      </li>
     );
   }
 });