diff options
| -rw-r--r-- | backend/src/resolvers/Query.js | 6 | ||||
| -rw-r--r-- | frontend/components/Cart.js | 65 | ||||
| -rw-r--r-- | frontend/components/Nav.js | 24 | ||||
| -rw-r--r-- | frontend/components/Order.js | 1 | ||||
| -rw-r--r-- | frontend/components/Page.js | 33 | ||||
| -rw-r--r-- | frontend/components/TakeMyMoney.js | 5 | ||||
| -rw-r--r-- | frontend/components/UIContext.js | 25 | ||||
| -rw-r--r-- | frontend/lib/withData.js | 17 | ||||
| -rw-r--r-- | frontend/pages/orders.js | 5 | ||||
| -rw-r--r-- | frontend/queries/index.js | 11 |
10 files changed, 113 insertions, 79 deletions
diff --git a/backend/src/resolvers/Query.js b/backend/src/resolvers/Query.js index a34b484..22dcd2a 100644 --- a/backend/src/resolvers/Query.js +++ b/backend/src/resolvers/Query.js @@ -24,8 +24,10 @@ const Query = { }, async orders(parent, args, ctx, info) { - const userId = getUserId(ctx); - console.log(info); + const { userId } = ctx.request; + if (!userId) { + throw new Error('You must be signed in to see your orders'); + } return ctx.db.query.orders( { where: { diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js index 0a77754..7dbea8f 100644 --- a/frontend/components/Cart.js +++ b/frontend/components/Cart.js @@ -1,11 +1,10 @@ import React from 'react'; -import { Query } from 'react-apollo'; +import { Mutation, Query } from 'react-apollo'; import styled from 'styled-components'; import TakeMyMoney from './TakeMyMoney'; import formatMoney from '../lib/formatMoney'; -import { UIContext } from './UIContext'; import CartItem from './CartItem'; -import { CURRENT_USER_QUERY } from '../queries/index'; +import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION } from '../queries/index'; import calcTotalPrice from '../lib/calcTotalPrice'; const CartStyles = styled.div` @@ -74,37 +73,43 @@ const CloseButton = styled.button` `; const Cart = props => ( - <UIContext.Consumer> - {context => ( - <Query query={CURRENT_USER_QUERY}> - {({ data: { me }, error, loading }) => { - if (loading || error || !me) return null; - return ( - <CartStyles open={context.state.isCartOpen}> - <header> - <CloseButton title="close" onClick={context.toggle}> - × - </CloseButton> + <Mutation mutation={TOGGLE_CART_MUTATION}> + {toggle => ( + <Query query={LOCAL_STATE_QUERY}> + {({ data }) => ( + <Query query={CURRENT_USER_QUERY}> + {({ data: { me }, error, loading }) => { + if (loading || error || !me) return null; + return ( + <CartStyles open={data.cartOpen}> + <header> + <CloseButton title="close" onClick={toggle}> + × + </CloseButton> - <Supreme>{me.name}'s Cart.</Supreme> - <p> - You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in your cart. - </p> - </header> + <Supreme>{me.name}'s Cart.</Supreme> + <p> + You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in your cart. + </p> + </header> - <CartUl>{me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}</CartUl> - <footer> - <p>{formatMoney(calcTotalPrice(me.cart))}</p> - <TakeMyMoney> - <button>Checkout</button> - </TakeMyMoney> - </footer> - </CartStyles> - ); - }} + <CartUl> + {me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)} + </CartUl> + <footer> + <p>{formatMoney(calcTotalPrice(me.cart))}</p> + <TakeMyMoney> + <button>Checkout</button> + </TakeMyMoney> + </footer> + </CartStyles> + ); + }} + </Query> + )} </Query> )} - </UIContext.Consumer> + </Mutation> ); export default Cart; diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js index 80f91c6..eea29cb 100644 --- a/frontend/components/Nav.js +++ b/frontend/components/Nav.js @@ -2,10 +2,10 @@ import React, { Fragment } from 'react'; import Link from 'next/link'; import styled from 'styled-components'; import { Query } from 'react-apollo'; -import { CURRENT_USER_QUERY } from '../queries/index'; +import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY } from '../queries/index'; import CartCount from './CartCount'; import Signout from './Signout'; -import { UIContext } from './UIContext'; +import { ApolloConsumer } from 'react-apollo'; const StyledUl = styled.ul` margin: 0; @@ -69,10 +69,13 @@ const StyledUl = styled.ul` `; class Nav extends React.Component { + componentDidMount() { + console.log('NAV MOUNTED'); + } render() { return ( <Query query={CURRENT_USER_QUERY} ssr={false}> - {({ data: { me } }) => ( + {({ data: { me }, refetch }) => ( <StyledUl> <Link prefetch href="/items"> <a>Shop</a> @@ -96,7 +99,7 @@ class Nav extends React.Component { <a>My Account</a> </Link> <Signout /> - <UIContext> + {/* <UIContext> {context => ( <button onClick={context.toggle}> My Cart @@ -106,7 +109,18 @@ class Nav extends React.Component { /> </button> )} - </UIContext> + </UIContext> */} + <ApolloConsumer> + {cache => ( + <button onClick={() => cache.writeData({ data: { cartOpen: true } })}> + My Cart + <CartCount + className="cart-count" + count={me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0)} + /> + </button> + )} + </ApolloConsumer> </Fragment> )} </StyledUl> diff --git a/frontend/components/Order.js b/frontend/components/Order.js index 603aae5..b38254f 100644 --- a/frontend/components/Order.js +++ b/frontend/components/Order.js @@ -60,7 +60,6 @@ class Order extends Component { <Head> <title>Sick Fits - Order {order.id}</title> </Head> - <Dump order={order} /> <p> <span>Order Id:</span> <span>{order.id}</span> diff --git a/frontend/components/Page.js b/frontend/components/Page.js index 031536b..3c6e3b1 100644 --- a/frontend/components/Page.js +++ b/frontend/components/Page.js @@ -3,8 +3,8 @@ import styled, { ThemeProvider, injectGlobal } from 'styled-components'; import PropTypes from 'prop-types'; import Header from './Header'; import Meta from './Meta'; -import { UIProvider } from './UIContext'; -// Global Style +import { client } from '../lib/withData'; +import { CURRENT_USER_QUERY } from '../queries'; const theme = { red: '#FF0000', @@ -50,17 +50,24 @@ const StyledPage = styled.div` background: white; `; -const Page = ({ children }) => ( - <UIProvider> - <ThemeProvider theme={theme}> - <StyledPage className="main"> - <Meta /> - <Header /> - <Inner>{children}</Inner> - </StyledPage> - </ThemeProvider> - </UIProvider> -); +class Page extends React.Component { + componentDidMount() { + // console.log('ComponentDidMount'); + // When the page loads, re-refetch the current user query + // client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' }); + } + render() { + return ( + <ThemeProvider theme={theme}> + <StyledPage className="main"> + <Meta /> + <Header /> + <Inner>{this.props.children}</Inner> + </StyledPage> + </ThemeProvider> + ); + } +} Page.propTypes = { children: PropTypes.node.isRequired, }; diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js index 6adf866..593c610 100644 --- a/frontend/components/TakeMyMoney.js +++ b/frontend/components/TakeMyMoney.js @@ -32,7 +32,10 @@ class TakeMyMoney extends Component { {({ data: { me } }) => { if (!me || !me.cart.length) return null; return ( - <Mutation mutation={CREATE_ORDER_MUTATION}> + <Mutation + mutation={CREATE_ORDER_MUTATION} + refetchQueries={[{ query: CURRENT_USER_QUERY }]} + > {createOrder => ( <StripeCheckout amount={calcTotalPrice(me.cart)} diff --git a/frontend/components/UIContext.js b/frontend/components/UIContext.js deleted file mode 100644 index 103475e..0000000 --- a/frontend/components/UIContext.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -const UIContext = React.createContext(); - -class UIProvider extends React.Component { - displayName: 'OMGME'; - - state = { - isCartOpen: false, - }; - render() { - return ( - <UIContext.Provider - value={{ - state: this.state, - toggle: () => this.setState({ isCartOpen: !this.state.isCartOpen }), - }} - > - {this.props.children} - </UIContext.Provider> - ); - } -} - -export { UIContext, UIProvider }; diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js index c823e62..93a0db1 100644 --- a/frontend/lib/withData.js +++ b/frontend/lib/withData.js @@ -1,6 +1,6 @@ import withApollo from 'next-with-apollo'; import ApolloClient from 'apollo-boost'; - +import { LOCAL_STATE_QUERY } from '../queries/index'; // can also be a function that accepts a `headers` object (SSR only) and returns a config const client = new ApolloClient({ @@ -16,6 +16,21 @@ const client = new ApolloClient({ }); } }, + clientState: { + resolvers: { + Mutation: { + toggleCart(_, variables, { cache }) { + const { cartOpen } = cache.read({ query: LOCAL_STATE_QUERY }); + const data = { data: { cartOpen: !cartOpen } }; + cache.writeData(data); + return data; + }, + }, + }, + defaults: { + cartOpen: false, + }, + }, }); export { client }; diff --git a/frontend/pages/orders.js b/frontend/pages/orders.js index cc5ff36..772bb74 100644 --- a/frontend/pages/orders.js +++ b/frontend/pages/orders.js @@ -2,12 +2,15 @@ import { Component } from 'react'; import withData from '../lib/withData'; import Page from '../components/Page'; import OrderList from '../components/OrderList'; +import PleaseSignIn from '../components/PleaseSignIn'; class Orders extends Component { render() { return ( <Page> - <OrderList /> + <PleaseSignIn> + <OrderList /> + </PleaseSignIn> </Page> ); } diff --git a/frontend/queries/index.js b/frontend/queries/index.js index 15eaf49..5e9e28b 100644 --- a/frontend/queries/index.js +++ b/frontend/queries/index.js @@ -259,3 +259,14 @@ export const UPDATE_PERMISSIONS_MUTATION = gql` } } `; + +export const LOCAL_STATE_QUERY = gql` + { + cartOpen @client + } +`; +export const TOGGLE_CART_MUTATION = gql` + mutation toggleCart { + toggleCart @client + } +`; |