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 };