src/components/CartItem/CartItem.js

@@ -0,0 +1,25 @@
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+
+export default class CartItem extends Component {
+  static propTypes = {
+    cartItem: PropTypes.object.isRequired
+  };
+
+  render() {
+    const { cartItem } = this.props;
+    const styles = require('./CartItem.styl');
+
+    return (
+      <div className={styles.cartItemContainer}>
+        <Link to={'/product/' + cartItem.product.id} className={styles.imgContainer}>
+          <img src={'/api/' + cartItem.product.imageUrl}/>
+        </Link>
+        <div className={styles.productInfos}>
+          <Link to={'/product/' + cartItem.product.id} className={styles.title}>{cartItem.product.title} x {cartItem.nbItem}</Link>
+          <p className={styles.price}>{cartItem.product.price * cartItem.nbItem} $</p>
+        </div>
+      </div>
+    );
+  }
+}

src/components/CartItem/CartItem.styl

@@ -0,0 +1,50 @@
+.cartItemContainer {
+  box-shadow: 0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(63,63,68,.1);
+  border-radius: 3px;
+  background: white;
+  max-width: 200px;
+  margin: 10px;
+}
+
+.imgContainer {
+  height: 150px;
+  max-width: 200px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  img {
+    height: auto;
+    width: 100%;
+    cursor: pointer;
+  }
+}
+
+.productInfos {
+  padding: 20px 10px;
+
+  p {
+    margin: 0;
+  }
+
+  .title {
+    display: block;
+    margin-bottom: 10px;
+    color: #3585b5;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .price {
+    color: #D64242;
+    margin-left: 10px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}

src/components/Title/Title.js

@@ -17,7 +17,7 @@ export default class Title extends Component {
         <div className={styles.tab}>
           <span>{title}</span>
         </div>
-        {showButton && <button onClick={func}><i className="material-icons">{button}</i></button>}
+        {showButton && <button className={styles.button} onClick={func}><i className="material-icons">{button}</i></button>}
       </div>
     );
   }

src/components/Title/Title.styl

@@ -19,11 +19,12 @@
   }
 }
 
-button {
+.button {
   color: #999;
   background: transparent;
   border: 0;
   cursor: pointer;
+  margin-right: 10px;
 
   &:hover {
     color: #44c63d;

src/components/index.js

@@ -5,6 +5,7 @@ export CenterContainer from './CenterContainer/CenterContainer';
 export SignupForm from './SignupForm/SignupForm';
 export LoginForm from './LoginForm/LoginForm';
 export ProductVignette from './ProductVignette/ProductVignette';
+export CartItem from './CartItem/CartItem';
 export Tabs from './Tabs/Tabs';
 export Tab from './Tab/Tab';
 export TabNav from './TabNav/TabNav';

src/containers/Orders/Orders.js

@@ -1,5 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { CartItem } from 'components';
+import moment from 'moment';
 
 @connect(state => ({user: state.auth.user}))
 export default class Orders extends Component {
@@ -12,9 +14,30 @@ export default class Orders extends Component {
     const styles = require('./Orders.styl');
 
     return (
-      <div className={styles.container}>
-        {user && user.orders && user.orders.map((value, index) => {
-          return (<div className={styles.element} key={value.id + index}><h4>{value.cartTotal}</h4></div>);
+      <div className={styles.ordersContainer}>
+        {user && user.orders && user.orders.map((order, orderIndex) => {
+          const fromNow = moment(order.createdAt).fromNow();
+          const date = moment(order.createdAt).format('LLL');
+          return (
+            <div className={styles.orderContainer} key={order.id + orderIndex}>
+              <div className={styles.orderTitle}>
+                <span>Order n°{orderIndex + 1}</span>
+                <span>{fromNow}</span>
+                <span>Status : {order.status}</span>
+              </div>
+              <div className={styles.orderContent}>
+                <div className={styles.orderDescription}>
+                  <span className={styles.date}>Made on {date}</span>
+                  <span>Total : {order.cartTotal}$</span>
+                </div>
+                <div className={styles.orderItems}>
+                  {order.cart && order.cart.map((cartItem) => {
+                    return (<CartItem cartItem={cartItem} key={cartItem.product.id}/>);
+                  })}
+                </div>
+              </div>
+            </div>
+          );
         })}
       </div>
     );

src/containers/Orders/Orders.styl

@@ -1,21 +1,74 @@
-.container {
+.ordersContainer {
   background-color: #f5f5f5;
   padding: 20px;
   display: flex;
   flex-direction: column;
   overflow: auto;
-}
 
-.element {
-  background-color: white;
-  border-radius: 4px;
-  margin-bottom: 20px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(63,63,68,.1);
-  flex-shrink: 0;
-
-  h4 {
-    margin-left: 10px;
-    font-size: 16px;
-    font-weight: 400;
+  .orderContainer {
+    background-color: white;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(63,63,68,.1);
+    flex-shrink: 0;
+
+    .orderTitle {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      padding: 20px;
+      background-color: #3585b5;
+      color: white;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      justify-content: space-around;
+    }
+
+    .orderContent {
+
+      .orderDescription {
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        border-bottom: 1px solid #ececec;
+      }
+
+      .orderItems {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 10px;
+      }
+    }
   }
 }
+
+.date {
+  padding-bottom: 10px;
+  font-weight: lighter;
+  font-color: #555;
+}
+
+.cartContainer {
+  background-color: #f5f5f5;
+  box-shadow: inset 0 2px 0 rgba(0,0,0,.03),inset 0 -1px 0 rgba(0,0,0,.05);
+  padding: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+}
+
+.imgContainer {
+  height: 150px;
+  max-width: 200px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  img {
+    height: auto;
+    width: 100%;
+    cursor: pointer;
+  }
+}