diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-07-11 14:57:57 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-07-11 14:57:57 -0400 |
| commit | 6daab5e176382954d2229d8a9251ae819572a29e (patch) | |
| tree | 63784ea2bb217ef6b6c04b1d549f8f6f8e648c5a /stepped-solutions/24/frontend | |
| parent | ff7fc88e36bb66a47327fa2c7e8513b222e539ef (diff) | |
more stepped
Diffstat (limited to 'stepped-solutions/24/frontend')
| -rwxr-xr-x | stepped-solutions/24/frontend/components/Items.js | 61 | ||||
| -rwxr-xr-x | stepped-solutions/24/frontend/components/Pagination.js | 65 | ||||
| -rwxr-xr-x | stepped-solutions/24/frontend/pages/index.js | 9 | ||||
| -rwxr-xr-x | stepped-solutions/24/frontend/pages/items.js | 3 |
4 files changed, 138 insertions, 0 deletions
diff --git a/stepped-solutions/24/frontend/components/Items.js b/stepped-solutions/24/frontend/components/Items.js new file mode 100755 index 0000000..9b5426c --- /dev/null +++ b/stepped-solutions/24/frontend/components/Items.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; +import { Query } from 'react-apollo'; +import gql from 'graphql-tag'; +import styled from 'styled-components'; +import Item from './Item'; +import Pagination from './Pagination'; +import { perPage } from '../config'; + +const ALL_ITEMS_QUERY = gql` + query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = ${perPage}) { + items(first: $first, skip: $skip, orderBy: createdAt_DESC) { + id + title + price + description + image + largeImage + } + } +`; + +const Center = styled.div` + text-align: center; +`; + +const ItemsList = styled.div` + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 60px; + max-width: ${props => props.theme.maxWidth}; + margin: 0 auto; +`; + +class Items extends Component { + render() { + return ( + <Center> + <Pagination page={this.props.page} /> + <Query + query={ALL_ITEMS_QUERY} + // fetchPolicy="network-only" + variables={{ + skip: this.props.page * perPage - perPage, + }} + > + {({ data, error, loading }) => { + if (loading) return <p>Loading...</p>; + if (error) return <p>Error: {error.message}</p>; + return ( + <ItemsList>{data.items.map(item => <Item item={item} key={item.id} />)}</ItemsList> + ); + }} + </Query> + <Pagination page={this.props.page} /> + </Center> + ); + } +} + +export default Items; +export { ALL_ITEMS_QUERY }; diff --git a/stepped-solutions/24/frontend/components/Pagination.js b/stepped-solutions/24/frontend/components/Pagination.js new file mode 100755 index 0000000..639f0d5 --- /dev/null +++ b/stepped-solutions/24/frontend/components/Pagination.js @@ -0,0 +1,65 @@ +import React from 'react'; +import gql from 'graphql-tag'; +import { Query } from 'react-apollo'; +import Head from 'next/head'; +import Link from 'next/link'; +import PaginationStyles from './styles/PaginationStyles'; +import { perPage } from '../config'; + +const PAGINATION_QUERY = gql` + query PAGINATION_QUERY { + itemsConnection { + aggregate { + count + } + } + } +`; + +const Pagination = props => ( + <Query query={PAGINATION_QUERY}> + {({ data, loading, error }) => { + if (loading) return <p>Loading...</p>; + const count = data.itemsConnection.aggregate.count; + const pages = Math.ceil(count / perPage); + const page = props.page; + return ( + <PaginationStyles> + <Head> + <title> + Sick Fits! — Page {page} of {pages} + </title> + </Head> + <Link + prefetch + href={{ + pathname: 'items', + query: { page: page - 1 }, + }} + > + <a className="prev" aria-disabled={page <= 1}> + ← Prev + </a> + </Link> + <p> + Page {props.page} of {pages}! + </p> + <p>{count} Items Total</p> + <Link + prefetch + href={{ + pathname: 'items', + query: { page: page + 1 }, + }} + > + <a className="prev" aria-disabled={page >= pages}> + Next → + </a> + </Link> + </PaginationStyles> + ); + }} + </Query> +); + +export default Pagination; diff --git a/stepped-solutions/24/frontend/pages/index.js b/stepped-solutions/24/frontend/pages/index.js new file mode 100755 index 0000000..edb45ab --- /dev/null +++ b/stepped-solutions/24/frontend/pages/index.js @@ -0,0 +1,9 @@ +import Items from '../components/Items'; + +const Home = props => ( + <div> + <Items page={parseFloat(props.query.page) || 1} /> + </div> +); + +export default Home; diff --git a/stepped-solutions/24/frontend/pages/items.js b/stepped-solutions/24/frontend/pages/items.js new file mode 100755 index 0000000..c95ff45 --- /dev/null +++ b/stepped-solutions/24/frontend/pages/items.js @@ -0,0 +1,3 @@ +import Items from './index'; + +export default Items; |