1 files changed, 22 insertions, 30 deletions

diff --git a/finished-application/frontend/components/Cart.js b/finished-application/frontend/components/Cart.js
index 7e8a9c5..2a72b38 100644
--- a/finished-application/frontend/components/Cart.js
+++ b/finished-application/frontend/components/Cart.js
@@ -1,17 +1,16 @@
 import React from 'react';
-import { Mutation, Query } from 'react-apollo';
-import { adopt } from 'react-adopt';
+import { Query, Mutation } from 'react-apollo';
 import gql from 'graphql-tag';
-import TakeMyMoney from './TakeMyMoney';
-import formatMoney from '../lib/formatMoney';
-import CartItem from './CartItem';
-import { CURRENT_USER_QUERY } from './User';
-import calcTotalPrice from '../lib/calcTotalPrice';
-import Error from './ErrorMessage';
+import { adopt } from 'react-adopt';
+import User from './User';
 import CartStyles from './styles/CartStyles';
 import Supreme from './styles/Supreme';
 import CloseButton from './styles/CloseButton';
 import SickButton from './styles/SickButton';
+import CartItem from './CartItem';
+import calcTotalPrice from '../lib/calcTotalPrice';
+import formatMoney from '../lib/formatMoney';
+import TakeMyMoney from './TakeMyMoney';
 
 const LOCAL_STATE_QUERY = gql`
   query {
@@ -24,45 +23,38 @@ const TOGGLE_CART_MUTATION = gql`
     toggleCart @client
   }
 `;
-
+/* eslint-disable */
 const Composed = adopt({
-  toggleCart: ({ render }) => (
-    <Mutation mutation={TOGGLE_CART_MUTATION}>
-      {(mutate, result) => render({ mutate, result })}
-    </Mutation>
-  ),
-  localState: ({ render }) => <Query query={LOCAL_STATE_QUERY} children={render} />,
-  currentUser: ({ render }) => (
-    <Query children={render} query={CURRENT_USER_QUERY} data-test="cart" />
-  ),
+  user: ({ render }) => <User>{render}</User>,
+  toggleCart: ({ render }) => <Mutation mutation={TOGGLE_CART_MUTATION}>{render}</Mutation>,
+  localState: ({ render }) => <Query query={LOCAL_STATE_QUERY}>{render}</Query>,
 });
+/* eslint-enable */
 
 const Cart = () => (
   <Composed>
-    {({ toggleCart, localState, currentUser }) => {
-      const { data: { me }, error, loading } = currentUser;
-      if (loading) return <p>Loading...</p>;
-      if (error) return <Error error={error} />;
+    {({ user, toggleCart, localState }) => {
+      const me = user.data.me;
       if (!me) return null;
       return (
         <CartStyles open={localState.data.cartOpen}>
           <header>
-            <CloseButton title="close" onClick={toggleCart.mutate}>
+            <CloseButton onClick={toggleCart} title="close">
               &times;
             </CloseButton>
-
-            <Supreme>{me.name}'s Cart.</Supreme>
+            <Supreme>{me.name}'s Cart</Supreme>
             <p>
-              You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in your cart.
+              You Have {me.cart.length} Item{me.cart.length === 1 ? '' : 's'} in your cart.
             </p>
           </header>
-
           <ul>{me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}</ul>
           <footer>
             <p>{formatMoney(calcTotalPrice(me.cart))}</p>
-            <TakeMyMoney>
-              <SickButton>Checkout</SickButton>
-            </TakeMyMoney>
+            {me.cart.length && (
+              <TakeMyMoney>
+                <SickButton>Checkout</SickButton>
+              </TakeMyMoney>
+            )}
           </footer>
         </CartStyles>
       );