diff options
| -rw-r--r-- | frontend/components/AddToCart.js | 21 | ||||
| -rw-r--r-- | frontend/components/DeleteItem.js | 13 | ||||
| -rw-r--r-- | frontend/components/RemoveFromCart.js | 17 |
3 files changed, 35 insertions, 16 deletions
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> )} |