diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-09-14 12:18:12 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-09-14 12:18:12 -0400 |
| commit | 2d145b026cfdf54a63bef0b9d6324b6785390307 (patch) | |
| tree | f6c1d8f987437803a5c026e70535bf9ff244e885 /finished-application/frontend/components/Pagination.js | |
| parent | 8a5825d52271d712ec7c8348447d433067e13ef2 (diff) | |
move finished folder
Diffstat (limited to 'finished-application/frontend/components/Pagination.js')
| -rw-r--r-- | finished-application/frontend/components/Pagination.js | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/finished-application/frontend/components/Pagination.js b/finished-application/frontend/components/Pagination.js new file mode 100644 index 0000000..b84af76 --- /dev/null +++ b/finished-application/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 }; |