From f3d06402e82d8aedfae850f1096c1786e190a57b Mon Sep 17 00:00:00 2001
From: stephen grider <ste.grider@gmail.com>
Date: Fri, 5 Jun 2015 22:47:31 -0700
Subject: [PATCH] Firebase - Section 13

---
 todos/src/list-item.jsx | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/todos/src/list-item.jsx b/todos/src/list-item.jsx
index eae0e76..19e8951 100644
--- a/todos/src/list-item.jsx
+++ b/todos/src/list-item.jsx
@@ -6,7 +6,8 @@ module.exports = React.createClass({
   getInitialState: function() {
     return {
       text: this.props.item.text,
-      done: this.props.item.done
+      done: this.props.item.done,
+      textChanged: false
     }
   },
   componentWillMount: function() {
@@ -24,17 +25,41 @@ module.exports = React.createClass({
       <input type="text"
         className="form-control"
         value={this.state.text}
+        onChange={this.handleTextChange}
         />
       <span className="input-group-btn">
-        <button className="btn btn-default">
+        {this.changesButtons()}
+        <button
+          className="btn btn-default"
+          onClick={this.handleDeleteClick}
+          >
           Delete
         </button>
       </span>
     </div>
   },
+  changesButtons: function() {
+    if(!this.state.textChanged) {
+      return null
+    } else {
+      return <span>
+        <button className="btn btn-default">Save</button>
+        <button className="btn btn-default">Undo</button>
+      </span>
+    }
+  },
+  handleTextChange: function(event) {
+    this.setState({
+      text: event.target.value,
+      textChanged: true
+    });
+  },
   handleDoneChange: function(event) {
     var update = {done: event.target.checked}
     this.setState(update);
     this.fb.update(update);
+  },
+  handleDeleteClick: function() {
+    this.fb.remove();
   }
 });