Add react routing to all category files

src/App.js

@@ -8,6 +8,10 @@ import {
 
 import Products from './Products'
 import Logos from './Logos'
+import Categories from './Categories'
+import Stores from './Stores'
+import Variations from './Variations'
+import ProductTypes from './Product-Types'
 
 // This site has 3 pages, all of which are rendered
 // dynamically in the browser (not server rendered).
@@ -32,6 +36,18 @@ export default function BasicExample() {
           <li>
             <Link to="/logos">Logos</Link>
           </li>
+          <li>
+            <Link to='/Categories'>Categories</Link>
+          </li>
+          <li>
+            <Link to='/Stores'>Stores</Link>
+          </li>
+          <li>
+            <Link to='/Variations'>Variations</Link>
+          </li>
+          <li>
+            <Link to='/Product-Types'>Product Types</Link>
+          </li>
         </ul>
 
         <hr />
@@ -53,6 +69,18 @@ export default function BasicExample() {
           <Route path="/logos">
             <Logos />
           </Route>
+          <Route path="/categories">
+            <Categories />
+          </Route>
+          <Route path="/stores">
+            <Stores />
+          </Route>
+          <Route path='/variations'>
+            <Variations />
+          </Route>
+          <Route path='/product-types'>
+            <ProductTypes />
+          </Route>
         </Switch>
       </div>
     </Router>

src/Categories.js

@@ -0,0 +1,48 @@
+import React from 'react'
+
+class Categories extends React.Component {
+    constructor () {
+        super()
+        this.state = {
+            response: []
+        }
+    }
+
+    componentDidMount () {
+        this.callApi()
+        .then((response) => {
+            this.setState({ response })
+        })
+        .catch(err => console.log(err))
+    }
+
+    callApi = async () => {
+        const response = await fetch('http://localhost:3001/Categories')
+        const body = await response.json();
+        if (response.status !== 200) throw Error (body.message);
+
+        return body
+    }
+
+    render () {
+        const { response } = this.state
+
+        const itemsList = []
+
+        for (const [index, item] of response.entries()) {
+            itemsList.push(<li key={index}> {item.category} </li>)
+        }
+
+        return (
+            <div>
+                <h1>{ response.length } items found</h1>
+                <ul>
+                    {itemsList}
+                </ul>
+            </div>
+        )
+
+    }
+}
+
+export default Categories

src/Logos.js

@@ -1,8 +1,53 @@
 import React from 'react'
 
+class Logos extends React.Component {
+    constructor () {
+        super()
+        this.state = {
+            response: []
+        }
+    }
 
-export default () => {
-    return (
-        <div>Logos Place holder</div>
-    )
-}
+    componentDidMount() {
+        this.callApi()
+        .then((response) => {
+            this.setState({ response })
+        })
+        .catch(err => console.log(err))
+    }
+
+    callApi = async () => {
+        const response = await fetch ('http://localhost:3001/logos')
+        const body = await response.json();
+        if (response.status !== 200) throw Error(body.message);
+
+        return body;
+    }
+
+    render () {
+        const { response } = this.state
+
+        const itemsList = []
+
+        for (const [index, item] of response.entries()) {
+            itemsList.push(<li key={index}> {item.name} </li>)
+        }
+
+        return (
+            <div>
+                <h1>{ response.length } items found</h1>
+                <ul>
+                    {itemsList}
+                </ul>
+            </div>
+        )
+    }
+}
+
+export default Logos
+
+// export default () => {
+//     return (
+//         <div>Logos Place holder</div>
+//     )
+// }

src/Product-Types.js

@@ -0,0 +1,48 @@
+import React from 'react'
+
+class ProductTypes extends React.Component {
+    constructor() {
+        super ()
+        this.state= {
+            response: []
+        }
+    }
+
+    componentDidMount () {
+        this.callApi()
+        .then((response) => {
+            this.setState({ response })
+        })
+        .catch(err => console.log(err))
+    }
+
+    callApi = async () => {
+        const response = await fetch('http://localhost:3001/Product-Types')
+        const body = await response.json();
+        if (response.status !== 200) throw Error (body.message);
+
+        return body
+    }
+
+    render () {
+        const { response } = this.state
+
+        const itemsList = []
+
+        for (const [index, item] of response.entries()) {
+            itemsList.push(<li key={index}> {item.name} </li>)
+        }
+
+        return (
+            <div>
+                <h1>{ response.length } items found</h1>
+                <ul>
+                    {itemsList}
+                </ul>
+            </div>
+        )
+    }
+
+}
+
+export default ProductTypes

src/Products.js

@@ -4,13 +4,15 @@ class Products extends React.Component {
     constructor () {
         super()
         this.state = {
-            results: []
+            response: []
         }
     }
 
     componentDidMount() {
         this.callApi()
-        .then(res => this.setState({ response: res.express }))
+        .then((response) => {
+            this.setState({ response })
+        })
         .catch(err => console.log(err));
     }
 
@@ -23,10 +25,20 @@ class Products extends React.Component {
     };
 
     render ()  {
+        const { response } = this.state;
+
+        const itemsList = []
+
+        for (const [index, item] of response.entries()) {
+            itemsList.push(<li key={index}> {item.title} </li>)
+        }
+
         return (
             <div>
-                <div>Products Place holder</div>
-                <div>{this.state.response}</div>
+                <h1>{response.length} items found </h1>
+                <ul>
+                    {itemsList}
+                </ul>
             </div>
         )
     }

src/Stores.js

@@ -0,0 +1,47 @@
+import React from 'react'
+
+class Stores extends React.Component {
+    constructor () {
+        super()
+        this.state = {
+            response: []
+        }
+    }
+
+    componentDidMount () {
+        this.callApi()
+        .then((response) => {
+            this.setState({ response })
+        })
+        .catch(err => console.log(err))
+    }
+
+    callApi = async () => {
+        const response = await fetch('http://localhost:3001/Stores')
+        const body = await response.json();
+        if (response.status !== 200) throw Error (body.message);
+
+        return body
+    }
+
+    render () {
+        const { response } = this.state
+
+        const itemsList = []
+
+        for (const [index, item] of response.entries()) {
+            itemsList.push(<li key={index}> {item.name} </li>)
+        }
+
+        return (
+            <div>
+                <h1>{ response.length } items found</h1>
+                <ul>
+                    {itemsList}
+                </ul>
+            </div>
+        )
+    }
+}
+
+export default Stores