4 files changed, 74 insertions, 11 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() {