diff options
Diffstat (limited to 'components/Items.js')
| -rw-r--r-- | components/Items.js | 97 |
1 files changed, 0 insertions, 97 deletions
diff --git a/components/Items.js b/components/Items.js deleted file mode 100644 index 053c9af..0000000 --- a/components/Items.js +++ /dev/null @@ -1,97 +0,0 @@ -import { Component } from 'react'; -import { withApollo, graphql, compose } from 'react-apollo'; -import styled from 'styled-components'; -import Pagination from './Pagination'; -import Item from './Item'; - -import { ALL_ITEMS_QUERY, DELETE_ITEM_MUTATION } from '../queries'; - -const Title = styled.h1`font-size: 10px;`; - -const Items = styled.div` - display: grid; - grid-template-columns: repeat(4, calc(33% - 20px)); - grid-gap: 20px; -`; - -class ItemList extends Component { - componentDidMount() { - this.prefetchNextItems(this.props.page); - } - - componentWillReceiveProps(nextProps) { - // update the next items if the page prop changed - if (this.props.page !== nextProps.page) { - this.prefetchNextItems(nextProps.page); - } - } - - prefetchNextItems = currentPage => { - const page = currentPage + 1; - console.log(`Prefetching Next items! Page ${page}`); - this.props.client.query({ - query: ALL_ITEMS_QUERY, - variables: { - skip: page * 3 - 3, - }, - }); - }; - - render() { - // 1 - if (this.props.allItemsQuery && this.props.allItemsQuery.loading) { - return <div>Loading</div>; - } - - // 2 - if (this.props.allItemsQuery && this.props.allItemsQuery.error) { - console.log(this.props.allItemsQuery.error); - return <div>Error</div>; - } - - // 3 - const itemsToRender = this.props.allItemsQuery.allItems; - - return ( - <div> - <Pagination page={this.props.page} /> - <Title>Items For Sale</Title> - <Items key={this.props.page}>{itemsToRender.map((item, i) => <Item key={item.id} item={item} />)}</Items> - </div> - ); - } -} - -// 1 - -// We export the graphQL HOC - this will fetch the data and inject it into the ItemList compeont via props - -// Create some Enhancers -const itemEnhancer = graphql(ALL_ITEMS_QUERY, { - name: 'allItemsQuery', - options({ page }) { - return { - variables: { - skip: page * 3 - 3, - }, - }; - }, -}); - -const deleteItemEnhancer = graphql(DELETE_ITEM_MUTATION, { - name: 'removeItemMutation', - options: { - update: (proxy, { data: { deleteItem } }) => { - // grab the data from our cache - const data = proxy.readQuery({ query: ALL_ITEMS_QUERY }); - - // filter out the deleted item - data.allItems = data.allItems.filter(item => item.id !== deleteItem.id); - - // and then "set state" (update cache), so it will update wherever we have used this data on the page - proxy.writeQuery({ query: ALL_ITEMS_QUERY, data }); - }, - }, -}); - -export default withApollo(compose(itemEnhancer, deleteItemEnhancer)(ItemList)); |
