diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-09-10 14:29:32 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-09-10 14:29:32 -0400 |
| commit | b0d25a9ad3cc1df2fcc11ddb84e4603b94520b09 (patch) | |
| tree | af1fa8c77e099f52a7fbce3a6ff3e11dec9f24df /stepped-solutions/62/frontend/components | |
| parent | 093c172d16732ba8d01faa313e0af99d26902205 (diff) | |
almost done
Diffstat (limited to 'stepped-solutions/62/frontend/components')
| -rwxr-xr-x | stepped-solutions/62/frontend/components/Nav.js | 49 | ||||
| -rwxr-xr-x | stepped-solutions/62/frontend/components/Pagination.js | 67 |
2 files changed, 116 insertions, 0 deletions
diff --git a/stepped-solutions/62/frontend/components/Nav.js b/stepped-solutions/62/frontend/components/Nav.js new file mode 100755 index 0000000..118db5a --- /dev/null +++ b/stepped-solutions/62/frontend/components/Nav.js @@ -0,0 +1,49 @@ +import Link from 'next/link'; +import { Mutation } from 'react-apollo'; +import { TOGGLE_CART_MUTATION } from './Cart'; +import NavStyles from './styles/NavStyles'; +import User from './User'; +import CartCount from './CartCount'; +import Signout from './Signout'; + +const Nav = () => ( + <User> + {({ data: { me } }) => ( + <NavStyles data-test="nav"> + <Link href="/items"> + <a>Shop</a> + </Link> + {me && ( + <> + <Link href="/sell"> + <a>Sell</a> + </Link> + <Link href="/orders"> + <a>Orders</a> + </Link> + <Link href="/me"> + <a>Account</a> + </Link> + <Signout /> + <Mutation mutation={TOGGLE_CART_MUTATION}> + {(toggleCart) => ( + <button onClick={toggleCart}> + My Cart + <CartCount count={me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0)}></CartCount> + </button> + )} + </Mutation> + </> + )} + {!me && ( + <Link href="/signup"> + <a>Sign In</a> + </Link> + + )} + </NavStyles> + )} + </User> +); + +export default Nav; diff --git a/stepped-solutions/62/frontend/components/Pagination.js b/stepped-solutions/62/frontend/components/Pagination.js new file mode 100755 index 0000000..b84af76 --- /dev/null +++ b/stepped-solutions/62/frontend/components/Pagination.js @@ -0,0 +1,67 @@ +import React from 'react'; +import gql from 'graphql-tag'; +import { Query } from 'react-apollo'; +import Head from 'next/head'; +import Link from 'next/link'; +import PaginationStyles from './styles/PaginationStyles'; +import { perPage } from '../config'; + +const PAGINATION_QUERY = gql` + query PAGINATION_QUERY { + itemsConnection { + aggregate { + count + } + } + } +`; + +const Pagination = props => ( + <Query query={PAGINATION_QUERY}> + {({ data, loading, error }) => { + if (loading) return <p>Loading...</p>; + const count = data.itemsConnection.aggregate.count; + const pages = Math.ceil(count / perPage); + const page = props.page; + return ( + <PaginationStyles data-test="pagination"> + <Head> + <title> + Sick Fits! — Page {page} of {pages} + </title> + </Head> + <Link + prefetch + href={{ + pathname: 'items', + query: { page: page - 1 }, + }} + > + <a className="prev" aria-disabled={page <= 1}> + ← Prev + </a> + </Link> + <p> + Page {props.page} of + <span className="totalPages">{pages}</span>! + </p> + <p>{count} Items Total</p> + <Link + prefetch + href={{ + pathname: 'items', + query: { page: page + 1 }, + }} + > + <a className="next" aria-disabled={page >= pages}> + Next → + </a> + </Link> + </PaginationStyles> + ); + }} + </Query> +); + +export default Pagination; +export { PAGINATION_QUERY }; |