cart display works but it's far from finished

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();
     }
 
 });