From b1600adec47a04f60e1da07d94a3ed3906ff5aee Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 14 Jun 2018 16:44:21 -0400 Subject: starter files --- .../frontend/components/Pagination.js | 97 ++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 finished-application/frontend/components/Pagination.js (limited to 'finished-application/frontend/components/Pagination.js') diff --git a/finished-application/frontend/components/Pagination.js b/finished-application/frontend/components/Pagination.js new file mode 100644 index 0000000..b77f8f6 --- /dev/null +++ b/finished-application/frontend/components/Pagination.js @@ -0,0 +1,97 @@ +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'; + +const PAGINATION_QUERY = gql` + query itemsConnection($skip: Int = 0, $first: Int = 4) { + itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) { + aggregate { + count + } + } + } +`; + +const PaginationStyles = styled.div` + text-align: center; + display: inline-grid; + grid-template-columns: repeat(4, auto); + align-items: stretch; + justify-content: center; + align-content: center; + margin: 2rem 0; + border: 1px solid ${props => props.theme.lightgrey}; + border-radius: 10px; + & > * { + margin: 0; + padding: 15px 30px; + border-right: 1px solid ${props => props.theme.lightgrey}; + &:last-child { + border-right: 0; + } + } + a[aria-disabled='true'] { + color: grey; + pointer-events: none; + } +`; + +const Pagination = props => ( + + {({ data, loading, error }) => { + if (loading || error) return null; + const { aggregate } = data.itemsConnection; + const { page } = props; + const pages = Math.ceil(aggregate.count / perPage); + return ( + + + + Sick Fits! — Page {page} of {pages} + + + + + ←Prev + + +

+ Page {page} of {pages} +

+

+ {aggregate.count} Items Total +

+ + = pages}> + Next → + + + + ); + }} + +); + +Pagination.propTypes = { + page: PropTypes.number.isRequired, +}; + +export default Pagination; +export { PAGINATION_QUERY }; -- cgit v1.3