Migrate to render props

1 files changed, 38 insertions, 46 deletions

diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js
index 6a1ad67..ed7beae 100644
--- a/frontend/components/OrderList.js
+++ b/frontend/components/OrderList.js
@@ -1,56 +1,48 @@
-import { Component } from 'react';
-import { USER_ORDERS_QUERY } from '../queries';
-import { graphql, compose } from 'react-apollo';
+import React from 'react';
+import { Query } from 'react-apollo';
 import { format, formatDistance } from 'date-fns';
-import formatMoney from '../lib/formatMoney';
 import Link from 'next/link';
+import { USER_ORDERS_QUERY } from '../queries';
 
-class OrderList extends Component {
-  componentDidMount() {
-    this.props.userOrdersQuery.refetch();
-  }
+class OrderList extends React.Component {
   render() {
-    if (this.props.loading) {
-      return <p>Loading...</p>;
-    }
-
-    if (this.props.error) {
-      return <p>Error...</p>;
-    }
-
-    const { orders } = this.props.userOrdersQuery;
-
-    if (!orders || !orders.length) return <p>No Orders Yet!</p>;
-
     return (
-      <div>
-        <h2>You have {orders.length} Orders</h2>
-        <ul>
-          {orders.map(order => (
-            <li key={order.id}>
-              <ul className="order-items">
-                <hr />
-                <h2>
-                  <Link
-                    href={{
-                      pathname: '/order',
-                      query: { id: order.id },
-                    }}
-                  >
-                    <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>
+      <Query query={USER_ORDERS_QUERY}>
+        {({ data: { orders }, loading, error }) => {
+          if (loading) return <p>Loading...</p>;
+          if (error) return <p>Error...</p>;
+          if (!orders || !orders.length) return <p>No Orders Yet!</p>;
+          return (
+            <div>
+              <h2>You have {orders.length} Orders</h2>
+              <ul>
+                {orders.map(order => (
+                  <li key={order.id}>
+                    <ul className="order-items">
+                      <hr />
+                      <h2>
+                        <Link
+                          href={{
+                            pathname: '/order',
+                            query: { id: order.id },
+                          }}
+                        >
+                          <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>
+                    </ul>
+                  </li>
+                ))}
               </ul>
-            </li>
-          ))}
-        </ul>
-      </div>
+            </div>
+          );
+        }}
+      </Query>
     );
   }
 }
 
-const ordersEnhancer = graphql(USER_ORDERS_QUERY, { name: 'userOrdersQuery' });
-export default compose(ordersEnhancer)(OrderList);
+export default OrderList;