1 files changed, 13 insertions, 22 deletions
diff --git a/finished-application/frontend/components/Pagination.js b/finished-application/frontend/components/Pagination.js
index f684840..b84af76 100644
--- a/finished-application/frontend/components/Pagination.js
+++ b/finished-application/frontend/components/Pagination.js
@@ -1,18 +1,14 @@
 import React from 'react';
-import { Query } from 'react-apollo';
-import styled from 'styled-components';
-import Link from 'next/link';
-import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
+import { Query } from 'react-apollo';
 import Head from 'next/head';
-import { perPage } from '../config';
+import Link from 'next/link';
 import PaginationStyles from './styles/PaginationStyles';
-
-
+import { perPage } from '../config';
 
 const PAGINATION_QUERY = gql`
-  query itemsConnection($skip: Int = 0, $first: Int = 4) {
-    itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+  query PAGINATION_QUERY {
+    itemsConnection {
       aggregate {
         count
       }
@@ -23,10 +19,10 @@ const PAGINATION_QUERY = gql`
 const Pagination = props => (
   <Query query={PAGINATION_QUERY}>
     {({ data, loading, error }) => {
-      if (loading || error) return null;
-      const { aggregate } = data.itemsConnection;
-      const { page } = props;
-      const pages = Math.ceil(aggregate.count / perPage);
+      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>
@@ -42,15 +38,14 @@ const Pagination = props => (
             }}
           >
             <a className="prev" aria-disabled={page <= 1}>
-              ←Prev
+              ← Prev
             </a>
           </Link>
           <p>
-            Page <strong>{page} </strong> of <strong className="totalPages">{pages}</strong>
-          </p>
-          <p>
-            <strong>{aggregate.count}</strong> Items Total
+            Page {props.page} of
+            <span className="totalPages">{pages}</span>!
           </p>
+          <p>{count} Items Total</p>
           <Link
             prefetch
             href={{
@@ -68,9 +63,5 @@ const Pagination = props => (
   </Query>
 );
 
-Pagination.propTypes = {
-  page: PropTypes.number.isRequired,
-};
-
 export default Pagination;
 export { PAGINATION_QUERY };