diff options
Diffstat (limited to 'finished-application/frontend')
3 files changed, 31 insertions, 25 deletions
diff --git a/finished-application/frontend/components/Nav.js b/finished-application/frontend/components/Nav.js index b483376..5f3495a 100644 --- a/finished-application/frontend/components/Nav.js +++ b/finished-application/frontend/components/Nav.js @@ -12,7 +12,7 @@ class Nav extends React.Component { // below we set the fetchPolicy to network only so it forces re-fetch on the server return ( <User> - {({ data: { me }, error }) => ( + {({ data: { me } }) => ( <NavStyles data-test="nav"> <Link href="/items"> <a>Shop</a> diff --git a/finished-application/frontend/components/Pagination.js b/finished-application/frontend/components/Pagination.js index b77f8f6..f684840 100644 --- a/finished-application/frontend/components/Pagination.js +++ b/finished-application/frontend/components/Pagination.js @@ -6,6 +6,9 @@ import PropTypes from 'prop-types'; import gql from 'graphql-tag'; import Head from 'next/head'; import { perPage } from '../config'; +import PaginationStyles from './styles/PaginationStyles'; + + const PAGINATION_QUERY = gql` query itemsConnection($skip: Int = 0, $first: Int = 4) { @@ -17,30 +20,6 @@ const PAGINATION_QUERY = gql` } `; -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 => ( <Query query={PAGINATION_QUERY}> {({ data, loading, error }) => { diff --git a/finished-application/frontend/components/styles/PaginationStyles.js b/finished-application/frontend/components/styles/PaginationStyles.js new file mode 100644 index 0000000..30753af --- /dev/null +++ b/finished-application/frontend/components/styles/PaginationStyles.js @@ -0,0 +1,27 @@ +import styled from 'styled-components'; + +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; + } +`; + +export default PaginationStyles; |