you can now play with number of items to add

front-ui/app/components/cart/addToCart.js

@@ -1,40 +1,51 @@
 var React = require('react');
+var CartStore = require('../../stores/cartStore.js');
+var CartActions = require('../../actions/cartActions.js');
 
 
+
+var countStyle = { 
+  width: '100%'
+};
+
 var AddToCart = React.createClass({
 
   render: function() {  
       return (
           <div className="row-fluid add-to-cart">
-            <div className="col-xs-offset-1 col-xs-1"><button className="btn btn-success">+</button></div>
-            <div className="col-xs-1"><button className="btn"> 2 </button></div>
-            <div className="col-xs-1"><button className="btn btn-success">-</button></div>
-            <div className="col-xs-8"><button className="btn btn-warning">U korpu</button></div>
+            <div className="col-xs-offset-1 col-xs-1"><button className="btn btn-success" onClick={this._onIncreaseClick}>+</button></div>
+            <div className="col-xs-2"><button className="btn" style={countStyle}> { this.state.count } </button></div>
+            <div className="col-xs-1"><button className="btn btn-success"  onClick={this._onDecreaseClick}>-</button></div>
+            <div className="col-xs-7"><button className="btn btn-warning">U korpu</button></div>
           </div>
         );
   },
 
     // Add change listeners to stores
     componentDidMount: function() {
-      /*ItemActions.loadFrontPageItems();
-      ItemStore.addChangeListener(this._onChange); */
+      CartActions.load();
+      CartStore.addChangeListener(this._onChange); 
     },
 
 
     getInitialState: function() {
-      return {
-          //items: ItemStore.getItems()
-        }
+      return CartStore.getStateFor(this.props.itemId)
     },
 
 
     _onChange: function () {
       if (this.isMounted()) {
-      /*  this.setState({
-          items: ItemStore.getItems()
-        }); */
+        this.setState(CartStore.getStateFor(this.props.itemId)); 
       }
     },
+
+    _onIncreaseClick: function () {
+      CartActions.addItem(this.props.itemId);
+    },
+
+    _onDecreaseClick: function () {
+      CartActions.takeItemOut(this.props.itemId);
+    }
 });
 
 module.exports = AddToCart; 

front-ui/app/components/items/itemWithDetailsPage.js

@@ -22,7 +22,7 @@ var ItemWithDetailsPage = React.createClass({
                     onClickLeft={this.onClickLeft}
                     onClickRight={this.onClickRight}
                     onSelectImage={this.onSelectImage} />
-                      <AddToCart />
+                      <AddToCart itemId={this.state.item.id}  />
         
           </div>
 

front-ui/app/components/items/traits.js

@@ -8,11 +8,11 @@ var Traits = React.createClass({
       for(var traitKey in traits )  {
         if(traits.hasOwnProperty(traitKey)) {
           var traitValue = this.props.traits[traitKey];
-          traitsPresentation.push( <div className="single_trait">{traitKey}: {traitValue}</div>   );
+          traitsPresentation.push( <div key={traitKey} className="single_trait">{traitKey}: {traitValue}</div>   );
         }
       }
 
-      console.log(traitsPresentation); 
+      
       return (    
         <div className="row-fluid">
            <div className="span12">