From 6daab5e176382954d2229d8a9251ae819572a29e Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Wed, 11 Jul 2018 14:57:57 -0400 Subject: more stepped --- .../24/frontend/components/Pagination.js | 65 ++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100755 stepped-solutions/24/frontend/components/Pagination.js (limited to 'stepped-solutions/24/frontend/components/Pagination.js') diff --git a/stepped-solutions/24/frontend/components/Pagination.js b/stepped-solutions/24/frontend/components/Pagination.js new file mode 100755 index 0000000..639f0d5 --- /dev/null +++ b/stepped-solutions/24/frontend/components/Pagination.js @@ -0,0 +1,65 @@ +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 => ( + + {({ data, loading, error }) => { + if (loading) return

Loading...

; + const count = data.itemsConnection.aggregate.count; + const pages = Math.ceil(count / perPage); + const page = props.page; + return ( + + + + Sick Fits! — Page {page} of {pages} + + + + + ← Prev + + +

+ Page {props.page} of {pages}! +

+

{count} Items Total

+ + = pages}> + Next → + + + + ); + }} + +); + +export default Pagination; -- cgit v1.3