From e0d0baa75ec0bf617f91b6cd779305d4009cae12 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 9 Feb 2018 13:31:39 -0500
Subject: 🆒
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/Cart.js | 42 +++++++++++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 15 deletions(-)

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

diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index 88b072c..4153600 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -2,8 +2,7 @@ import { Component } from 'react';
 import { graphql, compose } from 'react-apollo';
 import styled from 'styled-components';
 import { CURRENT_USER_QUERY } from '../queries';
-import formatMoney from '../lib/formatMoney.js';
-import ChaChing from './ChaChing';
+import RemoveFromCart from './RemoveFromCart';
 
 const CartStyles = styled.div`
   background: white;
@@ -16,31 +15,44 @@ const CartStyles = styled.div`
 
 class Cart extends Component {
   componentDidMount() {
-    // This fetches the new data, but doesn't populate the user via props
-    // this.props.currentUserQuery.refetch();
-    // This fetches the new data, and populates the user via props
-    setTimeout(this.props.currentUserQuery.refetch, 1);
+    console.log('refetching..');
+    setTimeout(this.props.currentUser.refetch, 10);
   }
-
   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 { 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">
-        There
+        <p>🛒: {me.cart.length} Items</p>
+        <ul>
+          {me.cart.map(cartItem => (
+            <li key={cartItem.id}>
+              <strong>
+                {cartItem.quantity} of {cartItem.item.title}
+              </strong>
+              <RemoveFromCart id={cartItem.id} />
+            </li>
+          ))}
+        </ul>
+        {/* There
         {user.cart.length === 1 ? ' is ' : 'are '}
         <ChaChing amount={user.cart.length} />
         {user.cart.length === 1 ? ' item ' : ' items '}
-        in your cart totaling
-        <ChaChing amount={formatMoney(total)} />
+        in your cart totaling */}
+        {/* <ChaChing amount={formatMoney(total)} /> */}
       </CartStyles>
     );
   }
 }
 
-const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
 export default compose(userEnhancer)(Cart);
-- 
cgit v1.3