From 8f2c595eca30e2d7138c8e8d6685774a8f44e55d Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 15 Feb 2018 16:59:58 -0500 Subject: omg --- frontend/components/AddToCart.js | 1 - frontend/components/Cart.js | 136 +++++++++++++++++++++------------- frontend/components/CartItem.js | 39 ++++++++++ frontend/components/CartList.js | 32 +------- frontend/components/CreateItem.js | 3 +- frontend/components/Header.js | 70 +++++++++++------ frontend/components/Item.js | 79 ++++++++++++++++---- frontend/components/Items.js | 6 +- frontend/components/LoginAuth0.js | 76 ------------------- frontend/components/Meta.js | 3 +- frontend/components/Nav.js | 98 +++++++++++++++++------- frontend/components/OrderList.js | 3 - frontend/components/Page.js | 62 +++++++++------- frontend/components/Pagination.js | 11 +-- frontend/components/RemoveFromCart.js | 16 +++- frontend/components/Search.js | 81 +++++++++++++------- frontend/components/SingleItem.js | 4 +- frontend/components/TakeMyMoney.js | 37 +++------ frontend/components/ToggleCart.js | 22 ++++++ frontend/components/styles/Title.js | 20 +++++ 20 files changed, 482 insertions(+), 317 deletions(-) create mode 100644 frontend/components/CartItem.js delete mode 100644 frontend/components/LoginAuth0.js create mode 100644 frontend/components/ToggleCart.js create mode 100644 frontend/components/styles/Title.js (limited to 'frontend/components') diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js index 5a11513..6cab321 100644 --- a/frontend/components/AddToCart.js +++ b/frontend/components/AddToCart.js @@ -7,7 +7,6 @@ import { CURRENT_USER_QUERY, SINGLE_ITEM_QUERY } from '../queries'; import { removeFromCartEnhancer, userEnhancer, addtoCartEnhancer } from '../enhancers/enhancers'; console.log(addtoCartEnhancer); -import makeImage from '../lib/image'; const JumpImg = styled.img` border: 0 solid black; diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js index 72c34ae..78e0d88 100644 --- a/frontend/components/Cart.js +++ b/frontend/components/Cart.js @@ -1,9 +1,14 @@ import { Component } from 'react'; import { graphql, compose } from 'react-apollo'; import styled from 'styled-components'; -import { networkEnhancer, userEnhancer, uiEnhancer } from '../enhancers/enhancers'; +import Title from './styles/Title'; +import { updateUIEnhancer, userEnhancer, uiEnhancer } from '../enhancers/enhancers'; import RemoveFromCart from './RemoveFromCart'; import TakeMyMoney from './TakeMyMoney'; +import ToggleCart from './ToggleCart'; +import formatMoney from '../lib/formatMoney'; + +import CartItem from './CartItem'; const CartStyles = styled.div` padding: 20px; @@ -13,75 +18,104 @@ const CartStyles = styled.div` height: 100%; top: 0; right: 0; + width: 40%; + min-width: 500px; bottom: 0; transform: translateX(100%); transition: all 0.3s; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2); z-index: 5; + display: grid; + grid-template-rows: auto 1fr auto; ${props => props.open && `transform: translateX(0);`}; - .toggleOpen { - position: absolute; - top: 0; - left: 0; - transform: translateX(-100%); + header { + border-bottom: 5px solid ${props => props.theme.black}; + margin-bottom: 2rem; + padding-bottom: 2rem; + } + footer { + border-top: 10px double ${props => props.theme.black}; + margin-top: 2rem; + padding-top: 2rem; + display: grid; + grid-template-columns: auto auto; + align-items: center; + font-size: 3rem; + font-weight: 900; + p { + margin: 0; + } } `; +const CartUl = styled.ul` + margin: 0; + padding: 0; + list-style: none; + overflow: scroll; +`; + +const Supreme = styled.h3` + background: ${props => props.theme.red}; + color: white; + display: inline-block; + padding: 4px 5px; + transform: skew(-3deg); + margin: 0; + font-size: 4rem; +`; + +const CloseButton = styled.button` + background: black; + color: white; + font-size: 3rem; + border: 0; + position: absolute; + z-index: 2; + right: 0; +`; + class Cart extends Component { - state = { - open: true, - }; componentDidMount() { - console.log('refetching..'); - setTimeout(this.props.currentUser.refetch, 10); + // TODO listen for escape + } + + componentWillUnmount() { + // TODO unlisten for escape } - toggleOpen = () => { - this.setState({ open: !this.state.open }); - }; - handleClick = () => { - console.log('CLICK'); - this.props.updateNetworkStatus(!this.props.ui.networkStatus.isConnected); - }; render() { - if (!this.props.currentUser.me) { - return null; - } const { me } = this.props.currentUser; + if (!me) return null; + const itemCount = me.cart.length; + const quantityCount = me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0); + const totalPrice = me.cart.reduce((tally, cartItem) => tally + cartItem.quantity * cartItem.item.price, 0); return ( - - - - -

🛒: {me.cart.length} Items

- + +
+ ( + + × + + )} + /> + Your Cart. +

+ You have {itemCount} item{itemCount === 1 ? '' : 's'} in your cart. S{'I'.repeat(quantityCount)}CK +

+
- -
- - - {/* Theren - {user.cart.length === 1 ? ' is ' : 'are '} - - {user.cart.length === 1 ? ' item ' : ' items '} - in your cart totaling */} - {/* */} + {me.cart.map(cartItem => )} +
+

{formatMoney(totalPrice)}

+ + + +
); } } -export default compose(userEnhancer, networkEnhancer, uiEnhancer)(Cart); +export default compose(userEnhancer, uiEnhancer)(Cart); diff --git a/frontend/components/CartItem.js b/frontend/components/CartItem.js new file mode 100644 index 0000000..83c948e --- /dev/null +++ b/frontend/components/CartItem.js @@ -0,0 +1,39 @@ +import formatMoney from '../lib/formatMoney'; +import RemoveFromCart from './RemoveFromCart'; +import styled from 'styled-components'; + +const CartItemStyles = styled.li` + padding: 1rem 0; + border-bottom: 1px solid ${props => props.theme.lightgrey}; + display: grid; + align-items: center; + grid-template-columns: auto 1fr auto; + img { + margin-right: 10px; + } + h3 { + margin: 0; + } + p { + margin: 0; + } +`; + +const CartItem = ({ cartItem }) => ( + + {cartItem.item.title} +
+

{cartItem.item.title}

+

+ {formatMoney(cartItem.quantity * cartItem.item.price)} + {' — '} + + {cartItem.quantity} × {formatMoney(cartItem.item.price)} each + +

+
+ + +); + +export default CartItem; diff --git a/frontend/components/CartList.js b/frontend/components/CartList.js index bf08f87..1a44012 100644 --- a/frontend/components/CartList.js +++ b/frontend/components/CartList.js @@ -1,21 +1,11 @@ // I THINK THIS CAN BE DELETED import { Component } from 'react'; -import withData from '../lib/withData'; -import Items from '../components/Items'; -import Signup from '../components/Signup'; -import LoginAuth0 from '../components/LoginAuth0'; -import Page from '../components/Page'; -import { USER_ORDERS_QUERY, GET_CART_STATE } from '../queries'; -import { graphql, compose } from 'react-apollo'; -import has from 'lodash.has'; -import get from 'lodash.get'; +import { compose } from 'react-apollo'; import styled from 'styled-components'; +import PropTypes from 'prop-types'; import formatMoney from '../lib/formatMoney'; -import makeImage from '../lib/image'; import TakeMyMoney from './TakeMyMoney'; -import { removeFromCartEnhancer } from '../enhancers/enhancers'; -import { CURRENT_USER_QUERY } from '../queries'; -import PropTypes from 'prop-types'; +import { removeFromCartEnhancer, userEnhancer, uiEnhancer } from '../enhancers/enhancers'; const CartStyles = styled.div` padding: 20px; @@ -44,15 +34,6 @@ class CartList extends Component { client: PropTypes.object, }; - componentDidMount() { - setTimeout(this.props.currentUserQuery.refetch, 1); - // Set the cart state to be closed - this.context.client.writeQuery({ - query: GET_CART_STATE, - data: { ui: { isCartOpen: true, __typename: 'Network' } }, - }); - } - toggleOpen = () => { this.props.uiQuery.updateQuery(() => ({ ui: { isCartOpen: false, __typename: 'Network' } })); }; @@ -66,15 +47,13 @@ class CartList extends Component { return

Error....

; } - // if (!has(this.props, 'currentUserQuery.user.cart')) { // return

Don't have it yet!

; // } // OMG Clean this up - let { user = {} } = this.props.currentUserQuery || {}; + if (!user) user = {}; const cart = user.cart || []; const userId = user.id; - // const userId = this.props.currentUserQuery.user.id; const total = cart.reduce((a, b) => a + b.price, 0); return ( @@ -83,7 +62,6 @@ class CartList extends Component { Open Cart

{cart.length} Items

-