Saying goodbye to graphcool

2 files changed, 55 insertions, 49 deletions

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);
diff --git a/components/UpdateItem.js b/components/UpdateItem.js
index a3b45a8..27be90f 100644
--- a/components/UpdateItem.js
+++ b/components/UpdateItem.js
@@ -1,35 +1,51 @@
-import React, { Component } from 'react'
-import { graphql, gql, compose } from 'react-apollo'
+import React, { Component } from 'react';
+import { graphql, gql, compose } from 'react-apollo';
 import { SINGLE_ITEM_QUERY, UPDATE_LINK_MUTATION } from '../queries';
 
 class UpdateLink extends Component {
-
   state = {
     ...this.props.findItem.Item,
-  }
+  };
 
-  saveToState = (e) => {
+  saveToState = e => {
     let { name, value, type } = e.target;
     if (type === 'number') {
       value = parseInt(value);
     }
 
     this.setState({ [name]: value });
-  }
+  };
+
+  _createLink = async e => {
+    e.preventDefault();
+    // pull the values from state
+    const { description, title } = this.state;
+    const { id } = this.props;
+    // create a mutation
+    // TODO: handle any errors
+    // turn loading on
+    this.setState({ loading: true });
+    console.log(this.state);
+    const res = await this.props.updateItem({
+      // pass in those variables from state
+      variables: {
+        ...this.state,
+      },
+    });
+    this.setState({ loading: false });
+  };
 
   render() {
     return (
       <div>
-
         <h2>Edit {this.props.id}</h2>
-        { this.state.loading ? 'LOADING...' : 'Ready!' }
+        {this.state.loading ? 'LOADING...' : 'Ready!'}
         <form onSubmit={this._createLink}>
-
           <label htmlFor="title">Title</label>
-          <input value={this.state.title} name="title" onChange={this.saveToState} type='text'/>
+          <input value={this.state.title} name="title" onChange={this.saveToState} type="text" />
 
           <label htmlFor="description">Description</label>
-          <textarea value={this.state.description} name="description" onChange={this.saveToState}></textarea>
+          <textarea value={this.state.description} name="description" onChange={this.saveToState} />
 
           <label htmlFor="price">Price</label>
           <input type="number" name="price" onChange={this.saveToState} value={this.state.price} />
@@ -40,28 +56,8 @@ class UpdateLink extends Component {
           <button type="submit">Save...</button>
         </form>
       </div>
-    )
+    );
   }
-
-  _createLink = async (e) => {
-    e.preventDefault();
-    // pull the values from state
-    const { description, title } = this.state
-    const { id } = this.props;
-    // create a mutation
-    // TODO: handle any errors
-    // turn loading on
-    this.setState({ loading: true });
-    console.log(this.state);
-    const res = await this.props.updateItem({
-      // pass in those variables from state
-      variables: {
-        ...this.state
-      }
-    });
-    this.setState({ loading: false });
-  }
-
 }
 
 const ComponentWithMutations = compose(
@@ -69,8 +65,8 @@ const ComponentWithMutations = compose(
   graphql(SINGLE_ITEM_QUERY, {
     name: 'findItem',
     options: ({ id }) => ({
-      variables: { id }
-    })
+      variables: { id },
+    }),
   }),
   // Second, the mutation for updating the link
   graphql(UPDATE_LINK_MUTATION, { name: 'updateItem' })