diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-03-22 16:29:31 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-03-22 16:29:31 -0400 |
| commit | a6af043686e4375d7944e91cae3d5b63c59edab0 (patch) | |
| tree | f814d412b14a2a47f56c933ce38f458055f2f83b /frontend/components/Order.js | |
| parent | 93495ce146c4e81ecfab3a0bca99460e75a759da (diff) | |
Migrate to render props
Diffstat (limited to 'frontend/components/Order.js')
| -rw-r--r-- | frontend/components/Order.js | 95 |
1 files changed, 47 insertions, 48 deletions
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 <p>No order Found!</p>; - } return ( - <div> - <Head> - <title>Sick Fits - Order {order.id}</title> - </Head> - <p> - <span>Order Id:</span> - <span>{order.id}</span> - </p> - <p> - <span>Charge</span> - <span>{order.charge}</span> - </p> - <p> - <span>Date</span> - <span>{format(order.createdAt, 'MMMM D, YYYY h:mm A')}</span> - </p> - <p> - <span>Order Total</span> - <span>{formatMoney(order.total)}</span> - </p> - <p>You Bought {order.items.length} items in this order</p> - <div className="items"> - {order.items.map(item => ( - <div className="order-item" key={item.id}> - <h2> - {item.quantity} OF {item.title} - </h2> + <Query query={SINGLE_ORDER_QUERY} variables={{ id: this.props.id }}> + {({ data: { order }, error, loading }) => { + if (loading) return <p>Loading...</p>; + if (!order || error) return <p>No Order Found!</p>; + return ( + <div> + <Head> + <title>Sick Fits - Order {order.id}</title> + </Head> + <p> + <span>Order Id:</span> + <span>{order.id}</span> + </p> + <p> + <span>Charge</span> + <span>{order.charge}</span> + </p> + <p> + <span>Date</span> + <span>{format(order.createdAt, 'MMMM D, YYYY h:mm A')}</span> + </p> + <p> + <span>Order Total</span> + <span>{formatMoney(order.total)}</span> + </p> + <p>You Bought {order.items.length} items in this order</p> + <div className="items"> + {order.items.map(item => ( + <div className="order-item" key={item.id}> + <h2> + {item.quantity} OF {item.title} + </h2> + </div> + ))} + </div> </div> - ))} - </div> - </div> + ); + }} + </Query> ); } } -const orderEnhancer = graphql(SINGLE_ORDER_QUERY, { - name: 'orderQuery', - options: ({ id }) => ({ - variables: { id }, - }), -}); -export default compose(orderEnhancer)(Order); +export default Order; |