From 1450e579c67e3d969cb099dfe6c1cefd1e313fb5 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 15 Sep 2017 14:26:13 -0400
Subject: yep

---
 components/Pagination.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 components/Pagination.js

(limited to 'components/Pagination.js')

diff --git a/components/Pagination.js b/components/Pagination.js
new file mode 100644
index 0000000..1b75ed8
--- /dev/null
+++ b/components/Pagination.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import { graphql, gql, compose } from 'react-apollo'
+import { ALL_ITEMS_QUERY } from '../queries';
+import withData from '../lib/withData';
+import Link from 'next/link'
+
+class Pagination extends Component {
+  render() {
+    const { loading, error } = this.props.allItemsQuery;
+
+    if(loading) return <p>Loading Item...</p>
+
+    const meta = this.props.allItemsQuery._allItemsMeta;
+    const { page } = this.props;
+    const pages = Math.floor(meta.count / 3);
+    return (
+      <div>
+        <p>
+          Page <strong>{page} </strong>
+          of
+          <strong>{pages} </strong>
+           -
+          <strong>{meta.count} </strong>
+           total
+          </p>
+
+        { page > 1
+          ? <Link prefetch href={{ pathname: 'items', query: { page: page - 1 }}}><a>←Prev</a></Link>
+          : null
+        }
+
+        {
+          page <= pages
+          ? <Link prefetch href={{ pathname: 'items', query: { page: page + 1 }}}><a>Next →</a></Link>
+          : null
+        }
+
+      </div>
+    )
+  }
+}
+
+const ComponentWithMutations = compose(
+  graphql(ALL_ITEMS_QUERY, { name: 'allItemsQuery' })
+)(Pagination);
+
+export default ComponentWithMutations;
-- 
cgit v1.3