1 files changed, 13 insertions, 26 deletions

diff --git a/finished-application/frontend/components/OrderList.js b/finished-application/frontend/components/OrderList.js
index 5886ad7..e2e22ff 100644
--- a/finished-application/frontend/components/OrderList.js
+++ b/finished-application/frontend/components/OrderList.js
@@ -4,16 +4,16 @@ import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import styled from 'styled-components';
 import gql from 'graphql-tag';
+import Error from './ErrorMessage';
 import formatMoney from '../lib/formatMoney';
 import OrderItemStyles from './styles/OrderItemStyles';
 
 const USER_ORDERS_QUERY = gql`
-  query orders {
+  query USER_ORDERS_QUERY {
     orders(orderBy: createdAt_DESC) {
       id
       total
       createdAt
-      updatedAt
       items {
         id
         title
@@ -26,7 +26,7 @@ const USER_ORDERS_QUERY = gql`
   }
 `;
 
-const OrderUl = styled.ul`
+const orderUl = styled.ul`
   display: grid;
   grid-gap: 4rem;
   grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
@@ -37,13 +37,13 @@ class OrderList extends React.Component {
     return (
       <Query query={USER_ORDERS_QUERY}>
         {({ data: { orders }, loading, error }) => {
-          if (loading) return <p>Loading...</p>;
-          if (error) return <p>Error...</p>;
-          if (!orders || !orders.length) return <p>No Orders Yet!</p>;
+          if (loading) return <p>loading...</p>;
+          if (error) return <Error erorr={error} />;
+          console.log(orders);
           return (
             <div>
-              <h2>You have {orders.length} Orders</h2>
-              <OrderUl>
+              <h2>You have {orders.length} orders</h2>
+              <orderUl>
                 {orders.map(order => (
                   <OrderItemStyles key={order.id}>
                     <Link
@@ -54,22 +54,10 @@ class OrderList extends React.Component {
                     >
                       <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>
+                          <p>{order.items.reduce((a, b) => a + b.quantity, 0)} Items</p>
+                          <p>{order.items.length} Products</p>
+                          <p>{formatDistance(order.createdAt, new Date())}</p>
+                          <p>{formatMoney(order.total)}</p>
                         </div>
                         <div className="images">
                           {order.items.map(item => (
@@ -80,7 +68,7 @@ class OrderList extends React.Component {
                     </Link>
                   </OrderItemStyles>
                 ))}
-              </OrderUl>
+              </orderUl>
             </div>
           );
         }}
@@ -90,4 +78,3 @@ class OrderList extends React.Component {
 }
 
 export default OrderList;
-export { USER_ORDERS_QUERY };