From 093c172d16732ba8d01faa313e0af99d26902205 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Fri, 7 Sep 2018 12:15:53 -0400 Subject: getting there --- stepped-solutions/53/frontend/components/Order.js | 91 +++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100755 stepped-solutions/53/frontend/components/Order.js (limited to 'stepped-solutions/53/frontend/components/Order.js') diff --git a/stepped-solutions/53/frontend/components/Order.js b/stepped-solutions/53/frontend/components/Order.js new file mode 100755 index 0000000..f2a2caf --- /dev/null +++ b/stepped-solutions/53/frontend/components/Order.js @@ -0,0 +1,91 @@ +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; -- cgit v1.3