From 8cdede8860f05a2648d17fcb412fb3c2ec3966c9 Mon Sep 17 00:00:00 2001
From: Peggy Rayzis <peggyrayzis@gmail.com>
Date: Tue, 22 May 2018 12:55:49 -0400
Subject: Rename proxy to cache

---
 frontend/components/AddToCart.js      | 21 +++++++++++++++------
 frontend/components/DeleteItem.js     | 13 ++++++++-----
 frontend/components/RemoveFromCart.js | 17 ++++++++++++-----
 3 files changed, 35 insertions(+), 16 deletions(-)

(limited to 'frontend/components')

diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index 105f558..c79e644 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 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,7 +28,7 @@ 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() {
@@ -31,7 +36,11 @@ class AddToCart extends Component {
     return (
       <Query query={CURRENT_USER_QUERY}>
         {() => (
-          <Mutation mutation={ADD_TO_CART_MUTATION} variables={{ id }} update={this.update}>
+          <Mutation
+            mutation={ADD_TO_CART_MUTATION}
+            variables={{ id }}
+            update={this.update}
+          >
             {(addToCart, { loading }) => (
               <button disabled={loading} onClick={addToCart}>
                 🛒 Add{loading && 'ing'} To Cart
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>
         )}
-- 
cgit v1.3


From 444defc6e5709c46d935dbff8e90538156915457 Mon Sep 17 00:00:00 2001
From: Peggy Rayzis <peggyrayzis@gmail.com>
Date: Tue, 22 May 2018 13:00:54 -0400
Subject: Remove unnecessary Query component

---
 frontend/components/AddToCart.js | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

(limited to 'frontend/components')

diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index c79e644..7cb0856 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -1,5 +1,5 @@
 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,
@@ -34,21 +34,17 @@ class AddToCart extends Component {
   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>
     );
   }
 }
-- 
cgit v1.3


From e040b70da6a48b1eb2f2b32132fa9b2244e92780 Mon Sep 17 00:00:00 2001
From: Peggy Rayzis <peggyrayzis@gmail.com>
Date: Wed, 23 May 2018 17:51:50 -0400
Subject: Refactor react-adopt to recommended API

---
 frontend/components/Cart.js | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

(limited to 'frontend/components')

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>
-- 
cgit v1.3