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
|
import React from 'react';
import { Mutation, Query } from 'react-apollo';
import { adopt } from 'react-adopt';
import TakeMyMoney from './TakeMyMoney';
import formatMoney from '../lib/formatMoney';
import CartItem from './CartItem';
import {
CURRENT_USER_QUERY,
LOCAL_STATE_QUERY,
TOGGLE_CART_MUTATION,
} from '../queries/queries.graphql';
import calcTotalPrice from '../lib/calcTotalPrice';
import Error from './ErrorMessage';
import CartStyles from './styles/CartStyles';
import Supreme from './styles/Supreme';
import CloseButton from './styles/CloseButton';
import SickButton from './styles/SickButton';
const Composed = adopt({
toggleCart: ({ render }) => (
<Mutation mutation={TOGGLE_CART_MUTATION}>
{(mutate, result) => render({ mutate, result })}
</Mutation>
),
localState: <Query query={LOCAL_STATE_QUERY} />,
currentUser: <Query query={CURRENT_USER_QUERY} data-test="cart" />,
});
const Cart = () => (
<Composed>
{({ toggleCart, localState, currentUser }) => {
const {
data: { me },
error,
loading,
} = currentUser;
if (loading) return <p>Loading...</p>;
if (error) return <Error error={error} />;
if (!me) return null;
return (
<CartStyles open={localState.data.cartOpen}>
<header>
<CloseButton title="close" onClick={toggleCart}>
×
</CloseButton>
<Supreme>{me.name}'s Cart.</Supreme>
<p>
You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in
your cart.
</p>
</header>
<ul>
{me.cart.map(cartItem => (
<CartItem key={cartItem.id} cartItem={cartItem} />
))}
</ul>
<footer>
<p>{formatMoney(calcTotalPrice(me.cart))}</p>
<TakeMyMoney>
<SickButton>Checkout</SickButton>
</TakeMyMoney>
</footer>
</CartStyles>
);
}}
</Composed>
);
export default Cart;
|
