From 944fefa06c375dc475d4b374a2acee9a81943de8 Mon Sep 17 00:00:00 2001
From: Johnny Rice <jrice@labact.com>
Date: Thu, 20 Aug 2020 18:32:28 -0400
Subject: [PATCH] Provide ajax detail starter

---
 src/App.js      | 36 +++++++++---------------------------
 src/Logos.js    |  8 ++++++++
 src/Products.js | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 27 deletions(-)
 create mode 100644 src/Logos.js
 create mode 100644 src/Products.js

diff --git a/src/App.js b/src/App.js
index efafdbd..77b5976 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,3 @@
-/**
-
-  Code in this file is taken directly from https://reactrouter.com/web/example/basic
- */
-
 import React from "react";
 import {
   BrowserRouter as Router,
@@ -11,6 +6,9 @@ import {
   Link
 } from "react-router-dom";
 
+import Products from './Products'
+import Logos from './Logos'
+
 // This site has 3 pages, all of which are rendered
 // dynamically in the browser (not server rendered).
 //
@@ -29,10 +27,10 @@ export default function BasicExample() {
             <Link to="/">Home</Link>
           </li>
           <li>
-            <Link to="/about">About</Link>
+            <Link to="/products">Products</Link>
           </li>
           <li>
-            <Link to="/dashboard">Dashboard</Link>
+            <Link to="/logos">Logos</Link>
           </li>
         </ul>
 
@@ -49,11 +47,11 @@ export default function BasicExample() {
           <Route exact path="/">
             <Home />
           </Route>
-          <Route path="/about">
-            <About />
+          <Route path="/products">
+            <Products />
           </Route>
-          <Route path="/dashboard">
-            <Dashboard />
+          <Route path="/logos">
+            <Logos />
           </Route>
         </Switch>
       </div>
@@ -70,20 +68,4 @@ function Home() {
       <h2>Home</h2>
     </div>
   );
-}
-
-function About() {
-  return (
-    <div>
-      <h2>About</h2>
-    </div>
-  );
-}
-
-function Dashboard() {
-  return (
-    <div>
-      <h2>Dashboard</h2>
-    </div>
-  );
 }
\ No newline at end of file
diff --git a/src/Logos.js b/src/Logos.js
new file mode 100644
index 0000000..3c49978
--- /dev/null
+++ b/src/Logos.js
@@ -0,0 +1,8 @@
+import React from 'react'
+
+
+export default () => {
+    return (
+        <div>Logos Place holder</div>
+    )
+}
\ No newline at end of file
diff --git a/src/Products.js b/src/Products.js
new file mode 100644
index 0000000..ce27ed2
--- /dev/null
+++ b/src/Products.js
@@ -0,0 +1,35 @@
+import React from 'react'
+
+class Products extends React.Component {
+    constructor () {
+        super()
+        this.state = {
+            results: []
+        }
+    }
+
+    componentDidMount() {
+        this.callApi()
+        .then(res => this.setState({ response: res.express }))
+        .catch(err => console.log(err));
+    }
+    
+    callApi = async () => {
+        const response = await fetch('http://localhost:3001/products');
+        const body = await response.json();
+        if (response.status !== 200) throw Error(body.message);
+        
+        return body;
+    };
+
+    render ()  {
+        return (
+            <div>
+                <div>Products Place holder</div>
+                <div>{this.state.response}</div>
+            </div>
+        )
+    }
+}
+
+export default Products
\ No newline at end of file