you can now play with number of items to add

front-ui/app/actions/cartActions.js

@@ -0,0 +1,29 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var CartConstants = require('../constants/cartConstants');
+
+// Define action methods
+var CartActions = {
+
+    load: function() {
+        AppDispatcher.handleAction({
+            actionType: CartConstants.LOAD
+        });
+    },
+
+
+    addItem: function(itemId) {
+        AppDispatcher.handleAction({
+            actionType: CartConstants.ADD_ITEM,
+            itemId: itemId
+        });
+    },
+
+    takeItemOut: function(itemId) {
+        AppDispatcher.handleAction({
+            actionType: CartConstants.TAKE_ITEM_OUT,
+            itemId: itemId
+        });
+    }
+};
+
+module.exports = CartActions;

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"> 

front-ui/app/constants/cartConstants.js

@@ -0,0 +1,10 @@
+var keyMirror = require('react/lib/keyMirror');
+
+// Define action constants
+module.exports = keyMirror({
+  LOAD: null,
+  ADD_ITEM: null, 
+  // because removeItem can be used to completely remove item
+  // and not just decrease count by 1
+  TAKE_ITEM_OUT: null 
+});

front-ui/app/css/cart.css

@@ -1,3 +1,3 @@
 .add-to-cart {
-	padding-top: 20px;
+	padding-top: 20px;      
 }

front-ui/app/stores/cartStore.js

@@ -0,0 +1,90 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var EventEmitter = require('events').EventEmitter;
+var CartConstants = require('../constants/cartConstants');
+var _ = require('underscore');
+
+var states = { 
+}
+
+
+var loadCart = function() {
+ 
+};
+
+var addItem = function(itemId) {
+    // TODO: push state to server side
+    var state = states[itemId] || { count: 0 };
+    state.count++;
+    states[itemId] = state;
+};
+
+var takeItemOut = function(itemId) {
+    // TODO: push state to server side
+    var state = states[itemId] || { count: 0 };
+    if (state.count > 0) {
+        state.count--;
+    }
+    states[itemId] = state;
+};
+
+
+
+
+// Extend CartStore with EventEmitter to add eventing capabilities
+var CartStore = _.extend({}, EventEmitter.prototype, {
+
+    getStateFor: function(itemId) {
+      // TODO: get from server side ?   
+      var state = states[itemId] || { count: 0 }
+      return state
+    },
+
+    // Emit Change event
+    emitChange: function() {
+        console.log("Emitting change!");
+        this.emit('change');
+    },
+
+    // Add change listener
+    addChangeListener: function(callback) {
+        this.on('change', callback);
+    },
+
+    // Remove change listener
+    removeChangeListener: function(callback) {
+        this.removeListener('change', callback);
+    }
+
+});
+
+
+// Register callback with AppDispatcher
+AppDispatcher.register(function(payload) {
+    var action = payload.action;
+    var text;
+
+    switch (action.actionType) {
+
+        case CartConstants.LOAD:
+            loadCart();
+            break;
+
+        case CartConstants.ADD_ITEM:
+            addItem(action.itemId);
+            break;
+
+        case CartConstants.TAKE_ITEM_OUT:
+            takeItemOut(action.itemId);
+            break;
+
+        default:
+            return true;
+    }
+
+    // If action was responded to, emit change event
+    CartStore.emitChange();
+    return true;
+
+});
+
+module.exports = CartStore;