From 46a0ba30ef54a7e36206481a4f5b2bf1f9702fca Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Mon, 12 Mar 2018 14:06:25 -0400
Subject: wip

---
 frontend/components/Pagination.js | 76 +++++++++++++++++++++++++++------------
 1 file changed, 54 insertions(+), 22 deletions(-)

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

diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index d00778b..dab7084 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -1,36 +1,68 @@
 import React from 'react';
 import { compose } from 'react-apollo';
-import { Link } from '../routes';
+import styled from 'styled-components';
+import Link from 'next/link';
 import { itemEnhancer } from '../enhancers/enhancers';
+import { perPage } from '../config';
+
+const PaginationStyles = styled.div`
+  text-align: center;
+  display: inline-grid;
+  grid-template-columns: repeat(4, auto);
+  align-items: stretch;
+  justify-content: center;
+  align-content: center;
+  margin: 2rem 0;
+  border: 1px solid ${props => props.theme.lightgrey};
+  border-radius: 10px;
+  & > * {
+    margin: 0;
+    padding: 15px 30px;
+    border-right: 1px solid ${props => props.theme.lightgrey};
+    &:last-child {
+      border-right: 0;
+    }
+  }
+  a[aria-disabled='true'] {
+    color: grey;
+    pointer-events: none;
+  }
+`;
 
 const Pagination = props => {
   if (props.loading) return <p>Loading Item...</p>;
   const { aggregate, pageInfo } = props.itemsQuery.itemsConnection;
-
   const { page } = props;
-  const pages = Math.floor(aggregate.count / 3);
+
+  const pages = Math.ceil(aggregate.count / perPage);
+  console.log({ pageInfo });
   return (
-    <div>
+    <PaginationStyles>
+      <Link
+        prefetch
+        href={{
+          pathname: 'items',
+          query: { page: page - 1 },
+        }}
+      >
+        <a aria-disabled={page <= 1}>←Prev</a>
+      </Link>
       <p>
-        Page <strong>{page} </strong>
-        of
-        <strong>{pages} </strong>
-        -
-        <strong>{aggregate.count} </strong>
-        total
+        Page <strong>{page} </strong> of <strong>{pages} </strong>
       </p>
-      {pageInfo.hasPreviousPage ? (
-        <Link prefetch route="items" params={{ page: page - 1 }}>
-          <a>←Prev</a>
-        </Link>
-      ) : null}
-
-      {pageInfo.hasNextPage ? (
-        <Link prefetch route="items" params={{ page: page + 1 }}>
-          <a>Next →</a>
-        </Link>
-      ) : null}
-    </div>
+      <p>
+        <strong>{aggregate.count}</strong> Items Total
+      </p>
+      <Link
+        prefetch
+        href={{
+          pathname: 'items',
+          query: { page: page + 1 },
+        }}
+      >
+        <a aria-disabled={page >= pages}>Next →</a>
+      </Link>
+    </PaginationStyles>
   );
 };
 
-- 
cgit v1.3