From a6af043686e4375d7944e91cae3d5b63c59edab0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 22 Mar 2018 16:29:31 -0400
Subject: Migrate to render props

---
 frontend/components/Pagination.js | 94 +++++++++++++++++++--------------------
 1 file changed, 45 insertions(+), 49 deletions(-)

(limited to 'frontend/components/Pagination.js')

diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index abc22d0..138e1b2 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import { compose } from 'react-apollo';
+import { compose, Query } from 'react-apollo';
 import styled from 'styled-components';
 import Link from 'next/link';
 import PropTypes from 'prop-types';
 import { itemEnhancer } from '../enhancers/enhancers';
 import { perPage } from '../config';
+import { ALL_ITEMS_QUERY } from '../queries/index';
 
 const PaginationStyles = styled.div`
   text-align: center;
@@ -30,56 +31,51 @@ const PaginationStyles = styled.div`
   }
 `;
 
-const Pagination = props => {
-  if (props.loading) return <p>Loading...</p>;
-  const { aggregate } = props.itemsQuery.itemsConnection;
-  const { page } = props;
-  const pages = Math.ceil(aggregate.count / perPage);
-
-  return (
-    <PaginationStyles>
-      <Link
-        prefetch
-        href={{
-          pathname: 'items',
-          query: { page: page - 1 },
-        }}
-      >
-        <a className="prev" aria-disabled={page <= 1}>
-          ←Prev
-        </a>
-      </Link>
-      <p>
-        Page <strong>{page} </strong> of <strong className="totalPages">{pages}</strong>
-      </p>
-      <p>
-        <strong>{aggregate.count}</strong> Items Total
-      </p>
-      <Link
-        prefetch
-        href={{
-          pathname: 'items',
-          query: { page: page + 1 },
-        }}
-      >
-        <a className="next" aria-disabled={page >= pages}>
-          Next →
-        </a>
-      </Link>
-    </PaginationStyles>
-  );
-};
+const Pagination = props => (
+  <Query query={ALL_ITEMS_QUERY}>
+    {({ data, loading, error }) => {
+      if (loading) return null;
+      const { aggregate } = data.itemsConnection;
+      const { page } = props;
+      const pages = Math.ceil(aggregate.count / perPage);
+      return (
+        <PaginationStyles>
+          <Link
+            prefetch
+            href={{
+              pathname: 'items',
+              query: { page: page - 1 },
+            }}
+          >
+            <a className="prev" aria-disabled={page <= 1}>
+              ←Prev
+            </a>
+          </Link>
+          <p>
+            Page <strong>{page} </strong> of <strong className="totalPages">{pages}</strong>
+          </p>
+          <p>
+            <strong>{aggregate.count}</strong> Items Total
+          </p>
+          <Link
+            prefetch
+            href={{
+              pathname: 'items',
+              query: { page: page + 1 },
+            }}
+          >
+            <a className="next" aria-disabled={page >= pages}>
+              Next →
+            </a>
+          </Link>
+        </PaginationStyles>
+      );
+    }}
+  </Query>
+);
 
 Pagination.propTypes = {
-  itemsQuery: PropTypes.shape({
-    itemsConnection: PropTypes.shape({
-      aggregate: PropTypes.shape({
-        count: PropTypes.number.isRequired,
-      }),
-    }),
-  }).isRequired,
   page: PropTypes.number.isRequired,
 };
 
-export default compose(itemEnhancer)(Pagination);
-export { Pagination };
+export default Pagination;
-- 
cgit v1.3