diff options
Diffstat (limited to 'frontend/components')
| -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 |
6 files changed, 78 insertions, 75 deletions
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 }; |