diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-06-14 16:44:21 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-06-14 16:44:21 -0400 |
| commit | b1600adec47a04f60e1da07d94a3ed3906ff5aee (patch) | |
| tree | 828f786da6806d7237ee5cbc5df61e552353b85b /finished-application/frontend/components/Order.js | |
| parent | a95e08cd2dd5d7ec0a0412adae02515a5f9cec4f (diff) | |
starter files
Diffstat (limited to 'finished-application/frontend/components/Order.js')
| -rw-r--r-- | finished-application/frontend/components/Order.js | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/finished-application/frontend/components/Order.js b/finished-application/frontend/components/Order.js new file mode 100644 index 0000000..b4a0a0e --- /dev/null +++ b/finished-application/frontend/components/Order.js @@ -0,0 +1,98 @@ +import { Component } from 'react'; +import { Query } from 'react-apollo'; +import { format } from 'date-fns'; +import Head from 'next/head'; +import PropTypes from 'prop-types'; +import gql from 'graphql-tag'; +import formatMoney from '../lib/formatMoney'; +import Error from './ErrorMessage'; +import OrderStyles from './styles/OrderStyles'; + +const SINGLE_ORDER_QUERY = gql` + query SINGLE_ORDER_QUERY($id: ID!) { + order(id: $id) { + id + charge + total + createdAt + user { + id + } + items { + id + title + price + description + image + quantity + } + } + } +`; + +class Order extends Component { + static propTypes = { + id: PropTypes.string.isRequired, + }; + + render() { + return ( + <Query + query={SINGLE_ORDER_QUERY} + variables={{ id: this.props.id }} + fetchPolicy="network-only" + > + {({ data, error, loading, refetch }) => { + if (loading) return <p>Loading...</p>; + if (error) return <Error error={error} refetch={refetch} />; + const order = data.order; + return ( + <OrderStyles data-test="order"> + <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> + <span>Item Count</span> + <span>{order.items.length}</span> + </p> + <div className="items"> + {order.items.map(item => ( + <div className="order-item" key={item.id}> + <img src={item.image} alt={item.title} /> + <div className="item-details"> + <h2> {item.title} </h2> + <p>Qty: {item.quantity}</p> + <p>Each: {formatMoney(item.price)}</p> + <p>Subtotal: {formatMoney(item.price * item.quantity)}</p> + <p>SubTotal: {item.description}</p> + <p>{item.description}</p> + </div> + </div> + ))} + </div> + </OrderStyles> + ); + }} + </Query> + ); + } +} + +export default Order; +export { SINGLE_ORDER_QUERY }; |