4 files changed, 62 insertions, 53 deletions

diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index 9c52f83..22cfe02 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -14,13 +14,11 @@ class AddToCart extends Component {
   }
 
   handleAddToCart = async () => {
-    console.log(`Gonna add this item to the cart! ${this.props.id}`);
     const res = await this.props.addToCart({
       variables: {
         id: this.props.id,
       },
     });
-    // this.props.currentUser.refetch();
   };
 
   render() {
@@ -28,4 +26,11 @@ class AddToCart extends Component {
   }
 }
 
+AddToCart.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  addToCart: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+};
+
 export default compose(userEnhancer, addToCartEnhancer)(AddToCart);
+export { AddToCart };
diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index f270b80..8752c54 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -1,9 +1,8 @@
-import { Component } from 'react';
-import { graphql, compose } from 'react-apollo';
+import React from 'react';
+import { compose } from 'react-apollo';
 import styled from 'styled-components';
-import Title from './styles/Title';
-import { updateUIEnhancer, userEnhancer, uiEnhancer } from '../enhancers/enhancers';
-import RemoveFromCart from './RemoveFromCart';
+import PropTypes from 'prop-types';
+import { userEnhancer } from '../enhancers/enhancers';
 import TakeMyMoney from './TakeMyMoney';
 import formatMoney from '../lib/formatMoney';
 import { UIContext } from './UIContext';
@@ -74,48 +73,43 @@ const CloseButton = styled.button`
   right: 0;
 `;
 
-class Cart extends Component {
-  componentDidMount() {
-    // TODO listen for escape
-  }
+const Cart = props => {
+  const { me } = props.currentUser;
+  if (!me) return null;
+  const itemCount = me.cart.length;
+  const totalPrice = me.cart.reduce((tally, cartItem) => tally + cartItem.quantity * cartItem.item.price, 0);
 
-  componentWillUnmount() {
-    // TODO unlisten for escape
-  }
-  render() {
-    const { me } = this.props.currentUser;
-    if (!me) return null;
-    const itemCount = me.cart.length;
-    const quantityCount = me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0);
-    const totalPrice = me.cart.reduce((tally, cartItem) => tally + cartItem.quantity * cartItem.item.price, 0);
+  return (
+    <UIContext>
+      {context => (
+        <CartStyles open={context.state.isCartOpen}>
+          <header>
+            <CloseButton title="close" onClick={context.toggle}>
+              &times;
+            </CloseButton>
 
-    return (
-      <UIContext>
-        {context => (
-          <CartStyles open={context.state.isCartOpen}>
-            <header>
-              <CloseButton title="close" onClick={context.toggle}>
-                &times;
-              </CloseButton>
+            <Supreme>{me.name}'s Cart.</Supreme>
+            <p>
+              You have {itemCount} item{itemCount === 1 ? '' : 's'} in your cart.
+            </p>
+          </header>
 
-              <Supreme>{me.name}'s Cart.</Supreme>
-              <p>
-                You have {itemCount} item{itemCount === 1 ? '' : 's'} in your cart.
-              </p>
-            </header>
+          <CartUl>{me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}</CartUl>
+          <footer>
+            <p>{formatMoney(totalPrice)}</p>
+            <TakeMyMoney>
+              <button>Checkout</button>
+            </TakeMyMoney>
+          </footer>
+        </CartStyles>
+      )}
+    </UIContext>
+  );
+};
 
-            <CartUl>{me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}</CartUl>
-            <footer>
-              <p>{formatMoney(totalPrice)}</p>
-              <TakeMyMoney>
-                <button>Checkout</button>
-              </TakeMyMoney>
-            </footer>
-          </CartStyles>
-        )}
-      </UIContext>
-    );
-  }
-}
+Cart.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+};
 
 export default compose(userEnhancer)(Cart);
+export { Cart };
diff --git a/frontend/components/CartItem.js b/frontend/components/CartItem.js
index 83c948e..895b688 100644
--- a/frontend/components/CartItem.js
+++ b/frontend/components/CartItem.js
@@ -1,6 +1,7 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
 import formatMoney from '../lib/formatMoney';
 import RemoveFromCart from './RemoveFromCart';
-import styled from 'styled-components';
 
 const CartItemStyles = styled.li`
   padding: 1rem 0;
@@ -36,4 +37,8 @@ const CartItem = ({ cartItem }) => (
   </CartItemStyles>
 );
 
+CartItem.propTypes = {
+  cartItem: PropTypes.object.isRequired,
+};
+
 export default CartItem;
diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js
index 333f31b..011451a 100644
--- a/frontend/components/TakeMyMoney.js
+++ b/frontend/components/TakeMyMoney.js
@@ -1,10 +1,11 @@
 import { Component } from 'react';
 import StripeCheckout from 'react-stripe-checkout';
-import { graphql, compose } from 'react-apollo';
-import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries';
-import formatMoney from '../lib/formatMoney';
+import { compose } from 'react-apollo';
 import Router from 'next/router';
 import NProgress from 'nprogress';
+import PropTypes from 'prop-types';
+// import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries';
+import { userEnhancer, createOrderEnhancer } from '../enhancers/enhancers';
 
 class TakeMyMoney extends Component {
   onToken = async res => {
@@ -23,7 +24,7 @@ class TakeMyMoney extends Component {
   };
 
   render() {
-    const { me } = this.props.currentUserQuery;
+    const { me } = this.props.currentUser;
     if (!me || !me.cart.length) return null;
     const total = me.cart.reduce((tally, cartItem) => tally + cartItem.item.price * cartItem.quantity, 0);
     const totalItems = me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0);
@@ -44,6 +45,10 @@ class TakeMyMoney extends Component {
   }
 }
 
-const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
-const createOrderEnhancer = graphql(CREATE_ORDER_MUTATION, { name: 'createOrder' });
+TakeMyMoney.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  createOrder: PropTypes.func.isRequired,
+};
+
 export default compose(userEnhancer, createOrderEnhancer)(TakeMyMoney);
+export { TakeMyMoney };