diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-09-13 14:18:56 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-09-13 14:18:56 -0400 |
| commit | 8a5825d52271d712ec7c8348447d433067e13ef2 (patch) | |
| tree | ba07c218c1b2d4e59c154f2059b69fd858ae65fe /finished-application/frontend/components/Pagination.js | |
| parent | b0d25a9ad3cc1df2fcc11ddb84e4603b94520b09 (diff) | |
DONE
Diffstat (limited to 'finished-application/frontend/components/Pagination.js')
| -rw-r--r-- | finished-application/frontend/components/Pagination.js | 76 |
1 files changed, 0 insertions, 76 deletions
diff --git a/finished-application/frontend/components/Pagination.js b/finished-application/frontend/components/Pagination.js deleted file mode 100644 index f684840..0000000 --- a/finished-application/frontend/components/Pagination.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { Query } from 'react-apollo'; -import styled from 'styled-components'; -import Link from 'next/link'; -import PropTypes from 'prop-types'; -import gql from 'graphql-tag'; -import Head from 'next/head'; -import { perPage } from '../config'; -import PaginationStyles from './styles/PaginationStyles'; - - - -const PAGINATION_QUERY = gql` - query itemsConnection($skip: Int = 0, $first: Int = 4) { - itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) { - aggregate { - count - } - } - } -`; - -const Pagination = props => ( - <Query query={PAGINATION_QUERY}> - {({ data, loading, error }) => { - if (loading || error) return null; - const { aggregate } = data.itemsConnection; - const { page } = props; - const pages = Math.ceil(aggregate.count / perPage); - 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 <strong>{page} </strong> of <strong className="totalPages">{pages}</strong> - </p> - <p> - <strong>{aggregate.count}</strong> Items Total - </p> - <Link - prefetch - href={{ - pathname: 'items', - query: { page: page + 1 }, - }} - > - <a className="next" aria-disabled={page >= pages}> - Next → - </a> - </Link> - </PaginationStyles> - ); - }} - </Query> -); - -Pagination.propTypes = { - page: PropTypes.number.isRequired, -}; - -export default Pagination; -export { PAGINATION_QUERY }; |