cart display works but it's far from finished

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

@@ -1,6 +1,7 @@
 var React = require('react');
 var CartStore = require('../../stores/cartStore.js');
 var CartActions = require('../../actions/cartActions.js');
+var NavigationActions = require('../../actions/navigationActions.js');
 
 
 
@@ -15,7 +16,7 @@ var CartIcon = React.createClass({
   	  var textNotificationStyle = (this.state.count > 0)  ? { display: 'inline-block'} : { display: 'none'} ;
 
       return (
-      	  <div className="shopping-cart-icon">
+      	  <div className="shopping-cart-icon" onClick={this._onClick}>
           	<i style={cartStyle} className="fa fa-shopping-cart"></i>
           	<div style={textNotificationStyle} className="shopping-cart-notification-text">{this.state.count}</div>
           </div>
@@ -42,6 +43,10 @@ var CartIcon = React.createClass({
 
     componentWillUnmount: function () {
       CartStore.removeChangeListener(this._onChange);
+    },
+
+    _onClick: function() {
+      NavigationActions.goToCart();
     }
 
 

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

@@ -1,5 +1,8 @@
 var React = require('react'),
     CartStore = require('../../stores/cartStore'),
+    AddToCart = require('../cart/addToCart'),
+    CartActions = require('../../actions/cartActions'),
+    SingleItem = require('../items/singleItem'),
     AddToCart = require('../cart/addToCart');
 
 var Router = require('react-router');
@@ -9,11 +12,19 @@ var ItemWithDetailsPage = React.createClass({
 
     render: function() {
 
+      var displayedItems = this.state.items.map(function (i) {
+        return (
+           <div key={i.get('id')} className="row">
+              <div className="col-md-3"><SingleItem item={i} /> </div>
+              <div className="col-md-6"> <AddToCart itemId={i.get('id')} /> </div>
+           </div> 
+          )
+      });
+
       return (
      
-        <div className="cart-page row-fluid center">
-          This is the cart page!
-         
+        <div className="cart-page center">
+           {displayedItems}
         </div>
         );       
 
@@ -22,7 +33,7 @@ var ItemWithDetailsPage = React.createClass({
     // Add change listeners to stores
     componentDidMount: function() {
       CartStore.addChangeListener(this._onChange);
-      
+      CartActions.load();
     },
 
     componentWillUnmount: function () {
@@ -30,15 +41,14 @@ var ItemWithDetailsPage = React.createClass({
     },
 
     _onChange: function () {
-
          if (this.isMounted()) {
-             this.setState(ItemDetailsStore.getState());
+             this.setState(CartStore.getWholeCartState());
         }
 
     },
 
     getInitialState: function () {
-      return CartStore.getState();
+      return CartStore.getWholeCartState();
     }
 
 });