Voting

Author: alejandronanez

app/src/js/components/Feed.js

@@ -3,13 +3,14 @@ var React = require('react');
 var ShowAddButton = require('./ShowAddButton');
 var FeedForm = require('./FeedForm');
 var FeedList = require('./FeedList');
+var _ = require('lodash');
 
 var Feed = React.createClass({
     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}
+            {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,
@@ -24,14 +25,27 @@ var Feed = React.createClass({
         var newItems = this.state.items.concat([newItem]);
         this.setState({
             items: newItems,
-            formDisplayed: false
+            formDisplayed: false,
+            key: this.state.items.length
         });
     },
     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
+        });
+    },
     render: function () {
         return (
             <div>
@@ -44,7 +58,7 @@ var Feed = React.createClass({
                 <br/>
                 <br/>
 
-                <FeedList items={this.state.items} />
+                <FeedList items={this.state.items} onVote={this.onVote}/>
             </div>
         );
     }

app/src/js/components/FeedItem.js

@@ -1,15 +1,34 @@
 /** @jsx React.DOM */
 var React = require('react');
 var FeedItem = React.createClass({
+    vote: function (newCount) {
+        this.props.onVote({
+            key: this.props.key,
+            title: this.props.title,
+            description: this.props.description,
+            voteCount: newCount
+        })
+    },
+    voteUp: function () {
+        var count = parseInt(this.props.voteCount, 10);
+        var newCount = count + 1;
+        this.vote(newCount);
+    },
+    voteDown: function () {
+        var count = parseInt(this.props.voteCount, 10);
+        var newCount = count - 1;
+        this.vote(newCount);
+    },
     render: function () {
+        var badgeClassName = this.props.voteCount < 0 ? 'badge badge-danger' : 'badge badge-success';
         return (
-            <li className="list-group-item">
-                <span className="badge badge-success">{this.props.voteCount}</span>
+            <li key={this.props.key} className="list-group-item">
+                <span className={badgeClassName}>{this.props.voteCount}</span>
                 <h4>{this.props.title}</h4>
-                <span>{this.props.desc}</span>
+                <span>{this.props.description}</span>
                 <span className="pull-right">
-                <button id="up" className="btn btn-sm btn-primary">&uarr;</button>
-                <button id="down" className="btn btn-sm btn-primary">&darr;</button>
+                <button id="up" className="btn btn-sm btn-primary" onClick={this.voteUp}>&uarr;</button>
+                <button id="down" className="btn btn-sm btn-primary" onClick={this.voteDown}>&darr;</button>
                 </span>
             </li>
         )

app/src/js/components/FeedList.js

@@ -4,8 +4,12 @@ var FeedItem = require('./FeedItem');
 var FeedList = React.createClass({
     render: function () {
         var feedItems = this.props.items.map(function (item) {
-            return <FeedItem title={item.title} desc={item.description} voteCount={item.voteCount} />
-        });
+            return <FeedItem key={item.key}
+                             title={item.title}
+                             description={item.description}
+                             voteCount={item.voteCount}
+                             onVote={this.props.onVote} />
+        }.bind(this));
 
         return (
             <ul className="list-group container">

package.json

@@ -10,13 +10,14 @@
   "author": "Alejandro Nanez <alejonanez@gmail.com>",
   "license": "ISC",
   "devDependencies": {
-    "react": "^0.11.1",
-    "gulp-react": "^1.0.1",
     "gulp": "^3.8.8",
-    "gulp-connect": "^2.0.6",
+    "gulp-browserify": "^0.5.0",
     "gulp-concat": "^2.4.0",
+    "gulp-connect": "^2.0.6",
     "gulp-open": "^0.2.8",
-    "gulp-browserify": "^0.5.0",
+    "gulp-react": "^1.0.1",
+    "lodash": "^2.4.1",
+    "react": "^0.11.1",
     "reactify": "^0.14.0"
   }
 }