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 => ( {({ 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 };