Merge pull request #8 from peggyrayzis/apollo-feedback

Apollo feedback

4 files changed, 59 insertions, 35 deletions

diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index 105f558..7cb0856 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -1,18 +1,23 @@
 import { Component } from 'react';
-import { Mutation, Query } from 'react-apollo';
+import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import {
+  ADD_TO_CART_MUTATION,
+  CURRENT_USER_QUERY,
+} from '../queries/queries.graphql';
 
 class AddToCart extends Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
   };
 
-  update = (proxy, payload) => {
+  update = (cache, payload) => {
     const newCartItem = payload.data.addToCart;
-    const data = proxy.readQuery({ query: CURRENT_USER_QUERY });
+    const data = cache.readQuery({ query: CURRENT_USER_QUERY });
 
-    const existingIndex = data.me.cart.findIndex(cartItem => cartItem.id === newCartItem.id);
+    const existingIndex = data.me.cart.findIndex(
+      cartItem => cartItem.id === newCartItem.id,
+    );
     if (existingIndex >= 0) {
       // already in cache, just replace it
       data.me.cart = [
@@ -23,23 +28,23 @@ class AddToCart extends Component {
     } else {
       data.me.cart = [...data.me.cart, newCartItem];
     }
-    proxy.writeQuery({ query: CURRENT_USER_QUERY, data });
+    cache.writeQuery({ query: CURRENT_USER_QUERY, data });
   };
 
   render() {
     const { id } = this.props;
     return (
-      <Query query={CURRENT_USER_QUERY}>
-        {() => (
-          <Mutation mutation={ADD_TO_CART_MUTATION} variables={{ id }} update={this.update}>
-            {(addToCart, { loading }) => (
-              <button disabled={loading} onClick={addToCart}>
-                🛒 Add{loading && 'ing'} To Cart
-              </button>
-            )}
-          </Mutation>
+      <Mutation
+        mutation={ADD_TO_CART_MUTATION}
+        variables={{ id }}
+        update={this.update}
+      >
+        {(addToCart, { loading }) => (
+          <button disabled={loading} onClick={addToCart}>
+            🛒 Add{loading && 'ing'} To Cart
+          </button>
         )}
-      </Query>
+      </Mutation>
     );
   }
 }
diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index 2230a0e..a815b78 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -17,19 +17,23 @@ import CloseButton from './styles/CloseButton';
 import SickButton from './styles/SickButton';
 
 const Composed = adopt({
-  toggleCart: <Mutation mutation={TOGGLE_CART_MUTATION}>{() => {}}</Mutation>,
-  localState: <Query query={LOCAL_STATE_QUERY}>{() => {}}</Query>,
-  currentUser: (
-    <Query query={CURRENT_USER_QUERY} data-test="cart">
-      {() => {}}
-    </Query>
+  toggleCart: ({ render }) => (
+    <Mutation mutation={TOGGLE_CART_MUTATION}>
+      {(mutate, result) => render({ mutate, result })}
+    </Mutation>
   ),
+  localState: <Query query={LOCAL_STATE_QUERY} />,
+  currentUser: <Query query={CURRENT_USER_QUERY} data-test="cart" />,
 });
 
 const Cart = () => (
   <Composed>
     {({ toggleCart, localState, currentUser }) => {
-      const { data: { me }, error, loading } = currentUser;
+      const {
+        data: { me },
+        error,
+        loading,
+      } = currentUser;
       if (loading) return <p>Loading...</p>;
       if (error) return <Error error={error} />;
       if (!me) return null;
@@ -42,11 +46,16 @@ const Cart = () => (
 
             <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>
+          <ul>
+            {me.cart.map(cartItem => (
+              <CartItem key={cartItem.id} cartItem={cartItem} />
+            ))}
+          </ul>
           <footer>
             <p>{formatMoney(calcTotalPrice(me.cart))}</p>
             <TakeMyMoney>
diff --git a/frontend/components/DeleteItem.js b/frontend/components/DeleteItem.js
index 4ef227d..53fc04d 100644
--- a/frontend/components/DeleteItem.js
+++ b/frontend/components/DeleteItem.js
@@ -1,20 +1,23 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { REMOVE_ITEM_MUTATION, ALL_ITEMS_QUERY } from '../queries/queries.graphql';
+import {
+  REMOVE_ITEM_MUTATION,
+  ALL_ITEMS_QUERY,
+} from '../queries/queries.graphql';
 
 class DeleteItem extends React.Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
   };
 
-  update = (proxy, payload) => {
+  update = (cache, payload) => {
     const deletedItem = payload.data.deleteItem;
-    const data = proxy.readQuery({ query: ALL_ITEMS_QUERY });
+    const data = cache.readQuery({ query: ALL_ITEMS_QUERY });
     // filter this one out
     data.items = data.items.filter(item => item.id !== deletedItem.id);
-    // write the data back to the proxy
-    proxy.writeQuery({ query: ALL_ITEMS_QUERY, data });
+    // write the data back to the cache
+    cache.writeQuery({ query: ALL_ITEMS_QUERY, data });
   };
 
   render() {
diff --git a/frontend/components/RemoveFromCart.js b/frontend/components/RemoveFromCart.js
index bd8a15f..7ec2313 100644
--- a/frontend/components/RemoveFromCart.js
+++ b/frontend/components/RemoveFromCart.js
@@ -2,7 +2,10 @@ import { Component } from 'react';
 import { Mutation } from 'react-apollo';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { REMOVE_FROM_CART_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import {
+  REMOVE_FROM_CART_MUTATION,
+  CURRENT_USER_QUERY,
+} from '../queries/queries.graphql';
 
 const BigButton = styled.button`
   font-size: 3rem;
@@ -19,12 +22,12 @@ class RemoveFromCart extends Component {
     id: PropTypes.string.isRequired,
   };
 
-  update = (proxy, payload) => {
-    const data = proxy.readQuery({ query: CURRENT_USER_QUERY });
+  update = (cache, payload) => {
+    const data = cache.readQuery({ query: CURRENT_USER_QUERY });
     // console.log(data.me.cart[0]);
     const cartItemId = payload.data.removeFromCart.id;
     data.me.cart = data.me.cart.filter(cartItem => cartItem.id !== cartItemId);
-    proxy.writeQuery({ query: CURRENT_USER_QUERY, data });
+    cache.writeQuery({ query: CURRENT_USER_QUERY, data });
   };
 
   render() {
@@ -35,7 +38,11 @@ class RemoveFromCart extends Component {
         update={this.update}
       >
         {(removeFromCart, { loading }) => (
-          <BigButton disabled={loading} title="Remove From Cart" onClick={removeFromCart}>
+          <BigButton
+            disabled={loading}
+            title="Remove From Cart"
+            onClick={removeFromCart}
+          >
             ×
           </BigButton>
         )}