Firebase - Section 15

StephenGrider · Jun 7, 2015 · 6ff8591 · 6ff8591
1 parent 4650605
commit 6ff8591
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/todos/index.html b/todos/index.html
@@ -11,6 +11,9 @@
     .input-group {
       margin-bottom: 15px;
     }
+    .clear-complete {
+      margin-bottom: 15px;
+    }
   </style>
 </head>
 <body>

diff --git a/todos/src/app.jsx b/todos/src/app.jsx
@@ -14,9 +14,9 @@ var App = React.createClass({
     }
   },
   componentWillMount: function() {
-    fb = new Firebase(rootUrl + 'items/');
-    this.bindAsObject(fb, 'items');
-    fb.on('value', this.handleDataLoaded);
+    this.fb = new Firebase(rootUrl + 'items/');
+    this.bindAsObject(this.fb, 'items');
+    this.fb.on('value', this.handleDataLoaded);
   },
   render: function() {
     return <div className="row panel panel-default">
@@ -28,10 +28,33 @@ var App = React.createClass({
         <hr />
         <div className={"content " + (this.state.loaded ? 'loaded' : '')}>
           <List items={this.state.items} />
+          {this.deleteButton()}
         </div>
       </div>
     </div>
   },
+  deleteButton: function() {
+    if(!this.state.loaded) {
+      return
+    } else {
+      return <div className="text-center clear-complete">
+        <hr />
+        <button
+          type="button"
+          onClick={this.onDeleteDoneClick}
+          className="btn btn-default">
+          Clear Complete
+        </button>
+      </div>
+    }
+  },
+  onDeleteDoneClick: function() {
+    for(var key in this.state.items) {
+      if(this.state.items[key].done === true) {
+        this.fb.child(key).remove();
+      }
+    }
+  },
   handleDataLoaded: function(){
     this.setState({loaded: true});
   }

diff --git a/todos/src/list.jsx b/todos/src/list.jsx
@@ -8,7 +8,7 @@ module.exports = React.createClass({
     </div>
   },
   renderList: function() {
-    if(this.props.items && Object.keys(this.props.items).length === 0) {
+    if(!this.props.items) {
       return <h4>
         Add a todo to get started.
       </h4>