diff options
Diffstat (limited to 'frontend/components/AddToCart.js')
| -rw-r--r-- | frontend/components/AddToCart.js | 56 |
1 files changed, 14 insertions, 42 deletions
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js index e46a1f5..4522137 100644 --- a/frontend/components/AddToCart.js +++ b/frontend/components/AddToCart.js @@ -1,11 +1,13 @@ import { Component } from 'react'; -import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY, SINGLE_ITEM_QUERY } from '../queries'; -import { removeFromCartEnhancer, userEnhancer } from '../enhancers'; import { graphql, compose } from 'react-apollo'; import Transition from 'react-transition-group/Transition'; -import makeImage from '../lib/image'; import styled from 'styled-components'; import PropTypes from 'prop-types'; +import { CURRENT_USER_QUERY, SINGLE_ITEM_QUERY } from '../queries'; +import { removeFromCartEnhancer, userEnhancer, addtoCartEnhancer } from '../enhancers/enhancers'; + +console.log(addtoCartEnhancer); +import makeImage from '../lib/image'; const JumpImg = styled.img` border: 0 solid black; @@ -36,59 +38,29 @@ const JumpImg = styled.img` class AddToCart extends Component { static propTypes = { - currentUserQuery: PropTypes.object, + currentUser: PropTypes.object, }; componentDidMount() { - this.props.currentUserQuery.refetch(); + this.props.currentUser.refetch(); } - addToCart = async () => { + handleAddToCart = async () => { + console.log(`Gonna add this item to the cart! ${this.props.id}`); const res = await this.props.addToCart({ variables: { - userId: this.props.currentUserQuery.user.id, - itemId: this.props.id, - }, - }); - this.props.currentUserQuery.refetch(); - console.log(res); - }; - - removeFromCart = async () => { - const res = await this.props.removeFromCart({ - variables: { - userId: this.props.currentUserQuery.user.id, - itemId: this.props.id, + id: this.props.id, }, }); - this.props.currentUserQuery.refetch(); - console.log(res); + console.log({ realResponse: res }); + this.props.currentUser.refetch(); }; render() { - const user = this.props.currentUserQuery.user; - // TODO WTF - if (!user || this.props.singleItemQuery.loading || !this.props.singleItemQuery.Item) return <p>Loading...</p>; - const cartIds = user.cart.map(item => item.id); - const image = this.props.singleItemQuery.Item.image || {}; - const isInCart = cartIds.includes(this.props.id); - const { x, y } = document.querySelector('.cart').getBoundingClientRect(); - return ( - <div> - {isInCart ? ( - <button onClick={this.removeFromCart}>❌ Remove From Cart</button> - ) : ( - <button onClick={this.addToCart}>Add To Cart 👜</button> - )} - <Transition in={isInCart} timeout={1000}> - {status => <JumpImg x={x} y={y} src={makeImage(image)} className={`jump-${status}`} />} - </Transition> - </div> - ); + return <button onClick={this.handleAddToCart}>🛒 Add To Cart</button>; } } -const createOrderEnhancer = graphql(ADD_TO_CART_MUTATION, { name: 'addToCart' }); const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, { name: 'singleItemQuery', options: ({ id }) => ({ @@ -97,4 +69,4 @@ const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, { }, }), }); -export default compose(userEnhancer, createOrderEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart); +export default compose(userEnhancer, addtoCartEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart); |
