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 { SINGLE_ORDER_QUERY } from '../queries'; import formatMoney from '../lib/formatMoney'; class Order extends Component { static propTypes = { id: PropTypes.string.isRequired, }; render() { return ( {({ data: { order }, error, loading }) => { if (loading) return

Loading...

; if (!order || error) return

No Order Found!

; return (
Sick Fits - Order {order.id}

Order Id: {order.id}

Charge {order.charge}

Date {format(order.createdAt, 'MMMM D, YYYY h:mm A')}

Order Total {formatMoney(order.total)}

You Bought {order.items.length} items in this order

{order.items.map(item => (

{item.quantity} OF {item.title}

))}
); }}
); } } export default Order;