From c3bbebfcfeed7a9b8c7470d7b48e12046d834e59 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 17 Aug 2018 15:51:02 -0400
Subject: suuuup everyone

---
 stepped-solutions/42/frontend/components/Cart.js | 63 ++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100755 stepped-solutions/42/frontend/components/Cart.js

(limited to 'stepped-solutions/42/frontend/components/Cart.js')

diff --git a/stepped-solutions/42/frontend/components/Cart.js b/stepped-solutions/42/frontend/components/Cart.js
new file mode 100755
index 0000000..1895235
--- /dev/null
+++ b/stepped-solutions/42/frontend/components/Cart.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Query, Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+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';
+
+const LOCAL_STATE_QUERY = gql`
+  query {
+    cartOpen @client
+  }
+`;
+
+const TOGGLE_CART_MUTATION = gql`
+  mutation {
+    toggleCart @client
+  }
+`;
+
+const Cart = () => (
+  <User>
+    {({ data: { me } }) => {
+      if (!me) return null;
+      console.log(me);
+      return (
+        <Mutation mutation={TOGGLE_CART_MUTATION}>
+          {toggleCart => (
+            <Query query={LOCAL_STATE_QUERY}>
+              {({ data }) => (
+                <CartStyles open={data.cartOpen}>
+                  <header>
+                    <CloseButton onClick={toggleCart} title="close">
+                      &times;
+                    </CloseButton>
+                    <Supreme>{me.name}'s Cart</Supreme>
+                    <p>
+                      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>
+                    <SickButton>Checkout</SickButton>
+                  </footer>
+                </CartStyles>
+              )}
+            </Query>
+          )}
+        </Mutation>
+      );
+    }}
+  </User>
+);
+
+export default Cart;
+export { LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION };
-- 
cgit v1.3