From beafa3900e133421a27ca6f16fba114aecdb2834 Mon Sep 17 00:00:00 2001
From: bytesparallel <jason.ross841@gmail.com>
Date: Tue, 23 Nov 2021 15:27:15 -0600
Subject: [PATCH] completed through ch 7

---
 src/componets/KandyKorner.js         |  3 +++
 src/componets/locations/Locations.js |  5 +----
 src/componets/products/Products.js   | 29 ++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/componets/KandyKorner.js b/src/componets/KandyKorner.js
index 20243f8..da91645 100644
--- a/src/componets/KandyKorner.js
+++ b/src/componets/KandyKorner.js
@@ -1,4 +1,5 @@
 import { LocationsList } from "./locations/Locations"
+import { ProductList } from "./products/Products"
 
 export const KandyKorner = () => {
     return(
@@ -6,6 +7,8 @@ export const KandyKorner = () => {
     <h1>Kandy Korner</h1>
     <h2>Locations</h2>
     <LocationsList />
+    <h2>Products</h2>
+    <ProductList />
     </>
 )
 }
\ No newline at end of file
diff --git a/src/componets/locations/Locations.js b/src/componets/locations/Locations.js
index 9850d82..c1c0d7c 100644
--- a/src/componets/locations/Locations.js
+++ b/src/componets/locations/Locations.js
@@ -1,7 +1,4 @@
-import React, {
-    useEffect,
-    useState
-} from "react";
+import React, {useEffect,useState} from "react";
 
 export const LocationsList = () => {
     const [locations, setLocationList] = useState([])
diff --git a/src/componets/products/Products.js b/src/componets/products/Products.js
index e69de29..569ec49 100644
--- a/src/componets/products/Products.js
+++ b/src/componets/products/Products.js
@@ -0,0 +1,29 @@
+import React, {useEffect,useState} from "react";
+
+export const ProductList = () => {
+    const [products, setProductList] = useState([])
+    const [totalProducts, totalProductAmounts] = useState("")
+
+    useEffect(
+        () => {
+            // table call must be singular in the fetch link in order to properly retrieve objects
+            fetch("http://localhost:8088/products?_expand=productType&_sort=productTypeId&_order=asc")
+                .then(res => res.json())
+                .then(setProductList)
+        },
+        []
+    )
+    return ( 
+         <>
+        <div>{totalProducts}</div>
+        {
+            products.map(
+                (productObject) => {
+                    return <p key={`products--${productObject.id}`}> {productObject.candyName} - Price - ${productObject.price} - Candy Type - {productObject.productType.candyType} </p>;
+                }
+                )
+
+    }
+    </>
+    )
+    }
\ No newline at end of file