summaryrefslogtreecommitdiffstats
path: root/finished-application/frontend/components/Items.js
diff options
context:
space:
mode:
authorWes Bos <wesbos@gmail.com>2018-09-13 14:18:56 -0400
committerWes Bos <wesbos@gmail.com>2018-09-13 14:18:56 -0400
commit8a5825d52271d712ec7c8348447d433067e13ef2 (patch)
treeba07c218c1b2d4e59c154f2059b69fd858ae65fe /finished-application/frontend/components/Items.js
parentb0d25a9ad3cc1df2fcc11ddb84e4603b94520b09 (diff)
DONE
Diffstat (limited to 'finished-application/frontend/components/Items.js')
-rw-r--r--finished-application/frontend/components/Items.js74
1 files changed, 0 insertions, 74 deletions
diff --git a/finished-application/frontend/components/Items.js b/finished-application/frontend/components/Items.js
deleted file mode 100644
index 5694d0b..0000000
--- a/finished-application/frontend/components/Items.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { Query } from 'react-apollo';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import Pagination from './Pagination';
-import Item from './Item';
-import LoadingItem from './LoadingItem';
-import { perPage } from '../config';
-
-const ALL_ITEMS_QUERY = gql`
- query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = ${perPage}) {
- items(orderBy: createdAt_DESC, first: $first, skip: $skip) {
- __typename
- id
- title
- price
- description
- image
- largeImage
- }
- }
-`;
-
-const Items = styled.div`
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-gap: 60px;
- max-width: ${props => props.theme.maxWidth};
- margin: 0 auto;
-`;
-
-const Center = styled.div`
- text-align: center;
-`;
-
-class ItemList extends React.Component {
- static propTypes = {
- page: PropTypes.number.isRequired,
- };
- render() {
- return (
- <Center key={this.props.page}>
- <Pagination page={this.props.page} />
- <Query
- query={ALL_ITEMS_QUERY}
- variables={{
- skip: this.props.page * perPage - perPage,
- first: perPage,
- }}
- // fetchPolicy="network-only"
- >
- {({ data, error, loading }) => {
- if (loading) {
- return (
- <Items>
- {Array.from({ length: 4 })
- .map((x, id) => ({ id }))
- .map(x => <LoadingItem key={x.id} />)}
- </Items>
- );
- }
- if (error) return <div>Error</div>;
- return <Items>{data.items.map(item => <Item key={item.id} item={item} />)}</Items>;
- }}
- </Query>
- <Pagination page={this.props.page} />
- </Center>
- );
- }
-}
-
-export default ItemList;
-export { ALL_ITEMS_QUERY };