From 0a1648bf47490b312169c531aeb51ef4725e8d2e Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Tue, 30 Jan 2018 12:39:31 -0500
Subject: Saying goodbye to graphcool

---
 components/CartList.js | 40 +++++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 15 deletions(-)

(limited to 'components/CartList.js')

diff --git a/components/CartList.js b/components/CartList.js
index 630210d..b54aa39 100644
--- a/components/CartList.js
+++ b/components/CartList.js
@@ -4,7 +4,7 @@ import Items from '../components/Items';
 import Signup from '../components/Signup';
 import LoginAuth0 from '../components/LoginAuth0';
 import Page from '../components/Page';
-import { USER_ORDERS_QUERY } from '../queries';
+import { USER_ORDERS_QUERY, GET_CART_STATE } from '../queries';
 import { graphql, compose } from 'react-apollo';
 import has from 'lodash.has';
 import get from 'lodash.get';
@@ -14,6 +14,7 @@ import makeImage from '../lib/image';
 import TakeMyMoney from './TakeMyMoney';
 import { removeFromCartEnhancer } from '../enhancers';
 import { CURRENT_USER_QUERY } from '../queries';
+import PropTypes from 'prop-types';
 
 const CartStyles = styled.div`
   padding: 20px;
@@ -38,42 +39,50 @@ const CartStyles = styled.div`
 `;
 
 class CartList extends Component {
-  state = {
-    open: false,
+  static contextTypes = {
+    client: PropTypes.object,
   };
 
   componentDidMount() {
     setTimeout(this.props.currentUserQuery.refetch, 1);
+    // Set the cart state to be closed
+    this.context.client.writeQuery({
+      query: GET_CART_STATE,
+      data: { ui: { isCartOpen: true, __typename: 'Network' } },
+    });
   }
 
   toggleOpen = () => {
-    this.setState({ open: !this.state.open });
+    this.props.uiQuery.updateQuery(() => ({ ui: { isCartOpen: false, __typename: 'Network' } }));
   };
 
   render() {
     if (this.props.loading) {
-      return <p>Loading...</p>;
+      return <p>Loading....</p>;
     }
 
     if (this.props.error) {
-      return <p>Error...</p>;
+      return <p>Error....</p>;
     }
 
-    if (!has(this.props, 'currentUserQuery.user.cart')) {
-      return <p>Don't have it yet!</p>;
-    }
-
-    const cart = this.props.currentUserQuery.user.cart;
-    const userId = this.props.currentUserQuery.user.id;
+    // if (!has(this.props, 'currentUserQuery.user.cart')) {
+    //   return <p>Don't have it yet!</p>;
+    // }
+    // OMG Clean this up
+    let { user = {} } = this.props.currentUserQuery || {};
+    if (!user) user = {};
+    const cart = user.cart || [];
+    const userId = user.id;
+    // const userId = this.props.currentUserQuery.user.id;
 
     const total = cart.reduce((a, b) => a + b.price, 0);
     return (
-      <CartStyles open={this.state.open}>
+      <CartStyles open>
         <button className="toggleOpen" onClick={this.toggleOpen}>
           Open Cart
         </button>
         <h1>{cart.length} Items</h1>
-        <h1>Cart Status: {this.state.open.toString()}</h1>
+
         <ul>
           {cart.map(item => (
             <li key={item.id}>
@@ -101,4 +110,5 @@ class CartList extends Component {
 }
 
 const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
-export default compose(userEnhancer, removeFromCartEnhancer)(CartList);
+const uiEnhancer = graphql(GET_CART_STATE, { name: 'uiQuery' });
+export default compose(userEnhancer, removeFromCartEnhancer, uiEnhancer)(CartList);
-- 
cgit v1.3