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/Cart.js      | 58 +++++++++++++++++++++++++++-------------
 frontend/components/CartList.js  |  1 +
 frontend/components/OrderList.js | 58 ++++++++++++++++++++++------------------
 3 files changed, 73 insertions(+), 44 deletions(-)

(limited to 'frontend/components')

diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index 46a8941..72c34ae 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -1,39 +1,62 @@
 import { Component } from 'react';
 import { graphql, compose } from 'react-apollo';
 import styled from 'styled-components';
-import { CURRENT_USER_QUERY } from '../queries';
+import { networkEnhancer, userEnhancer, uiEnhancer } from '../enhancers/enhancers';
 import RemoveFromCart from './RemoveFromCart';
 import TakeMyMoney from './TakeMyMoney';
-import { formatMoney } from '../lib/formatMoney';
 
 const CartStyles = styled.div`
-  background: white;
-  border-radius: 10px;
   padding: 20px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
+  position: relative;
+  background: white;
+  position: fixed;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateX(100%);
+  transition: all 0.3s;
+  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
+  z-index: 5;
+  ${props => props.open && `transform: translateX(0);`};
+  .toggleOpen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateX(-100%);
+  }
 `;
 
 class Cart extends Component {
+  state = {
+    open: true,
+  };
   componentDidMount() {
     console.log('refetching..');
     setTimeout(this.props.currentUser.refetch, 10);
   }
+  toggleOpen = () => {
+    this.setState({ open: !this.state.open });
+  };
+  handleClick = () => {
+    console.log('CLICK');
+    this.props.updateNetworkStatus(!this.props.ui.networkStatus.isConnected);
+  };
   render() {
     if (!this.props.currentUser.me) {
       return null;
     }
-    // Check for loading state..
-    // const { loading, error } = this.props.currentUserQuery;
-    // const { user } = this.props.currentUserQuery;
-    // if (loading || error || !user) return <p>Cart Loading...</p>;
-    // const total = user.cart.reduce((a, b) => a + b.price, 0);
-
     const { me } = this.props.currentUser;
-    console.log(me);
+
     return (
-      <CartStyles className="cart">
+      <CartStyles className="cart" open={this.state.open}>
+        <button onClick={this.handleClick}>
+          Toggle Network Status:: {this.props.ui.networkStatus.isConnected.toString()}
+        </button>
+        <button className="toggleOpen" onClick={this.toggleOpen}>
+          Open Cart
+        </button>
+
         <p>🛒: {me.cart.length} Items</p>
         <ul>
           {me.cart.map(cartItem => (
@@ -50,7 +73,7 @@ class Cart extends Component {
           <hr />
           <button>Checkout!!!</button>
         </TakeMyMoney>
-        {/* There
+        {/* Theren
         {user.cart.length === 1 ? ' is ' : 'are '}
         <ChaChing amount={user.cart.length} />
         {user.cart.length === 1 ? ' item ' : ' items '}
@@ -61,5 +84,4 @@ class Cart extends Component {
   }
 }
 
-const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
-export default compose(userEnhancer)(Cart);
+export default compose(userEnhancer, networkEnhancer, uiEnhancer)(Cart);
diff --git a/frontend/components/CartList.js b/frontend/components/CartList.js
index 661d5ad..bf08f87 100644
--- a/frontend/components/CartList.js
+++ b/frontend/components/CartList.js
@@ -1,3 +1,4 @@
+// I THINK THIS CAN BE DELETED
 import { Component } from 'react';
 import withData from '../lib/withData';
 import Items from '../components/Items';
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