Firebase - Section 13

Author: StephenGrider

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();
   }
 });