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