Delete and Add refetch refinements

8 files changed, 49 insertions, 13 deletions

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 (
-      <Mutation mutation={CREATE_ITEM_MUTATION} variables={this.state}>
+      <Mutation
+        mutation={CREATE_ITEM_MUTATION}
+        variables={this.state}
+        refetchQueries={[{ query: ALL_ITEMS_QUERY }]}
+      >
         {(createItem, { loading, error }) => (
           <Form
             data-test
             onSubmit={async e => {
               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 (
       <Mutation
         mutation={DELETE_ITEM_MUTATION}
         variables={{ id: this.props.id }}
+        refetchQueries={[
+          {
+            query: ALL_ITEMS_QUERY,
+            variables: { skip: this.props.router.query.page * perPage - perPage },
+          },
+        ]}
         update={this.update}
       >
         {(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 (
         <PaginationStyles data-test="pagination">
+          <Head>
+            <title>
+              Sick Fits! — Page {page} of {pages}
+            </title>
+          </Head>
           <Link
             prefetch
             href={{
diff --git a/frontend/components/RemoveFromCart.js b/frontend/components/RemoveFromCart.js
index cf5b6fd..d29cbf1 100644
--- a/frontend/components/RemoveFromCart.js
+++ b/frontend/components/RemoveFromCart.js
@@ -44,7 +44,7 @@ class RemoveFromCart extends Component {
         update={this.update}
       >
         {(removeFromCart, { loading }) => (
-          <BigButton disabled={loading} title="Remove From Cart" onClick={removeFromCart}>
+          <BigButton disabled={loading} title="Remove From Cart" onClick={() => removeFromCart}>
             ×
           </BigButton>
         )}
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 (
         <SingleItemStyles data-test="SingleItem">
+          <Head>
+            <title>{item.title}</title>
+          </Head>
           <img src={item.largeImage || item.image} alt={item.title} />
           <div className="details">
             <h2>Viewing {item.title}</h2>
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;