created cart icon with number of items notification - it's still buggy

front-ui/app/actions/cartActions.js

@@ -28,6 +28,13 @@ var CartActions = {
         AppDispatcher.handleAction({
             actionType: CartConstants.CART_DATA_LOADED
         }); 
+    },
+
+    saveCartStateForItem: function(itemId) {
+        AppDispatcher.handleAction({
+            actionType: CartConstants.SAVE_CART_STATE_FOR_ITEM,
+            itemId: itemId
+        }); 
     }
 };
 

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

@@ -17,7 +17,6 @@ var AddToCart = React.createClass({
             <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.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> 
         );
   },
@@ -25,14 +24,12 @@ var AddToCart = React.createClass({
     // Add change listeners to stores
     componentDidMount: function() {
       CartStore.addChangeListener(this._onChange); 
-      
       CartActions.load();
     },
 
 
     getInitialState: function() {
-      
+      var itemInCart  = CartStore.getStateFor(this.props.itemId);
-      var itemInCart = CartStore.getStateFor(this.props.itemId);
       return  { item: itemInCart }
     },
 
@@ -50,7 +47,12 @@ var AddToCart = React.createClass({
 
     _onDecreaseClick: function () {
       CartActions.takeItemOut(this.props.itemId);
+    },
+
+    componentWillUnmount: function () {
+      CartStore.removeChangeListener(this._onChange);
     }
+    
 });
 
 module.exports = AddToCart; 

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

@@ -0,0 +1,49 @@
+var React = require('react');
+var CartStore = require('../../stores/cartStore.js');
+var CartActions = require('../../actions/cartActions.js');
+
+
+
+var cartStyle = { 
+  fontSize: '50px'
+};
+
+var CartIcon = React.createClass({
+
+  render: function() {  
+
+  	  var textNotificationStyle = (this.state.count > 0)  ? { display: 'inline-block'} : { display: 'none'} ;
+
+      return (
+      	  <div className="shopping-cart-icon">
+          	<i style={cartStyle} className="fa fa-shopping-cart"></i>
+          	<div style={textNotificationStyle} className="shopping-cart-notification-text">{this.state.count}</div>
+          </div>
+        );
+  },
+
+    // Add change listeners to stores
+    componentDidMount: function() {
+      CartStore.addChangeListener(this._onChange); 
+      CartActions.load();
+    },
+
+
+    getInitialState: function() {
+      var cartState  = CartStore.getWholeCartState();
+      return  cartState;
+    },
+
+    _onChange: function () {
+      if (this.isMounted()) {
+        this.setState(CartStore.getWholeCartState());         
+      }
+    }
+
+
+});
+
+module.exports = CartIcon; 
+
+
+

front-ui/app/components/rootApp.js

@@ -3,6 +3,8 @@ var React = require('react'),
     Router = require('react-router'),
     RouteHandler = Router.RouteHandler;
 
+var CartIcon = require('./cart/cartIcon');
+
 var RootApp = React.createClass({
 
     render: function() {
@@ -11,8 +13,8 @@ var RootApp = React.createClass({
 
 <div className="container">
 
-<div  className='page-header'>
+<div className='page-header'>
-    <h1><a href="#">Ribica.ba</a></h1>
+    <h1 className="main-heading"><a href="#">Ribica.ba</a></h1> <CartIcon />
 </div>
 <div className='row'>
     <div className='col-md-12' id='header'>

front-ui/app/constants/cartConstants.js

@@ -7,5 +7,6 @@ module.exports = keyMirror({
   // because REMOVE_ITEM could be used to completely remove item
   // and not just decrease count by 1
   TAKE_ITEM_OUT: null ,
-  CART_DATA_LOADED: null
+  CART_DATA_LOADED: null,
+  SAVE_CART_STATE_FOR_ITEM: null
 });

front-ui/app/css/cart.css

@@ -1,3 +1,20 @@
 .add-to-cart {
 	padding-top: 20px;      
+}
+
+.shopping-cart-icon {
+	display: inline-block;
+	position: relative;
+	border-radius: 25px;
+}
+
+.shopping-cart-notification-text {
+	display: inline-block;
+	background:red; 
+	color: white;
+    font-size: 9px;
+    position: absolute;
+    top: 0px;
+    right: -10px;
+    padding: 5px;
 }

front-ui/app/css/main.css

@@ -16,3 +16,8 @@ body {
     z-index: 10000;
     border: 1px solid silver;
 }
+
+.main-heading {
+    display: inline-block;
+
+}

front-ui/app/stores/cartStore.js

@@ -32,12 +32,7 @@ var addItem = function(itemId) {
     })
     state.set('count', state.get('count') + 1);
     states[itemId] = state;
-    state.save({
+    saveCartStateForItem(itemId);
-        success: function () {
-            CartActions.dataLoaded();
-        }
-    });
-
 };
 
 var takeItemOut = function(itemId) {
@@ -47,15 +42,20 @@ var takeItemOut = function(itemId) {
         count: 0
     })
     if (state.get('count') > 0) {
-        state.set('count', state.get('count') - 1);
+        state.set('count', state.get('count') - 1); 
     }
     states[itemId] = state;
-    state.save({
+    saveCartStateForItem(itemId);
+};
+
+var saveCartStateForItem = function(itemId) {
+    var item = CartStore.getStateFor(itemId);
+    item.save({
         success: function () {
             CartActions.dataLoaded();
         }
     });
-};
+}
 
 
 
@@ -64,8 +64,7 @@ var takeItemOut = function(itemId) {
 var CartStore = _.extend({}, EventEmitter.prototype, {
 
     getStateFor: function(itemId) {
-
+   
-        // TODO: get from server side ?    
         var state = states[itemId] || new ItemInCart({
             item_id: itemId,
             count: 0
@@ -73,6 +72,15 @@ var CartStore = _.extend({}, EventEmitter.prototype, {
         return state
     },
 
+    getWholeCartState: function() {
+
+        var numberOfItems = _itemsInCart.models.filter(function(item) { return item.get('count') > 0 }).length;
+        var state = {
+            count: numberOfItems
+        };
+        return state;
+    },
+
     // Emit Change event
     emitChange: function() {
         console.log("Emitting cart change!");
@@ -95,7 +103,7 @@ var CartStore = _.extend({}, EventEmitter.prototype, {
 // Register callback with AppDispatcher
 AppDispatcher.register(function(payload) {
     var action = payload.action;
-    var text;
+    var text;  
 
     switch (action.actionType) {
 
@@ -113,7 +121,9 @@ AppDispatcher.register(function(payload) {
         case CartConstants.CART_DATA_LOADED:
             // just emit change
             break;
-
+        case CartConstants.SAVE_CART_STATE_FOR_ITEM:
+            saveCartStateForItem(action.itemId);
+            break;
         default:
             return true;
     }

front-ui/build/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <link rel='stylesheet' type='text/css' href='ribica.css'>
  <meta name="fragment" content="!">
  <meta name="viewport" content="initial-scale=0.9">