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
|
import { Component } from 'react';
import { graphql, compose } from 'react-apollo';
import Transition from 'react-transition-group/Transition';
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;
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 = {
currentUser: PropTypes.object,
};
componentDidMount() {
this.props.currentUser.refetch();
}
handleAddToCart = async () => {
console.log(`Gonna add this item to the cart! ${this.props.id}`);
const res = await this.props.addToCart({
variables: {
id: this.props.id,
},
});
console.log({ realResponse: res });
this.props.currentUser.refetch();
};
render() {
return <button onClick={this.handleAddToCart}>🛒 Add To Cart</button>;
}
}
const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, {
name: 'singleItemQuery',
options: ({ id }) => ({
variables: {
id,
},
}),
});
export default compose(userEnhancer, addtoCartEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart);
|
