diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-02-28 15:28:15 -0500 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-02-28 15:28:15 -0500 |
| commit | f7bea2d1b7be2b70dceb25c9837f608b538e9cec (patch) | |
| tree | 3bac7ad6d76fe9eca1d97f92109d709a141bfc00 /frontend/components/Order.js | |
| parent | 8f2c595eca30e2d7138c8e8d6685774a8f44e55d (diff) | |
what
Diffstat (limited to 'frontend/components/Order.js')
| -rw-r--r-- | frontend/components/Order.js | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/frontend/components/Order.js b/frontend/components/Order.js new file mode 100644 index 0000000..409db66 --- /dev/null +++ b/frontend/components/Order.js @@ -0,0 +1,60 @@ +import { Component } from 'react'; +import { SINGLE_ORDER_QUERY } from '../queries'; +import { graphql, compose } from 'react-apollo'; +import { format, formatDistance } from 'date-fns'; +import formatMoney from '../lib/formatMoney'; +import Item from './Item'; +import Head from 'next/head'; + +class Order extends Component { + componentDidMount() { + // this.props.orderQuery.refetch(); + } + render() { + const { order } = this.props.orderQuery; + if (!order) { + return <p>No order Found!</p>; + } + return ( + <div> + <Head> + <title>Sick Fits - Order {order.id}</title> + </Head> + <p> + <span>Order Id:</span> + <span>{order.id}</span> + </p> + <p> + <span>Charge</span> + <span>{order.charge}</span> + </p> + <p> + <span>Date</span> + <span>{format(order.createdAt, 'MMMM D, YYYY h:mm A')}</span> + </p> + <p> + <span>Order Total</span> + <span>{formatMoney(order.total)}</span> + </p> + <p>You Bought {order.items.length} items in this order</p> + <div className="items"> + {order.items.map(item => ( + <div className="order-item" key={item.id}> + <h2> + {item.quantity} OF {item.title} + </h2> + </div> + ))} + </div> + </div> + ); + } +} + +const orderEnhancer = graphql(SINGLE_ORDER_QUERY, { + name: 'orderQuery', + options: ({ id }) => ({ + variables: { id }, + }), +}); +export default compose(orderEnhancer)(Order); |