Integrated with Firebase

Author: alejandronanez

app/src/js/components/Feed.js

@@ -4,16 +4,38 @@ var ShowAddButton = require('./ShowAddButton');
 var FeedForm = require('./FeedForm');
 var FeedList = require('./FeedList');
 var _ = require('lodash');
+var Firebase = require('firebase');
 
 var Feed = React.createClass({
+
+    loadData: function () {
+        var ref = new Firebase('https://react-voting.firebaseio.com/feed');
+        ref.on('value', function (snapshot) {
+            var items = [];
+            var sorted = [];
+
+            snapshot.forEach(function (itemSnapshot) {
+                var item = itemSnapshot.val();
+                item.key = itemSnapshot.key();
+                items.push(item);
+            });
+
+            sorted = _.sortBy(items, function (item) {
+                return -item.voteCount;
+            });
+
+            this.setState({
+                items: sorted
+            });
+        }.bind(this));
+    },
+
+    componentDidMount: function () {
+        this.loadData();
+    },
     getInitialState: function () {
-        var FEED_ITEMS = [
-            {key: '1', title: 'Realtime data!', description: 'Firebase is cool!', voteCount: 49},
-            {key: '2', title: 'Javascipt is fun', description: 'Javascript feature here!', voteCount: 34},
-            {key: '3', title: 'Coffee makes you awake', description: 'A coffee pro here!', voteCount: 25}
-        ];
         return {
-            items: FEED_ITEMS,
+            items: [],
             formDisplayed: false
         }
     },
@@ -22,29 +44,17 @@ var Feed = React.createClass({
      * @param newItem {Object} Item to be added
      */
     onNewItem: function (newItem) {
-        var newItems = this.state.items.concat([newItem]);
-        this.setState({
-            items: newItems,
-            formDisplayed: false,
-            key: this.state.items.length
-        });
+        var ref = new Firebase('https://react-voting.firebaseio.com/feed');
+        ref.push(newItem);
     },
     onToggleForm: function () {
         this.setState({
             formDisplayed: !this.state.formDisplayed
         });
     },
     onVote: function (item) {
-        var items = _.uniq(this.state.items);
-        var index = _.findIndex(items, function (feedItems) {
-            return feedItems.key === item.key;
-        });
-        var oldObject = items[index];
-        var newItems = _.pull(items, oldObject);
-        newItems.push(item);
-        this.setState({
-            items: newItems
-        });
+        var ref = new Firebase('https://react-voting.firebaseio.com/feed').child(item.key);
+        ref.update(item);
     },
     render: function () {
         return (

package.json

@@ -10,6 +10,7 @@
   "author": "Alejandro Nanez <alejonanez@gmail.com>",
   "license": "ISC",
   "devDependencies": {
+    "firebase": "^2.0.6",
     "gulp": "^3.8.8",
     "gulp-browserify": "^0.5.0",
     "gulp-concat": "^2.4.0",