Přechody mezi stavy Pizza Day

client/src/components/PizzaOrderList.tsx

@@ -1,19 +1,23 @@
 import React from "react";
 import { Table } from "react-bootstrap";
-import { Order, PizzaOrder } from "../Types";
+import { Order, PizzaOrder, State } 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 }) {
+export default function PizzaOrderList({ state, orders, onDelete }: { state: State, orders: Order[], onDelete: (pizzaOrder: PizzaOrder) => void }) {
     const auth = useAuth();
 
+    if (!orders?.length) {
+        return <p><i>Zatím žádné objednávky...</i></p>
+    }
+
     return <Table className="mt-3" striped bordered hover>
         <thead>
             <tr>
                 <th>Jméno</th>
                 <th>Objednávka</th>
-                <th>Celkem</th>
+                <th>Cena</th>
             </tr>
         </thead>
         <tbody>
@@ -22,13 +26,13 @@ export default function PizzaOrderList({ orders, onDelete }: { orders: Order[],
                 <td>{order.pizzaList.map<React.ReactNode>((pizzaOrder, index) =>
                     <span key={index}>
                         {`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price} Kč)`}
-                        {auth?.login === order.customer &&
+                        {auth?.login === order.customer && state === State.CREATED &&
                             <FontAwesomeIcon onClick={() => {
                                 onDelete(pizzaOrder);
                             }} title='Odstranit' className='trash-icon' icon={faTrashCan} />
                         }
                     </span>)
-                    .reduce((prev, curr) => [prev, <br />, curr])}
+                    .reduce((prev, curr, index) => [prev, <br key={`br-${index}`} />, curr])}
                 </td>
                 <td>{order.totalPrice} Kč</td>
             </tr>)}