Sick Fits - Order {order.id}

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 ( {({ data, error, loading, refetch }) => { if (loading) return

Loading...

; if (error) return ; const order = data.order; 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)}

Item Count {order.items.length}

{order.items.map(item => (

{item.title}

{item.title}

Qty: {item.quantity}

Each: {formatMoney(item.price)}

Subtotal: {formatMoney(item.price * item.quantity)}

SubTotal: {item.description}

{item.description}

))}

); }} ); } } export default Order; export { SINGLE_ORDER_QUERY };