diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/components/Order.js | 60 | ||||
| -rw-r--r-- | frontend/components/OrderList.js | 12 | ||||
| -rw-r--r-- | frontend/components/Page.js | 2 | ||||
| -rw-r--r-- | frontend/components/TakeMyMoney.js | 11 | ||||
| -rw-r--r-- | frontend/pages/_document.js | 5 | ||||
| -rw-r--r-- | frontend/pages/order.js | 13 | ||||
| -rw-r--r-- | frontend/queries/index.js | 19 | ||||
| -rw-r--r-- | frontend/routes.js | 3 |
8 files changed, 109 insertions, 16 deletions
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 <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> + ); + } +} + +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 { <ul className="order-items"> <hr /> <h2> - {order.id} + <Link href={`/order/${order.id}`} prefetch> + <a>{order.id}</a> + </Link> <time dateTime={order.createdAt} title={format(order.createdAt, 'MMMM D, YYYY h:mm A')}> {formatDistance(order.createdAt, new Date())} </time> </h2> - - {order.items.map(item => ( - <li> - <img src={item.image} alt={item.title} /> - <p>{item.title}</p> - </li> - ))} </ul> </li> ))} 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 ( <html> - <Head> - <title>My page</title> - {this.props.styleTags} - </Head> + <Head>{this.props.styleTags}</Head> <body> <Main /> <NextScript /> 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 => ( + <Page> + <h2>Single Order:</h2> + <Order id={props.url.query.orderId} /> + </Page> +); + +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'); |