Firebase - Section 8

Author: StephenGrider

todos/src/app.jsx

@@ -2,10 +2,16 @@ var React = require('react');
 var ReactFire = require('reactfire');
 var Firebase = require('firebase');
 var Header = require('./header');
+var List = require('./list');
 var rootUrl = 'https://blistering-torch-4253.firebaseio.com/';
 
 var App = React.createClass({
   mixins: [ ReactFire ],
+  getInitialState: function() {
+    return {
+      items: {}
+    }
+  },
   componentWillMount: function() {
     this.bindAsObject(new Firebase(rootUrl + 'items/'), 'items');
   },
@@ -16,6 +22,7 @@ var App = React.createClass({
           To-Do List
         </h2>
         <Header itemsStore={this.firebaseRefs.items} />
+        <List items={this.state.items} />
       </div>
     </div>
   }

todos/src/list.jsx

@@ -0,0 +1,28 @@
+var React = require('react');
+
+module.exports = React.createClass({
+  render: function() {
+    return <ul>
+      {this.renderList()}
+    </ul>
+  },
+  renderList: function() {
+    if(this.props.items && Object.keys(this.props.items).length === 0) {
+      return <h4>
+        Add a todo to get started.
+      </h4>
+    } else {
+      var children = [];
+
+      for(var key in this.props.items) {
+        children.push(
+          <li>
+            {this.props.items[key].text}
+          </li>
+        )
+      }
+
+      return children;
+    }
+  }
+});