src/components/Repairs.js

@@ -1,5 +1,6 @@
 import { CustomerList } from "./customers/CustomerList"
 import { EmployeeList } from "./EmployeesList"
+import { TicketList } from "./ticketList/TicketList"
 
 /* State is stored directly in the application file */
 /* const [customers, assignCustomers] is called a deconstruction array */
@@ -15,6 +16,8 @@ export const Repairs = () => {
         <CustomerList />
         <h2>Employee List</h2>
         <EmployeeList />
+        <h2> Ticket Backlog</h2>
+        <TicketList />
         </>
     )
 }

src/components/ticketList/TicketList.js

@@ -0,0 +1,63 @@
+import React, {useEffect, useState} from "react"
+
+export const TicketList = () => {
+    const [tickets, setTicketList] = useState([])
+    const [totalTicketMessage, updateTotalTicketMessage] = useState("")
+
+    useEffect(
+        () => {
+            fetch("http://localhost:8088/serviceTickets?_expand=employee&_expand=customer")
+                .then(response => response.json())
+                .then((data1) => {
+                    setTicketList(data1)
+                })
+
+        },
+        []
+    )
+
+    useEffect(
+        () => {
+            updateTotalTicketMessage(`You have ${tickets.length} tickets in the queue.`)
+        },
+        [tickets]
+    )
+
+    return ( 
+    <>
+        <div> <h3>{totalTicketMessage} </h3></div> 
+        {
+            
+    
+        tickets.map((ticketObject) => {
+
+                return (
+                <div>
+                <ul>
+                  <li>
+                  <p key = {`ticket--${ticketObject.id}`}>
+                      Ticket #{ticketObject.id}
+                      </p>
+                    <p key = {`ticket--${ticketObject.id}`}>
+                    Customer Name - {ticketObject.customer.name}
+                    </p>
+                    <p key = {`ticket--${ticketObject.id}`}>
+                        Employee Name - {ticketObject.employee.name}
+                    </p>
+                <p key = {`ticket--${ticketObject.id}`}>
+                    Issue Description - {ticketObject.description}
+                </p>
+                </li>
+                </ul>
+                </div>
+                )
+                }
+        )
+        
+    }
+
+
+
+    </>
+    )
+}