what

author: Wes Bos <wesbos@gmail.com> 2018-02-28 15:28:15 -0500
committer: Wes Bos <wesbos@gmail.com> 2018-02-28 15:28:15 -0500
commit: f7bea2d1b7be2b70dceb25c9837f608b538e9cec (patch)
tree: 3bac7ad6d76fe9eca1d97f92109d709a141bfc00 /frontend
parent: 8f2c595eca30e2d7138c8e8d6685774a8f44e55d (diff)
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');
author	Wes Bos <wesbos@gmail.com>	2018-02-28 15:28:15 -0500
committer	Wes Bos <wesbos@gmail.com>	2018-02-28 15:28:15 -0500
commit	f7bea2d1b7be2b70dceb25c9837f608b538e9cec (patch)
tree	3bac7ad6d76fe9eca1d97f92109d709a141bfc00 /frontend
parent	8f2c595eca30e2d7138c8e8d6685774a8f44e55d (diff)