diff options
Diffstat (limited to 'frontend/components')
| -rw-r--r-- | frontend/components/Cart.js | 58 | ||||
| -rw-r--r-- | frontend/components/CartList.js | 1 | ||||
| -rw-r--r-- | frontend/components/OrderList.js | 58 |
3 files changed, 73 insertions, 44 deletions
diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js index 46a8941..72c34ae 100644 --- a/frontend/components/Cart.js +++ b/frontend/components/Cart.js @@ -1,39 +1,62 @@ import { Component } from 'react'; import { graphql, compose } from 'react-apollo'; import styled from 'styled-components'; -import { CURRENT_USER_QUERY } from '../queries'; +import { networkEnhancer, userEnhancer, uiEnhancer } from '../enhancers/enhancers'; import RemoveFromCart from './RemoveFromCart'; import TakeMyMoney from './TakeMyMoney'; -import { formatMoney } from '../lib/formatMoney'; const CartStyles = styled.div` - background: white; - border-radius: 10px; padding: 20px; - overflow: hidden; - display: flex; - align-items: center; + position: relative; + background: white; + position: fixed; + height: 100%; + top: 0; + right: 0; + bottom: 0; + transform: translateX(100%); + transition: all 0.3s; + box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2); + z-index: 5; + ${props => props.open && `transform: translateX(0);`}; + .toggleOpen { + position: absolute; + top: 0; + left: 0; + transform: translateX(-100%); + } `; class Cart extends Component { + state = { + open: true, + }; componentDidMount() { console.log('refetching..'); setTimeout(this.props.currentUser.refetch, 10); } + 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; } - // Check for loading state.. - // const { loading, error } = this.props.currentUserQuery; - // const { user } = this.props.currentUserQuery; - // if (loading || error || !user) return <p>Cart Loading...</p>; - // const total = user.cart.reduce((a, b) => a + b.price, 0); - const { me } = this.props.currentUser; - console.log(me); + return ( - <CartStyles className="cart"> + <CartStyles className="cart" open={this.state.open}> + <button onClick={this.handleClick}> + Toggle Network Status:: {this.props.ui.networkStatus.isConnected.toString()} + </button> + <button className="toggleOpen" onClick={this.toggleOpen}> + Open Cart + </button> + <p>🛒: {me.cart.length} Items</p> <ul> {me.cart.map(cartItem => ( @@ -50,7 +73,7 @@ class Cart extends Component { <hr /> <button>Checkout!!!</button> </TakeMyMoney> - {/* There + {/* Theren {user.cart.length === 1 ? ' is ' : 'are '} <ChaChing amount={user.cart.length} /> {user.cart.length === 1 ? ' item ' : ' items '} @@ -61,5 +84,4 @@ class Cart extends Component { } } -const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' }); -export default compose(userEnhancer)(Cart); +export default compose(userEnhancer, networkEnhancer, uiEnhancer)(Cart); diff --git a/frontend/components/CartList.js b/frontend/components/CartList.js index 661d5ad..bf08f87 100644 --- a/frontend/components/CartList.js +++ b/frontend/components/CartList.js @@ -1,3 +1,4 @@ +// I THINK THIS CAN BE DELETED import { Component } from 'react'; import withData from '../lib/withData'; import Items from '../components/Items'; diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js index c33f0b9..e478984 100644 --- a/frontend/components/OrderList.js +++ b/frontend/components/OrderList.js @@ -1,52 +1,58 @@ import { Component } from 'react'; -import withData from '../lib/withData'; -import Items from '../components/Items'; -import CreateItem from '../components/CreateItem'; -import Signup from '../components/Signup'; -import LoginAuth0 from '../components/LoginAuth0'; -import Page from '../components/Page'; import { USER_ORDERS_QUERY } from '../queries'; -import { graphql, compose } from 'react-apollo' -import has from 'lodash.has'; -import get from 'lodash.get'; +import { graphql, compose } from 'react-apollo'; +import { format, formatDistance } from 'date-fns'; import formatMoney from '../lib/formatMoney'; import makeImage from '../lib/image'; class OrderList extends Component { componentDidMount() { - console.log('Mounting!'); + this.props.userOrdersQuery.refetch(); } render() { - - if(this.props.loading) { - return <p>Loading...</p> + console.log(this.props.userOrdersQuery); + if (this.props.loading) { + return <p>Loading...</p>; } - if(this.props.error) { - return <p>Error...</p> + if (this.props.error) { + return <p>Error...</p>; } - if(!has(this.props, 'userOrdersQuery.user.orders')) { - return <p>Don't have it yet!</p> - } + const { orders } = this.props.userOrdersQuery; - const orders = this.props.userOrdersQuery.user.orders; + if (!orders || !orders.length) return <p>No Orders Yet!</p>; console.log(orders); return ( <div> <h2>You have {orders.length} Orders</h2> <ul> - {orders.map(order => <li key={order.id}> - <img src={makeImage(order.item.image)} alt=""/> - <h3>{order.item.title} ({formatMoney(order.amount)}) </h3> - <p>{order.item.description}</p> - </li>)} + {orders.map(order => ( + <li key={order.id}> + <ul className="order-items"> + <hr /> + <h2> + {order.id} + <time dateTime={order.createdAt} title={format(order.createdAt, 'MMMM D, YYYY h:mm A')}> + {formatDistance(order.createdAt, new Date())} + </time> + </h2> + + {order.items.map(item => ( + <li> + <img src={item.image} alt={item.title} /> + <p>{item.title}</p> + </li> + ))} + </ul> + </li> + ))} </ul> </div> - ) + ); } } const ordersEnhancer = graphql(USER_ORDERS_QUERY, { name: 'userOrdersQuery' }); -export default compose(ordersEnhancer)(OrderList) +export default compose(ordersEnhancer)(OrderList); |