From 22635ea05dab85a71fa93dbb98f93da7670ef899 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Fri, 25 May 2018 14:06:53 -0400 Subject: Delete and Add refetch refinements --- frontend/components/CreateItem.js | 10 +++++++++- frontend/components/DeleteItem.js | 21 ++++++++++++++++++--- frontend/components/Items.js | 2 +- frontend/components/Order.js | 3 +++ frontend/components/Pagination.js | 6 ++++++ frontend/components/RemoveFromCart.js | 2 +- frontend/components/SingleItem.js | 6 +++++- frontend/components/styles/ItemStyles.js | 12 ++++++------ 8 files changed, 49 insertions(+), 13 deletions(-) (limited to 'frontend/components') diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js index fc3dcb2..fbe9083 100644 --- a/frontend/components/CreateItem.js +++ b/frontend/components/CreateItem.js @@ -1,10 +1,12 @@ import React, { Component } from 'react'; import { Mutation } from 'react-apollo'; import Router from 'next/router'; +import wait from 'waait'; import gql from 'graphql-tag'; import Error from './ErrorMessage'; import Form from './styles/Form'; import formatMoney from '../lib/formatMoney'; +import { ALL_ITEMS_QUERY } from './Items'; const CREATE_ITEM_MUTATION = gql` mutation CREATE_ITEM_MUTATION( @@ -63,13 +65,19 @@ class CreateItem extends Component { render() { return ( - + {(createItem, { loading, error }) => (
{ e.preventDefault(); const { data: { createItem: item } } = await createItem(); + // we wait 0 ms so it puts the router push at the end of the call stack. This ensures that refetchQueries runs before we unmount the component :) + await wait(); Router.push({ pathname: `/item`, query: { id: item.id }, diff --git a/frontend/components/DeleteItem.js b/frontend/components/DeleteItem.js index 9b09378..21f559c 100644 --- a/frontend/components/DeleteItem.js +++ b/frontend/components/DeleteItem.js @@ -2,7 +2,9 @@ import React from 'react'; import { Mutation } from 'react-apollo'; import PropTypes from 'prop-types'; import gql from 'graphql-tag'; +import { withRouter } from 'next/router'; import { ALL_ITEMS_QUERY } from './Items'; +import { perPage } from '../config'; const DELETE_ITEM_MUTATION = gql` mutation deleteItem($id: ID!) { @@ -21,18 +23,31 @@ class DeleteItem extends React.Component { update = (cache, payload) => { const deletedItem = payload.data.deleteItem; - const data = cache.readQuery({ query: ALL_ITEMS_QUERY }); + const { page = 1 } = this.props.router.query; + const skip = page * perPage - perPage; + const variables = { skip }; + // TODO Expose Page Number here + const data = cache.readQuery({ query: ALL_ITEMS_QUERY, variables }); + console.log(data.items); // filter this one out data.items = data.items.filter(item => item.id !== deletedItem.id); // write the data back to the cache - cache.writeQuery({ query: ALL_ITEMS_QUERY, data }); + console.log(data.items); + cache.writeQuery({ query: ALL_ITEMS_QUERY, data, variables }); }; render() { + console.log(this.props.router.query); return ( {(removeItem, { error }) => ( @@ -51,5 +66,5 @@ class DeleteItem extends React.Component { } } -export default DeleteItem; +export default withRouter(DeleteItem); export { DELETE_ITEM_MUTATION }; diff --git a/frontend/components/Items.js b/frontend/components/Items.js index 394f16d..5694d0b 100644 --- a/frontend/components/Items.js +++ b/frontend/components/Items.js @@ -9,7 +9,7 @@ import LoadingItem from './LoadingItem'; import { perPage } from '../config'; const ALL_ITEMS_QUERY = gql` - query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = 4) { + query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = ${perPage}) { items(orderBy: createdAt_DESC, first: $first, skip: $skip) { __typename id diff --git a/frontend/components/Order.js b/frontend/components/Order.js index 6411abe..b4a0a0e 100644 --- a/frontend/components/Order.js +++ b/frontend/components/Order.js @@ -15,6 +15,9 @@ const SINGLE_ORDER_QUERY = gql` charge total createdAt + user { + id + } items { id title diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js index 8b25e06..b77f8f6 100644 --- a/frontend/components/Pagination.js +++ b/frontend/components/Pagination.js @@ -4,6 +4,7 @@ import styled from 'styled-components'; import Link from 'next/link'; import PropTypes from 'prop-types'; import gql from 'graphql-tag'; +import Head from 'next/head'; import { perPage } from '../config'; const PAGINATION_QUERY = gql` @@ -49,6 +50,11 @@ const Pagination = props => ( const pages = Math.ceil(aggregate.count / perPage); return ( + + + Sick Fits! — Page {page} of {pages} + + {(removeFromCart, { loading }) => ( - + removeFromCart}> × )} diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js index d543ad1..83ef8a0 100644 --- a/frontend/components/SingleItem.js +++ b/frontend/components/SingleItem.js @@ -1,6 +1,7 @@ import { Query } from 'react-apollo'; import PropTypes from 'prop-types'; import styled from 'styled-components'; +import Head from 'next/head'; import Link from 'next/link'; import gql from 'graphql-tag'; import Error from './ErrorMessage'; @@ -29,7 +30,7 @@ const SingleItemStyles = styled.div` img { width: 100%; height: 100%; - object-fit: cover; + object-fit: contain; } .details { margin: 3rem; @@ -45,6 +46,9 @@ const SingleItem = props => ( const [item] = data.items; return ( + + {item.title} + {item.title}

Viewing {item.title}

diff --git a/frontend/components/styles/ItemStyles.js b/frontend/components/styles/ItemStyles.js index 8ae0836..b117d5f 100644 --- a/frontend/components/styles/ItemStyles.js +++ b/frontend/components/styles/ItemStyles.js @@ -5,28 +5,28 @@ const Item = styled.div` border: 1px solid ${props => props.theme.offWhite}; box-shadow: ${props => props.theme.bs}; position: relative; - display: grid; - align-content: start; - grid-auto-rows: fit-content; + display: flex; + flex-direction: column; img { width: 100%; height: 400px; object-fit: cover; } p { - font-size: 14px; + font-size: 12px; line-height: 2; - font-weight: 600; + font-weight: 300; + flex-grow: 1; padding: 0 3rem; font-size: 1.5rem; } .buttonList { display: grid; + width: 100%; border-top: 1px solid ${props => props.theme.lightgrey}; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 1px; background: ${props => props.theme.lightgrey}; - align-self: end; & > * { background: white; border: 0; -- cgit v1.3