saving progress up to chapter 6

src/components/EmployeesList.js

@@ -0,0 +1,33 @@
+import React from "react"
+import {
+    useEffect,
+    useState
+} from "react"
+
+export const EmployeeList = () => {
+    const [employees, setEmployees] = useState([])
+
+    useEffect(
+            () => {
+                
+                    fetch("http://localhost:8088/employees")
+                        /* updates application state from permanent state and converts the result to JSON */
+                        .then(res => res.json())
+                        /* passes the employees state variable to the .then function as a parameter and then calls that parameter in the assignCustomers function to change application state */
+                        .then((employees) => {
+                            setEmployees(employees)
+                        })
+                }, 
+                []
+            )
+                return(
+                <> 
+                {
+            /* .map converting items to convert items from an array to HTML */
+            employees.map(
+                (employeeObject) => {
+                    return <div > <p key = {`customer--${employeeObject.id}`} > {employeeObject.name} </p></div >
+                }
+            )
+        } </> )
+}

src/components/Repairs.js

@@ -1,4 +1,5 @@
 import { CustomerList } from "./customers/CustomerList"
+import { EmployeeList } from "./EmployeesList"
 
 /* State is stored directly in the application file */
 /* const [customers, assignCustomers] is called a deconstruction array */
@@ -9,8 +10,11 @@ export const Repairs = () => {
 /* JSX, returns whatever HTML code you want rendered to the DOM */
     return (
         <>
-        <h1>Honey Rae's Repair Shop</h1>
+        <h1>Honey Rae's Repairs</h1>
+        <h2>Customer List</h2>
         <CustomerList />
+        <h2>Employee List</h2>
+        <EmployeeList />
         </>
     )
 }

src/components/customers/CustomerList.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+/* import { useEffect, useState } from "react"
 
 
 export const CustomerList = () => {
@@ -7,39 +7,79 @@ export const CustomerList = () => {
     /* assignCustomers holds an array of the assigned customers a dependancy/subset of customers. i.e. this is your state variable */
     /* State is stored directly in the application file */
 /* const [customers, assignCustomers] is called a deconstruction array */
-    const [customers, setCustomers] = useState([])
+/*    const [customers, setCustomers] = useState([])
 /* Once the customers array is retrieved, it needs to end up inside of the state variable "customers" */
 /* assignCustomers must be invoked to set the value of customers */
 /* customerArray => {
     customers = customerArray
 }
 This is not allowed in React, even if it works in vanilla JS. */
-    useEffect(
+/*    useEffect(
         () => {
             fetch("http://localhost:8088/customers")
             /* updates application state from permanent state and converts the result to JSON */
-                .then(res => res.json())
+  /*              .then(res => res.json())
                 /* passes the customers state variable to the .then function as a parameter and then calls that parameter in the assignCustomers function to change application state */
-                .then((customers) => { 
-                    setCustomers(customers) }
-                )
+//                .then((customers) => { 
+  //                  setCustomers(customers) }
+/*                )
     },
         []
-    )
+    ) 
 /* JSX, returns whatever HTML code you want rendered to the DOM */
-    return (
+ /*   return (
         <>
-        <h1>Honey Rae's Repair Shop</h1>
 
         {
             /* .map converting items to convert items from an array to HTML */
-            customers.map(
+ /*           customers.map(
                 (customerObject) => { 
-                    return <h2 key={`customer--${customerObject.id}`}>(customerObject.name)</h2>
+                    return <div><p key={`customer--${customerObject.id}`}>{customerObject.name}</p></div>
                 }
             )
         }
         </>
     )
-}
+} 
+ */
 
+
+import React, { useEffect, useState } from "react"
+
+export const CustomerList = () => {
+    // useEffect runs when the state is set by setting it to an empty array
+    const [customers, setCustomers] = useState([])
+    // totalCustomerMessage is the state variable holding an array of all the customers
+    const [totalCustomerMessage, updateMessage] = useState("")
+
+    useEffect(
+        () => {
+            fetch("http://localhost:8088/customers")
+                .then(res => res.json())
+                .then((data) => {
+                    setCustomers(data)
+                })
+        },
+        []
+    )
+// This useEffect runs only when the state of customers changes
+    useEffect(
+        () => {
+            updateMessage(`You have ${customers.length} customers.`)
+        },
+        [customers]
+    )
+
+    return (
+        <>
+        <div>{totalCustomerMessage}</div>
+            {
+                customers.slice(0,5).map(
+                    (customerObject) => {
+                        return <p key={`customer--${customerObject.id}`}>{customerObject.name}</p>
+                    }
+                )
+            }
+        </>
+    )
+}