From b1600adec47a04f60e1da07d94a3ed3906ff5aee Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 14 Jun 2018 16:44:21 -0400 Subject: starter files --- .../frontend/components/RemoveFromCart.js | 57 ++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 finished-application/frontend/components/RemoveFromCart.js (limited to 'finished-application/frontend/components/RemoveFromCart.js') diff --git a/finished-application/frontend/components/RemoveFromCart.js b/finished-application/frontend/components/RemoveFromCart.js new file mode 100644 index 0000000..d29cbf1 --- /dev/null +++ b/finished-application/frontend/components/RemoveFromCart.js @@ -0,0 +1,57 @@ +import { Component } from 'react'; +import { Mutation } from 'react-apollo'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import gql from 'graphql-tag'; +import { CURRENT_USER_QUERY } from './User'; + +const REMOVE_FROM_CART_MUTATION = gql` + mutation removeFromCart($id: ID!) { + removeFromCart(id: $id) { + id + } + } +`; + +const BigButton = styled.button` + font-size: 3rem; + background: none; + border: 0; + &:hover { + color: ${props => props.theme.red}; + cursor: pointer; + } +`; + +class RemoveFromCart extends Component { + static propTypes = { + id: PropTypes.string.isRequired, + }; + + 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); + cache.writeQuery({ query: CURRENT_USER_QUERY, data }); + }; + + render() { + return ( + + {(removeFromCart, { loading }) => ( + removeFromCart}> + × + + )} + + ); + } +} + +export default RemoveFromCart; +export { REMOVE_FROM_CART_MUTATION }; -- cgit v1.3