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

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'>
-    <h1><a href="#">Ribica.ba</a></h1>
+<div className='page-header'>
+    <h1 className="main-heading"><a href="#">Ribica.ba</a></h1> <CartIcon />
 </div>
 <div className='row'>
     <div className='col-md-12' id='header'>