From a6af043686e4375d7944e91cae3d5b63c59edab0 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 22 Mar 2018 16:29:31 -0400 Subject: Migrate to render props --- frontend/components/Order.js | 95 ++++++++++++++++++++++---------------------- 1 file changed, 47 insertions(+), 48 deletions(-) (limited to 'frontend/components/Order.js') diff --git a/frontend/components/Order.js b/frontend/components/Order.js index 409db66..a715483 100644 --- a/frontend/components/Order.js +++ b/frontend/components/Order.js @@ -1,60 +1,59 @@ 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 { graphql, compose } from 'react-apollo'; -import { format, formatDistance } from 'date-fns'; import formatMoney from '../lib/formatMoney'; -import Item from './Item'; -import Head from 'next/head'; class Order extends Component { - componentDidMount() { - // this.props.orderQuery.refetch(); - } + static propTypes = { + id: PropTypes.string.isRequired, + }; + render() { - const { order } = this.props.orderQuery; - if (!order) { - 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} -

+ + {({ 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} +

+
+ ))} +
- ))} -
-
+ ); + }} + ); } } -const orderEnhancer = graphql(SINGLE_ORDER_QUERY, { - name: 'orderQuery', - options: ({ id }) => ({ - variables: { id }, - }), -}); -export default compose(orderEnhancer)(Order); +export default Order; -- cgit v1.3