diff --git a/src/components/Repairs.js b/src/components/Repairs.js
index 99d0f4b..3d581aa 100644
--- a/src/components/Repairs.js
+++ b/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 = () => {
Employee List
+ Ticket Backlog
+
>
)
}
diff --git a/src/components/ticketList/TicketList.js b/src/components/ticketList/TicketList.js
new file mode 100644
index 0000000..f92fa9f
--- /dev/null
+++ b/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 (
+ <>
+
{totalTicketMessage}
+ {
+
+
+ tickets.map((ticketObject) => {
+
+ return (
+
+
+ -
+
+ Ticket #{ticketObject.id}
+
+
+ Customer Name - {ticketObject.customer.name}
+
+
+ Employee Name - {ticketObject.employee.name}
+
+
+ Issue Description - {ticketObject.description}
+
+
+
+
+ )
+ }
+ )
+
+ }
+
+
+
+ >
+ )
+}
\ No newline at end of file