1 files changed, 41 insertions, 3 deletions

diff --git a/client/components/App.jsx b/client/components/App.jsx
index 26af681..1b58e24 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -1,12 +1,50 @@
 import React from 'react'
+import ProductList from './ProductList.jsx'
+import OrderList from './OrderList.jsx'
+import client from '../client'
 
 export default class App extends React.Component {
   constructor() {
     super()
+    this.state = {
+      ready: false,
+      products: null,
+      product: null,
+      orders: null,
+    }
+    this.load = this.load.bind(this)
+    this.pick = this.pick.bind(this)
+    client.fetch('/api/products').then(this.load)
+  }
+  load(products) {
+    this.setState({
+      ready: true,
+      products: products,
+    })
+  }
+  pick(product) {
+    this.setState({
+      product: product,
+      orders: null
+    })
+    client.fetch('/api/orders', {id: product.product_merchant_product_id}).then((orders) => this.setState({ orders: orders }))
   }
   render() {
-    return (
-      <div>Loading...</div>
-    )
+    if (! this.state.ready) {
+      return (
+        <div className='loading'>Loading...</div>
+      )
+    }
+    else {
+      const products = this.state.products
+      const product = this.state.product
+      const orders = this.state.orders
+      return (
+        <div>
+          <ProductList products={products} handleSelect={(product) => this.pick(product)} />
+          <OrderList product={product} orders={orders} />
+        </div>
+      )
+    }
   }
 }
\ No newline at end of file