1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
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';
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 {
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;
if (!user) 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();
console.log({ x, y });
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);
|
