diff --git a/petclinic-frontend/src/features/bills/BillsListTable.tsx b/petclinic-frontend/src/features/bills/BillsListTable.tsx index 6c910e426d..73a49f032e 100644 --- a/petclinic-frontend/src/features/bills/BillsListTable.tsx +++ b/petclinic-frontend/src/features/bills/BillsListTable.tsx @@ -3,102 +3,108 @@ import { Bill } from '@/features/bills/models/Bill.ts'; import { useUser } from '@/context/UserContext'; export default function BillsListTable(): JSX.Element { - const { user } = useUser(); - const [bills, setBills] = useState([]); - const [error, setError] = useState(null); + const { user } = useUser(); + const [bills, setBills] = useState([]); + const [error, setError] = useState(null); - useEffect(() => { - if (!user.userId) return; + useEffect(() => { + if (!user.userId) return; + const fetchBills = async (): Promise => { + try { + const response = await fetch( + `http://localhost:8080/api/gateway/bills/customer/${user.userId}`, + { + headers: { + Accept: 'text/event-stream', + }, + credentials: 'include', + } + ); - const fetchBills = async () => { - try { - const response = await fetch(`http://localhost:8080/api/gateway/bills/customer/${user.userId}`, { - headers: { - 'Accept': 'text/event-stream', - }, - credentials: "include", - }); + if (!response.ok) { + throw new Error(`Error: ${response.status} ${response.statusText}`); + } - if (!response.ok) { - throw new Error(`Error: ${response.status} ${response.statusText}`); - } - - const reader = response.body?.getReader(); - const decoder = new TextDecoder('utf-8'); + const reader = response.body?.getReader(); + const decoder = new TextDecoder('utf-8'); - let done = false; - let billsArray: Bill[] = []; + let done = false; + const billsArray: Bill[] = []; - while (!done) { - const { value, done: streamDone } = await reader?.read() || {}; - done = streamDone || true; + while (!done) { + const { value, done: streamDone } = (await reader?.read()) || {}; + done = streamDone || true; - if (value) { - const chunk = decoder.decode(value, { stream: true }); + if (value) { + const chunk = decoder.decode(value, { stream: true }); - const formattedChunks = chunk.trim().split(/\n\n/); + const formattedChunks = chunk.trim().split(/\n\n/); - formattedChunks.forEach(formattedChunk => { - const cleanChunk = formattedChunk.trim().replace(/^data:\s*/, ''); + formattedChunks.forEach(formattedChunk => { + const cleanChunk = formattedChunk.trim().replace(/^data:\s*/, ''); - if (cleanChunk) { - try { - const newBill: Bill = JSON.parse(cleanChunk); - billsArray.push(newBill); - setBills([...billsArray]); - } catch (e) { - console.error('Error parsing chunk:', e); - } - } - }); - } + if (cleanChunk) { + try { + const newBill: Bill = JSON.parse(cleanChunk); + billsArray.push(newBill); + setBills([...billsArray]); + } catch (e) { + console.error('Error parsing chunk:', e); } - } catch (err) { - console.error('Error fetching bills:', err); - setError('Failed to fetch bills'); - } - }; + } + }); + } + } + } catch (err) { + console.error('Error fetching bills:', err); + setError('Failed to fetch bills'); + } + }; - fetchBills(); - }, [user.userId]); + fetchBills(); + }, [user.userId]); - return ( -
- {error ? ( -

{error}

- ) : ( - - - - - - - - - - - - - - - - {bills.map((bill) => ( - - - - - - - - - - - - ))} - -
Bill IDOwner NameVisit TypeVet NameDateAmountTaxed AmountStatusDue Date
{bill.billId}{bill.ownerFirstName} {bill.ownerLastName}{bill.visitType}{bill.vetFirstName} {bill.vetLastName}{bill.date}{bill.amount}{bill.taxedAmount}{bill.billStatus}{bill.dueDate}
- )} -
- ); -} \ No newline at end of file + return ( +
+ {error ? ( +

{error}

+ ) : ( + + + + + + + + + + + + + + + + {bills.map(bill => ( + + + + + + + + + + + + ))} + +
Bill IDOwner NameVisit TypeVet NameDateAmountTaxed AmountStatusDue Date
{bill.billId} + {bill.ownerFirstName} {bill.ownerLastName} + {bill.visitType} + {bill.vetFirstName} {bill.vetLastName} + {bill.date}{bill.amount}{bill.taxedAmount}{bill.billStatus}{bill.dueDate}
+ )} +
+ ); +} diff --git a/petclinic-frontend/src/features/bills/models/Bill.ts b/petclinic-frontend/src/features/bills/models/Bill.ts index 7dd0f35a77..dbccfb8402 100644 --- a/petclinic-frontend/src/features/bills/models/Bill.ts +++ b/petclinic-frontend/src/features/bills/models/Bill.ts @@ -1,15 +1,15 @@ export interface Bill { - billId: string; - customerId: string; - ownerFirstName: string; - ownerLastName: string; - visitType: string; - vetId: string; - vetFirstName: string; - vetLastName: string; - date: string; - amount: number; - taxedAmount: number; - billStatus: string; - dueDate: string; -} \ No newline at end of file + billId: string; + customerId: string; + ownerFirstName: string; + ownerLastName: string; + visitType: string; + vetId: string; + vetFirstName: string; + vetLastName: string; + date: string; + amount: number; + taxedAmount: number; + billStatus: string; + dueDate: string; +} diff --git a/petclinic-frontend/src/layouts/AppNavBar.tsx b/petclinic-frontend/src/layouts/AppNavBar.tsx index 9af8bf75af..2ade0eeb9b 100644 --- a/petclinic-frontend/src/layouts/AppNavBar.tsx +++ b/petclinic-frontend/src/layouts/AppNavBar.tsx @@ -5,126 +5,129 @@ import { AppRoutePaths } from '@/shared/models/path.routes.ts'; import './AppNavBar.css'; export function NavBar(): JSX.Element { - const { user } = useUser(); - const navigate = useNavigate(); + const { user } = useUser(); + const navigate = useNavigate(); - const logoutUser = (): void => { - axiosInstance.post(axiosInstance.defaults.baseURL + 'logout').then(() => { - navigate(AppRoutePaths.login); - localStorage.removeItem('username'); - localStorage.removeItem('email'); - localStorage.removeItem('UUID'); - localStorage.removeItem('roles'); - }); - }; + const logoutUser = (): void => { + axiosInstance.post(axiosInstance.defaults.baseURL + 'logout').then(() => { + navigate(AppRoutePaths.login); + localStorage.removeItem('username'); + localStorage.removeItem('email'); + localStorage.removeItem('UUID'); + localStorage.removeItem('roles'); + }); + }; - const customerBillsUrl = AppRoutePaths.CustomerBills.replace(':userId', user.userId); + const customerBillsUrl = AppRoutePaths.CustomerBills.replace( + ':userId', + user.userId + ); - return ( - + ); }