cart state for item in details page finnaly shows (arrggh worst kind of bugs)

front-ui/app/actions/cartActions.js

@@ -6,11 +6,10 @@ var CartActions = {
 
     load: function() {
         AppDispatcher.handleAction({
-            actionType: CartConstants.LOAD
+            actionType: CartConstants.LOAD_CART_CONTENTS
         });
     },
 
-
     addItem: function(itemId) {
         AppDispatcher.handleAction({
             actionType: CartConstants.ADD_ITEM,
@@ -23,6 +22,12 @@ var CartActions = {
             actionType: CartConstants.TAKE_ITEM_OUT,
             itemId: itemId
         });
+    },
+
+    dataLoaded: function() {
+        AppDispatcher.handleAction({
+            actionType: CartConstants.CART_DATA_LOADED
+        }); 
     }
 };
 

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

@@ -11,31 +11,36 @@ var countStyle = {
 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" onClick={this._onIncreaseClick}>+</button></div>
-            <div className="col-xs-2"><button className="btn" style={countStyle} > { this.state.count } </button></div>
+            <div className="col-xs-2"><button className="btn" style={countStyle} > { this.state.item.get('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>
+          </div> 
         );
   },
 
     // Add change listeners to stores
     componentDidMount: function() {
-      CartActions.load();
       CartStore.addChangeListener(this._onChange); 
+      
+      CartActions.load();
     },
 
 
     getInitialState: function() {
-      return CartStore.getStateFor(this.props.itemId)
+      
+      var itemInCart = CartStore.getStateFor(this.props.itemId);
+      return  { item: itemInCart }
     },
 
 
     _onChange: function () {
       if (this.isMounted()) {
-        this.setState(CartStore.getStateFor(this.props.itemId)); 
+        var item = CartStore.getStateFor(this.props.itemId);
+        this.setState({ item: item });         
       }
     },
 

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 itemId={this.state.item.id}  />
+                      <AddToCart itemId={this.state.item.get('id')}  />
         
           </div>
 

front-ui/app/constants/cartConstants.js

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

front-ui/app/models/itemInCart.js

@@ -0,0 +1,22 @@
+var Backbone = require('backbone');
+var Globals = require('../globals');
+
+var ItemInCart = Backbone.Model.extend({
+
+	initialize: function() {
+        $.ajaxPrefilter(
+            function(options, originalOptions, jqXHR) {
+                options.xhrFields = {
+                    withCredentials: true
+                }
+            }
+        );
+    },
+
+    url: Globals.ApiUrl + '/cart/item',
+    defaults: { 
+    	count: 0
+    }
+});
+
+module.exports = ItemInCart;

front-ui/app/models/itemInCartCollection.js

@@ -0,0 +1,23 @@
+var Backbone = require('backbone'),
+    ItemInCart = require('./itemInCart'),
+    Globals = require('../globals');
+
+var ItemInCartCollection = Backbone.Collection.extend({
+
+    initialize: function() {
+        $.ajaxPrefilter(
+            function(options, originalOptions, jqXHR) {
+                options.xhrFields = {
+                    withCredentials: true
+                }
+            }
+        );
+    },
+
+    model: ItemInCart,
+    url: Globals.ApiUrl + '/cart/item'
+
+
+});
+
+module.exports = ItemInCartCollection;

front-ui/app/stores/cartStore.js

@@ -1,30 +1,60 @@
 var AppDispatcher = require('../dispatcher/appDispatcher');
 var EventEmitter = require('events').EventEmitter;
 var CartConstants = require('../constants/cartConstants');
+var CartActions = require('../actions/cartActions');
+var ItemInCart = require('../models/itemInCart');
+var ItemInCartCollection = require('../models/itemInCartCollection');
 var _ = require('underscore');
 
-var states = { 
-}
+var states = {}
+
+var _itemsInCart = new ItemInCartCollection();
 
 
 var loadCart = function() {
- 
+    _itemsInCart.fetch({
+        success: function() {
+            states = {}
+            for (var i = 0; i < _itemsInCart.models.length; i++) {
+                var itemInCart = _itemsInCart.models[i];
+                states[itemInCart.get('item_id')] = itemInCart;
+            }
+            CartActions.dataLoaded();
+        }
+    })
 };
 
 var addItem = function(itemId) {
-    // TODO: push state to server side
-    var state = states[itemId] || { count: 0 };
-    state.count++;
+    
+    var state = states[itemId] || new ItemInCart({
+        item_id: itemId,
+        count: 0
+    })
+    state.set('count', state.get('count') + 1);
     states[itemId] = state;
+    state.save({
+        success: function () {
+            CartActions.dataLoaded();
+        }
+    });
+
 };
 
 var takeItemOut = function(itemId) {
-    // TODO: push state to server side
-    var state = states[itemId] || { count: 0 };
-    if (state.count > 0) {
-        state.count--;
+    
+    var state = states[itemId] || new ItemInCart({
+        item_id: itemId,
+        count: 0
+    })
+    if (state.get('count') > 0) {
+        state.set('count', state.get('count') - 1);
     }
     states[itemId] = state;
+    state.save({
+        success: function () {
+            CartActions.dataLoaded();
+        }
+    });
 };
 
 
@@ -34,14 +64,18 @@ var takeItemOut = function(itemId) {
 var CartStore = _.extend({}, EventEmitter.prototype, {
 
     getStateFor: function(itemId) {
-      // TODO: get from server side ?   
-      var state = states[itemId] || { count: 0 }
-      return state
+
+        // TODO: get from server side ?    
+        var state = states[itemId] || new ItemInCart({
+            item_id: itemId,
+            count: 0
+        })
+        return state
     },
 
     // Emit Change event
     emitChange: function() {
-        console.log("Emitting change!");
+        console.log("Emitting cart change!");
         this.emit('change');
     },
 
@@ -65,7 +99,7 @@ AppDispatcher.register(function(payload) {
 
     switch (action.actionType) {
 
-        case CartConstants.LOAD:
+        case CartConstants.LOAD_CART_CONTENTS:
             loadCart();
             break;
 
@@ -76,6 +110,9 @@ AppDispatcher.register(function(payload) {
         case CartConstants.TAKE_ITEM_OUT:
             takeItemOut(action.itemId);
             break;
+        case CartConstants.CART_DATA_LOADED:
+            // just emit change
+            break;
 
         default:
             return true;
@@ -87,4 +124,4 @@ AppDispatcher.register(function(payload) {
 
 });
 
-module.exports = CartStore;
+module.exports = CartStore;

front-ui/app/stores/itemDetailsStore.js

@@ -29,9 +29,9 @@ var fetchItemWithDetails = function() {
         var item = new ItemWithDetails({
             id: id
         });
+        _itemWithDetails = item;
         item.fetch({
             success: function() {
-                _itemWithDetails = item;
                 _images = (_itemWithDetails.get("multi_media_descriptions") || []).map(function(mmd) {
                     return mmd.url;
                 });