From 2e9496752fece391954783f4e0d51f5475d672cf Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 18 Nov 2021 15:53:13 -0600 Subject: [PATCH 1/5] adding TicketList component --- src/components/ticketList/TicketList.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/ticketList/TicketList.js diff --git a/src/components/ticketList/TicketList.js b/src/components/ticketList/TicketList.js new file mode 100644 index 0000000..e69de29 -- 2.47.3 From a3270a8941d2732d67246498ab78668508ac2786 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Fri, 19 Nov 2021 10:25:33 -0600 Subject: [PATCH 2/5] added ticketList barebones --- src/components/ticketList/TicketList.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/ticketList/TicketList.js b/src/components/ticketList/TicketList.js index e69de29..5717079 100644 --- a/src/components/ticketList/TicketList.js +++ b/src/components/ticketList/TicketList.js @@ -0,0 +1,18 @@ +import React, { useEffect, useState } from "react" + +export const TicketList = () => { + const [tickets, setTicketList] = useState([]) + + useEffect( + () => { + + }, + [] + ) + + return ( + <> + + + ) +} -- 2.47.3 From 2d20a2182b00eb6b45b2e02a2f1be309f02bc88e Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Fri, 19 Nov 2021 10:53:55 -0600 Subject: [PATCH 3/5] completed draft code on ticketList --- src/components/ticketList/TicketList.js | 39 ++++++++++++++++++++++--- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/src/components/ticketList/TicketList.js b/src/components/ticketList/TicketList.js index 5717079..ea051ba 100644 --- a/src/components/ticketList/TicketList.js +++ b/src/components/ticketList/TicketList.js @@ -1,18 +1,49 @@ -import React, { useEffect, useState } from "react" +import React, { + useEffect, + useState +} from "react" export const TicketList = () => { const [tickets, setTicketList] = useState([]) + const [totalTicketMessage, updateTotalTicketMessage] = useState("") useEffect( () => { + fetch("http:localhost:8088/serviceTickets") + .then(res => res.json()) + .then((data) => { + setTicketList(data) + }) }, [] ) - return ( - <> + useEffect( + () => { + updateTotalTicketMessage(`You have ${tickets.length} customers.`) + }, + [tickets] + ) + + return ( + <> + < + div > { + totalTicketMessage + } { + tickets.map( + (ticketObject) => { + return

+

    {ticketObject.description} +

+ } + ) + + } + + ) -} +} \ No newline at end of file -- 2.47.3 From 584edc05457d7ebdbe2c1834cf801274223ee7e0 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Fri, 19 Nov 2021 11:30:03 -0600 Subject: [PATCH 4/5] Working on number of tickets to display correctly and to correctly have the ticket properties displaying. --- src/components/Repairs.js | 3 ++ src/components/ticketList/TicketList.js | 41 ++++++++++++++----------- 2 files changed, 26 insertions(+), 18 deletions(-) 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 index ea051ba..5be61b5 100644 --- a/src/components/ticketList/TicketList.js +++ b/src/components/ticketList/TicketList.js @@ -1,7 +1,4 @@ -import React, { - useEffect, - useState -} from "react" +import React, {useEffect, useState} from "react" export const TicketList = () => { const [tickets, setTicketList] = useState([]) @@ -9,10 +6,10 @@ export const TicketList = () => { useEffect( () => { - fetch("http:localhost:8088/serviceTickets") - .then(res => res.json()) - .then((data) => { - setTicketList(data) + fetch("http:localhost:8088/serviceTickets?_expand=employee&_expand=customer") + .then(response => response.json()) + .then((data1) => { + setTicketList(data1) }) }, @@ -21,22 +18,30 @@ export const TicketList = () => { useEffect( () => { - updateTotalTicketMessage(`You have ${tickets.length} customers.`) + updateTotalTicketMessage(`You have ${tickets.length} tickets in the backlog.`) }, [tickets] ) return ( <> - < - div > { - totalTicketMessage - } { - tickets.map( - (ticketObject) => { - return

-

    {ticketObject.description} -

+
{totalTicketMessage}
+ { + + + tickets.map((ticketObject) => { + + return ( +
+

+

    +
  • + {ticketObject.description} +
    • +
+

+
+ ) } ) -- 2.47.3 From 1cdfca7883d58467bd457de3157637acab3b8bd3 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Fri, 19 Nov 2021 13:31:29 -0600 Subject: [PATCH 5/5] completed ch 7 --- src/components/ticketList/TicketList.js | 27 ++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/ticketList/TicketList.js b/src/components/ticketList/TicketList.js index 5be61b5..f92fa9f 100644 --- a/src/components/ticketList/TicketList.js +++ b/src/components/ticketList/TicketList.js @@ -6,7 +6,7 @@ export const TicketList = () => { useEffect( () => { - fetch("http:localhost:8088/serviceTickets?_expand=employee&_expand=customer") + fetch("http://localhost:8088/serviceTickets?_expand=employee&_expand=customer") .then(response => response.json()) .then((data1) => { setTicketList(data1) @@ -18,14 +18,14 @@ export const TicketList = () => { useEffect( () => { - updateTotalTicketMessage(`You have ${tickets.length} tickets in the backlog.`) + updateTotalTicketMessage(`You have ${tickets.length} tickets in the queue.`) }, [tickets] ) return ( <> -
{totalTicketMessage}
+

{totalTicketMessage}

{ @@ -33,13 +33,22 @@ export const TicketList = () => { return (
+
    +
  • +

    + Ticket #{ticketObject.id} +

    +

    + Customer Name - {ticketObject.customer.name} +

    +

    + Employee Name - {ticketObject.employee.name} +

    -

      -
    • - {ticketObject.description} -
      • -
    + Issue Description - {ticketObject.description}

    +
    • +
) } @@ -49,6 +58,6 @@ export const TicketList = () => { - + ) } \ No newline at end of file -- 2.47.3