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 +++++-- frontend/pages/_document.js | 5 +--- frontend/pages/order.js | 13 +++++++++ frontend/queries/index.js | 19 ++++++++++++ frontend/routes.js | 3 +- 8 files changed, 109 insertions(+), 16 deletions(-) create mode 100644 frontend/components/Order.js create mode 100644 frontend/pages/order.js (limited to 'frontend') 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() { diff --git a/frontend/pages/_document.js b/frontend/pages/_document.js index e9a6570..0ac8935 100644 --- a/frontend/pages/_document.js +++ b/frontend/pages/_document.js @@ -12,10 +12,7 @@ export default class MyDocument extends Document { render() { return ( - - My page - {this.props.styleTags} - + {this.props.styleTags}
diff --git a/frontend/pages/order.js b/frontend/pages/order.js new file mode 100644 index 0000000..d8fa17e --- /dev/null +++ b/frontend/pages/order.js @@ -0,0 +1,13 @@ +import { Component } from 'react'; +import withData from '../lib/withData'; +import Page from '../components/Page'; +import Order from '../components/Order'; + +const OrderPage = props => ( + +

Single Order:

+ + +); + +export default withData(OrderPage); diff --git a/frontend/queries/index.js b/frontend/queries/index.js index beaec05..87f66b9 100644 --- a/frontend/queries/index.js +++ b/frontend/queries/index.js @@ -99,6 +99,25 @@ export const SINGLE_ITEM_QUERY = gql` } `; +export const SINGLE_ORDER_QUERY = gql` + query order($id: ID!) { + order(where: { id: $id }) { + id + charge + total + createdAt + items { + id + title + price + description + image + quantity + } + } + } +`; + export const SEARCH_ITEMS_QUERY = gql` ${itemDetails} query SearchItems($searchTerm: String!) { diff --git a/frontend/routes.js b/frontend/routes.js index 62f91a9..b873186 100644 --- a/frontend/routes.js +++ b/frontend/routes.js @@ -3,4 +3,5 @@ const routes = (module.exports = require('next-routes')()); routes .add('about') .add('item', '/item/:itemId/:slug') - .add('items', '/items/:page'); + .add('items', '/items/:page') + .add('order', '/order/:orderId'); -- cgit v1.3