From 65c524251d49ade9d44a62337f3c1c1fed6eedd0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 28 Mar 2018 15:22:34 -0400
Subject: Permissions

---
 frontend/components/OrderList.js | 102 +++++++++++++++++++++++++++++++--------
 1 file changed, 82 insertions(+), 20 deletions(-)

(limited to 'frontend/components/OrderList.js')

diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js
index ed7beae..5467f93 100644
--- a/frontend/components/OrderList.js
+++ b/frontend/components/OrderList.js
@@ -3,6 +3,54 @@ import { Query } from 'react-apollo';
 import { format, formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { USER_ORDERS_QUERY } from '../queries';
+import styled from 'styled-components';
+import formatMoney from '../lib/formatMoney';
+
+const OrderUl = styled.ul`
+  display: grid;
+  grid-gap: 4rem;
+  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
+`;
+const OrderListItem = styled.li`
+  box-shadow: ${props => props.theme.bs};
+  list-style: none;
+  padding: 2rem;
+  border: 1px solid ${props => props.theme.offWhite};
+  h2 {
+    border-bottom: 2px solid red;
+    margin-top: 0;
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .images {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    margin-top: 1rem;
+    img {
+      height: 200px;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+  .order-meta {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
+    display: grid;
+    grid-gap: 1rem;
+    text-align: center;
+    & > * {
+      margin: 0;
+      background: rgba(0, 0, 0, 0.03);
+      padding: 1rem 0;
+    }
+    strong {
+      display: block;
+      margin-bottom: 1rem;
+    }
+  }
+`;
 
 class OrderList extends React.Component {
   render() {
@@ -15,28 +63,42 @@ class OrderList extends React.Component {
           return (
             <div>
               <h2>You have {orders.length} Orders</h2>
-              <ul>
+              <OrderUl>
                 {orders.map(order => (
-                  <li key={order.id}>
-                    <ul className="order-items">
-                      <hr />
-                      <h2>
-                        <Link
-                          href={{
-                            pathname: '/order',
-                            query: { id: order.id },
-                          }}
-                        >
-                          <a>{order.id}</a>
-                        </Link>
-                        <time dateTime={order.createdAt} title={format(order.createdAt, 'MMMM D, YYYY h:mm A')}>
-                          {formatDistance(order.createdAt, new Date())}
-                        </time>
-                      </h2>
-                    </ul>
-                  </li>
+                  <OrderListItem key={order.id}>
+                    <Link
+                      href={{
+                        pathname: '/order',
+                        query: { id: order.id },
+                      }}
+                    >
+                      <a>
+                        <div className="order-meta">
+                          <p>
+                            <strong>{order.items.reduce((a, b) => a + b.quantity, 0)}</strong>
+                            Items
+                          </p>
+                          <p>
+                            <strong>{order.items.length}</strong>
+                            Products
+                          </p>
+                          <p>
+                            <strong>{formatDistance(order.createdAt, new Date())}</strong>
+                            ago
+                          </p>
+                          <p>
+                            <strong>{formatMoney(order.total)}</strong>
+                            Total
+                          </p>
+                        </div>
+                        <div className="images">
+                          {order.items.map(item => <img key={item.id} src={item.image} alt={item.title} />)}
+                        </div>
+                      </a>
+                    </Link>
+                  </OrderListItem>
                 ))}
-              </ul>
+              </OrderUl>
             </div>
           );
         }}
-- 
cgit v1.3