summaryrefslogtreecommitdiffstats
path: root/frontend/components/Nav.js
blob: 718884ac57e8cb1f235d5b2e36f10e4176c628e3 (plain)
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
import React, { Fragment } from 'react';
import Link from 'next/link';
import { Query, ApolloConsumer } from 'react-apollo';
import { CURRENT_USER_QUERY } from '../queries/queries';
import CartCount from './CartCount';
import Signout from './Signout';

import NavStyles from './styles/NavStyles';

class Nav extends React.Component {
  render() {
    return (
      <Query query={CURRENT_USER_QUERY}>
        {({ data: { me } }) => (
          <NavStyles data-test="nav">
            <Link href="/items">
              <a>Shop</a>
            </Link>
            <Link href="/add">
              <a>Sell</a>
            </Link>

            {!me && (
              <Link href="/signup">
                <a>Sign In</a>
              </Link>
            )}

            {me && (
              <Fragment>
                <Link href="/orders">
                  <a>Orders</a>
                </Link>
                <Link href="/me">
                  <a>My Account</a>
                </Link>
                <Signout />
                <ApolloConsumer>
                  {cache => (
                    <button onClick={() => cache.writeData({ data: { cartOpen: true } })}>
                      My Cart
                      <CartCount
                        className="cart-count"
                        count={me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0)}
                      />
                    </button>
                  )}
                </ApolloConsumer>
              </Fragment>
            )}
          </NavStyles>
        )}
      </Query>
    );
  }
}

export default Nav;