From f7bea2d1b7be2b70dceb25c9837f608b538e9cec Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Wed, 28 Feb 2018 15:28:15 -0500 Subject: what --- frontend/components/Order.js | 60 ++++++++++++++++++++++++++++++++++++++ frontend/components/OrderList.js | 12 +++----- frontend/components/Page.js | 2 +- frontend/components/TakeMyMoney.js | 11 +++++-- 4 files changed, 74 insertions(+), 11 deletions(-) create mode 100644 frontend/components/Order.js (limited to 'frontend/components') diff --git a/frontend/components/Order.js b/frontend/components/Order.js new file mode 100644 index 0000000..409db66 --- /dev/null +++ b/frontend/components/Order.js @@ -0,0 +1,60 @@ +import { Component } from 'react'; +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(); + } + 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} +

+
+ ))} +
+
+ ); + } +} + +const orderEnhancer = graphql(SINGLE_ORDER_QUERY, { + name: 'orderQuery', + options: ({ id }) => ({ + variables: { id }, + }), +}); +export default compose(orderEnhancer)(Order); diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js index 5e32ba2..cf12dc8 100644 --- a/frontend/components/OrderList.js +++ b/frontend/components/OrderList.js @@ -3,6 +3,7 @@ import { USER_ORDERS_QUERY } from '../queries'; import { graphql, compose } from 'react-apollo'; import { format, formatDistance } from 'date-fns'; import formatMoney from '../lib/formatMoney'; +import Link from 'next/link'; class OrderList extends Component { componentDidMount() { @@ -30,18 +31,13 @@ class OrderList extends Component { ))} diff --git a/frontend/components/Page.js b/frontend/components/Page.js index 66c65e6..6256c3d 100644 --- a/frontend/components/Page.js +++ b/frontend/components/Page.js @@ -25,9 +25,9 @@ const globals = injectGlobal` font-family: 'radnika next', sans-serif; padding: 0; background-color: #ffffff; - background: blue; margin: 0; font-size: 1.5rem; + background: red; } *, *:before, *:after { box-sizing: inherit; diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js index 5bdc409..5ebfb95 100644 --- a/frontend/components/TakeMyMoney.js +++ b/frontend/components/TakeMyMoney.js @@ -3,16 +3,23 @@ import StripeCheckout from 'react-stripe-checkout'; import { graphql, compose } from 'react-apollo'; import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries'; import formatMoney from '../lib/formatMoney'; +import Router from 'next/router'; +import NProgress from 'nprogress'; class TakeMyMoney extends Component { onToken = async res => { - console.log('We got a toooken!'); + NProgress.start(); const order = await this.props.createOrder({ variables: { token: res.id, }, }); - console.log(order); + // Route them to that order page + const { id } = order.data.createOrder; + Router.push({ + pathname: `/order/${id}`, + query: { id }, + }); }; render() { -- cgit v1.3