Základní funkčnost Pizza Day

client/src/components/PizzaOrderList.tsx

@@ -1,21 +1,36 @@
 import React from "react";
 import { Table } from "react-bootstrap";
-import { Order } from "../Types";
+import { Order, PizzaOrder } from "../Types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
+import { useAuth } from "../context/auth";
+
+export default function PizzaOrderList({ orders, onDelete }: { orders: Order[], onDelete: (pizzaOrder: PizzaOrder) => void }) {
+    const auth = useAuth();
 
-export default function PizzaOrderList({ orders }: { orders: Order[] }) {
     return <Table className="mt-3" striped bordered hover>
         <thead>
             <tr>
-                <th>Pizza</th>
                 <th>Jméno</th>
-                <th>Cena (Kč)</th>
+                <th>Objednávka</th>
+                <th>Celkem</th>
             </tr>
         </thead>
         <tbody>
-            {orders.map(order => <tr>
-                <td>{order.pizzaList[0].name}</td>
+            {orders.map(order => <tr key={order.customer}>
                 <td>{order.customer}</td>
-                <td>{order.totalPrice}</td>
+                <td>{order.pizzaList.map<React.ReactNode>((pizzaOrder, index) =>
+                    <span key={index}>
+                        {`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price} Kč)`}
+                        {auth?.login === order.customer &&
+                            <FontAwesomeIcon onClick={() => {
+                                onDelete(pizzaOrder);
+                            }} title='Odstranit' className='trash-icon' icon={faTrashCan} />
+                        }
+                    </span>)
+                    .reduce((prev, curr) => [prev, <br />, curr])}
+                </td>
+                <td>{order.totalPrice} Kč</td>
             </tr>)}
         </tbody>
     </Table>