summaryrefslogtreecommitdiffstats
path: root/components/Pagination.js
diff options
context:
space:
mode:
Diffstat (limited to 'components/Pagination.js')
-rw-r--r--components/Pagination.js70
1 files changed, 33 insertions, 37 deletions
diff --git a/components/Pagination.js b/components/Pagination.js
index 1b75ed8..fa42e35 100644
--- a/components/Pagination.js
+++ b/components/Pagination.js
@@ -1,47 +1,43 @@
-import React, { Component } from 'react'
-import { graphql, gql, compose } from 'react-apollo'
+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'
+import { Link } from '../routes';
-class Pagination extends Component {
- render() {
- const { loading, error } = this.props.allItemsQuery;
+const Pagination = props => {
+ const { loading, error } = props.allItemsQuery;
- if(loading) return <p>Loading Item...</p>
+ 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>
+ const meta = props.allItemsQuery._allItemsMeta;
+ const { page } = 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 > 1 ? (
+ <Link prefetch route="items" params={{ page: page - 1 }}>
+ <a>←Prev</a>
+ </Link>
+ ) : null}
- {
- page <= pages
- ? <Link prefetch href={{ pathname: 'items', query: { page: page + 1 }}}><a>Next →</a></Link>
- : null
- }
+ {page <= pages ? (
+ <Link prefetch route="items" params={{ page: page + 1 }}>
+ <a>Next →</a>
+ </Link>
+ ) : null}
+ </div>
+ );
+};
- </div>
- )
- }
-}
-
-const ComponentWithMutations = compose(
- graphql(ALL_ITEMS_QUERY, { name: 'allItemsQuery' })
-)(Pagination);
+const ComponentWithMutations = compose(graphql(ALL_ITEMS_QUERY, { name: 'allItemsQuery' }))(Pagination);
export default ComponentWithMutations;