src/components/EmployeesList.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react"
+
+export const EmployeeList = () => {
+    const [employees, changeEmployee] = useState([])
+
+    useEffect(
+        () => {
+            fetch("http://localhost:8088/employees")
+                .then(res => res.json())
+                .then((data) => {
+                    changeEmployee(data)
+                })
+        },
+        []
+    )
+
+    useEffect(() => {
+        /*
+            1. Use .map() to get the specialty of each employee
+            2. Then update a state variable to be a comma-separated string
+                (e.g. "iPhone, Printers, ...")
+        */
+    }, [employees])
+
+    return (
+        <>
+            <div>
+                Specialties:
+            </div>
+            {
+                employees.map(
+                    (employee) => {
+                        return <p key={`employee--${employee.id}`}>{employee.name}</p>
+                    }
+                )
+            }
+        </>
+    )
+}

src/components/Repairs.js

@@ -0,0 +1,20 @@
+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 */
+export const Repairs = () => {
+    /* assignCustomers holds an array of the assigned customers a dependancy/subset of customers. i.e. this is your state variable */
+
+
+/* JSX, returns whatever HTML code you want rendered to the DOM */
+    return (
+        <>
+        <h1>Honey Rae's Repairs</h1>
+        <h2>Customer List</h2>
+        <CustomerList />
+        <h2>Employee List</h2>
+        <EmployeeList />
+        </>
+    )
+}

src/components/customers/CustomerList.js

@@ -0,0 +1,85 @@
+/* import { useEffect, useState } from "react"
+
+
+export const CustomerList = () => {
+/* imports React library */
+
+    /* 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([])
+/* 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(
+        () => {
+            fetch("http://localhost:8088/customers")
+            /* updates application state from permanent state and converts the result to 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) }
+/*                )
+    },
+        []
+    ) 
+/* JSX, returns whatever HTML code you want rendered to the DOM */
+ /*   return (
+        <>
+
+        {
+            /* .map converting items to convert items from an array to HTML */
+ /*           customers.map(
+                (customerObject) => { 
+                    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>
+                    }
+                )
+            }
+        </>
+    )
+}

src/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {Repairs} from './components/Repairs.js'
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Repairs />
   </React.StrictMode>,
   document.getElementById('root')
 );