Sick Fits - Order {order.id}

import React from 'react'; import PropTypes from 'prop-types'; import { Query } from 'react-apollo'; import { format } from 'date-fns'; import Head from 'next/head'; 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 description price image quantity } } } `; class Order extends React.Component { static propTypes = { id: PropTypes.string.isRequired, }; render() { return ( {({ data, error, loading }) => { if (error) return ; if (loading) return

Loading...

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

Order ID: {this.props.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)}

{item.description}

))}

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