From a09b01abf7c03e6b7e43f2175e5a34501808821b Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Tue, 13 Feb 2018 17:04:00 -0500
Subject: omg it works

---
 frontend/components/OrderList.js | 58 ++++++++++++++++++++++------------------
 1 file changed, 32 insertions(+), 26 deletions(-)

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

diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js
index c33f0b9..e478984 100644
--- a/frontend/components/OrderList.js
+++ b/frontend/components/OrderList.js
@@ -1,52 +1,58 @@
 import { Component } from 'react';
-import withData from '../lib/withData';
-import Items from '../components/Items';
-import CreateItem from '../components/CreateItem';
-import Signup from '../components/Signup';
-import LoginAuth0 from '../components/LoginAuth0';
-import Page from '../components/Page';
 import { USER_ORDERS_QUERY } from '../queries';
-import { graphql, compose } from 'react-apollo'
-import has from 'lodash.has';
-import get from 'lodash.get';
+import { graphql, compose } from 'react-apollo';
+import { format, formatDistance } from 'date-fns';
 import formatMoney from '../lib/formatMoney';
 import makeImage from '../lib/image';
 
 class OrderList extends Component {
   componentDidMount() {
-    console.log('Mounting!');
+    this.props.userOrdersQuery.refetch();
   }
   render() {
-
-    if(this.props.loading) {
-      return <p>Loading...</p>
+    console.log(this.props.userOrdersQuery);
+    if (this.props.loading) {
+      return <p>Loading...</p>;
     }
 
-    if(this.props.error) {
-      return <p>Error...</p>
+    if (this.props.error) {
+      return <p>Error...</p>;
     }
 
-    if(!has(this.props, 'userOrdersQuery.user.orders')) {
-      return <p>Don't have it yet!</p>
-    }
+    const { orders } = this.props.userOrdersQuery;
 
-    const orders = this.props.userOrdersQuery.user.orders;
+    if (!orders || !orders.length) return <p>No Orders Yet!</p>;
 
     console.log(orders);
     return (
       <div>
         <h2>You have {orders.length} Orders</h2>
         <ul>
-          {orders.map(order => <li key={order.id}>
-            <img src={makeImage(order.item.image)} alt=""/>
-            <h3>{order.item.title} ({formatMoney(order.amount)}) </h3>
-            <p>{order.item.description}</p>
-          </li>)}
+          {orders.map(order => (
+            <li key={order.id}>
+              <ul className="order-items">
+                <hr />
+                <h2>
+                  {order.id}
+                  <time dateTime={order.createdAt} title={format(order.createdAt, 'MMMM D, YYYY h:mm A')}>
+                    {formatDistance(order.createdAt, new Date())}
+                  </time>
+                </h2>
+
+                {order.items.map(item => (
+                  <li>
+                    <img src={item.image} alt={item.title} />
+                    <p>{item.title}</p>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
         </ul>
       </div>
-    )
+    );
   }
 }
 
 const ordersEnhancer = graphql(USER_ORDERS_QUERY, { name: 'userOrdersQuery' });
-export default compose(ordersEnhancer)(OrderList)
+export default compose(ordersEnhancer)(OrderList);
-- 
cgit v1.3