summaryrefslogtreecommitdiffstats
path: root/components/AddToCart.js
diff options
context:
space:
mode:
authorWes Bos <wesbos@gmail.com>2018-01-30 12:41:01 -0500
committerWes Bos <wesbos@gmail.com>2018-01-30 12:41:01 -0500
commitcd0b07b3adb36fb5ec098f9e511ab45d774fee7b (patch)
treea203e5010219ccea1acc6bbd2c0a4bcfa0a78615 /components/AddToCart.js
parent0a1648bf47490b312169c531aeb51ef4725e8d2e (diff)
Move to Prisma Backend
Diffstat (limited to 'components/AddToCart.js')
-rw-r--r--components/AddToCart.js100
1 files changed, 0 insertions, 100 deletions
diff --git a/components/AddToCart.js b/components/AddToCart.js
deleted file mode 100644
index e46a1f5..0000000
--- a/components/AddToCart.js
+++ /dev/null
@@ -1,100 +0,0 @@
-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';
-
-const JumpImg = styled.img`
- border: 0 solid black;
- max-width: 100px;
- transition: all 0.5s;
- position: fixed;
- left: ${props => props.x}px;
- top: -100%;
- &.jump-entered {
- border-color: green;
- transform-origin: 0 0;
- transform: scale(0);
- top: ${props => props.y}px;
- left: ${props => props.x}px;
- }
- &.jump-entering {
- border-color: yellow;
- top: ${props => props.y}px;
- left: ${props => props.x}px;
- }
- &.jump-exited {
- border-color: red;
- }
- &.jump-exiting {
- border-color: yellow;
- }
-`;
-
-class AddToCart extends Component {
- static propTypes = {
- currentUserQuery: PropTypes.object,
- };
-
- 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);
- };
-
- removeFromCart = async () => {
- const res = await this.props.removeFromCart({
- 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;
- // 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>
- );
- }
-}
-
-const createOrderEnhancer = graphql(ADD_TO_CART_MUTATION, { name: 'addToCart' });
-const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, {
- name: 'singleItemQuery',
- options: ({ id }) => ({
- variables: {
- id,
- },
- }),
-});
-export default compose(userEnhancer, createOrderEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart);