diff options
| author | Wes Bos <wesbos@gmail.com> | 2017-09-15 14:26:13 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2017-09-15 14:26:13 -0400 |
| commit | 1450e579c67e3d969cb099dfe6c1cefd1e313fb5 (patch) | |
| tree | 5c255968082c16452f1dc8245dbbb890f91dce87 /components/AddToCart.js | |
| parent | 7af74ff8988961c988f03c95961b70c2918521ae (diff) | |
yep
Diffstat (limited to 'components/AddToCart.js')
| -rw-r--r-- | components/AddToCart.js | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/components/AddToCart.js b/components/AddToCart.js new file mode 100644 index 0000000..0c40efe --- /dev/null +++ b/components/AddToCart.js @@ -0,0 +1,39 @@ +import { Component } from 'react'; +import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY } from '../queries'; +import { graphql, compose } from 'react-apollo'; + +class AddToCart extends Component { + componentDidMount() { + this.props.currentUserQuery.refetch(); + } + + addToCart = async () => { + const res = await this.props.addToCart({ + variables: { + userId: this.props.currentUserQuery.user.id, + itemId: this.props.id, + } + }); + this.props.currentUserQuery.refetch(); + console.log(res) + } + render() { + const user = this.props.currentUserQuery.user; + if (!user) return <p>Loading...</p>; + const cartIds = user.cart.map(item => item.id); + return ( + <div> + + { + cartIds.includes(this.props.id) + ? <button>Added to cart ✅</button> + : <button onClick={this.addToCart}>Add To Cart 👜</button> + } + </div> + ) + } +} + +const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' }); +const createOrderEnhancer = graphql(ADD_TO_CART_MUTATION, { name: 'addToCart' }); +export default compose(userEnhancer, createOrderEnhancer)(AddToCart); |
