Základní funkčnost Pizza Day

client/src/App.tsx

@@ -1,10 +1,10 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { EVENT_DISCONNECT, EVENT_MESSAGE, SocketContext } from './context/socket';
-import { addPizza, createPizzaDay, deletePizzaDay, getData, getFood, getPizzy, updateChoice } from './Api';
+import { addPizza, createPizzaDay, deletePizzaDay, getData, getFood, getPizzy, removePizza, updateChoice } from './Api';
 import { useAuth } from './context/auth';
 import Login from './Login';
-import { Locations, ClientData, Pizza } from './Types';
+import { Locations, ClientData, Pizza, PizzaOrder } from './Types';
 import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
 import Header from './components/Header';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -99,29 +99,33 @@ function App() {
     }
     const suggestions: SelectSearchOption[] = [];
     pizzy.forEach((pizza, index) => {
+      const group: SelectSearchOption = { name: pizza.name, type: "group", items: [] }
       pizza.sizes.forEach((size, sizeIndex) => {
-        const name = `${pizza.name}, ${size.size} (${size.price} Kč)`;
+        const name = `${size.size} (${size.price} Kč)`;
         const value = `${index}|${sizeIndex}`;
-        suggestions.push({ name, value });
+        group.items?.push({ name, value });
       })
+      suggestions.push(group);
     })
     return suggestions;
   }, [pizzy]);
 
   const handlePizzaChange = async (value) => {
-    console.log("Pizza vybrána", value);
     if (auth?.login && pizzy) {
       const s = value.split('|');
       const pizzaIndex = Number.parseInt(s[0]);
       const pizzaSizeIndex = Number.parseInt(s[1]);
       const pizza = pizzy[pizzaIndex];
-      const size = pizza.sizes[pizzaSizeIndex];
-      // TODO smazat
-      console.log("Vybraná pizza a velikost", pizza, size);
       await addPizza(auth.login, pizzaIndex, pizzaSizeIndex);
     }
   }
 
+  const handlePizzaDelete = (pizzaOrder: PizzaOrder) => {
+    if (auth?.login) {
+      removePizza(auth?.login, pizzaOrder);
+    }
+  }
+
   const renderFoodTable = (name, food) => {
     return <Col md={12} lg={4}>
       <h3>{name}</h3>
@@ -200,29 +204,35 @@ function App() {
                 : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
               }
             </div>
-            {!data.pizzaDay &&
-              <div>
-                <p>Pro dnešní den není aktuálně založen Pizza day.</p>
-                <Button onClick={async () => {
-                  await createPizzaDay(auth.login);
-                }}>Založit Pizza day</Button>
-              </div>
-            }
-            {data.pizzaDay && <div>
-              <p>Pizza Day je založen uživatelem {data.pizzaDay.creator}</p>
-              {
-                data.pizzaDay.creator === auth.login && <Button className='danger mb-3' onClick={async () => {
-                  await deletePizzaDay(auth.login);
-                }}>Smazat Pizza day</Button>
+            <div className='mt-5'>
+              {!data.pizzaDay &&
+                <div style={{ textAlign: 'center' }}>
+                  <p>Pro dnešní den není aktuálně založen Pizza day.</p>
+                  <Button onClick={async () => {
+                    await createPizzaDay(auth.login);
+                  }}>Založit Pizza day</Button>
+                </div>
               }
-              <SelectSearch
-                search={true}
-                options={pizzaSuggestions}
-                placeholder='Vyhledat pizzu...'
-                onChange={handlePizzaChange}
-              />
-              <PizzaOrderList orders={data.pizzaDay.orders} />
-            </div>}
+              {data.pizzaDay &&
+                <div>
+                  <div style={{ textAlign: 'center' }}>
+                    <p>Pizza Day je založen uživatelem {data.pizzaDay.creator}</p>
+                    {
+                      data.pizzaDay.creator === auth.login && <Button className='danger mb-3' onClick={async () => {
+                        await deletePizzaDay(auth.login);
+                      }}>Smazat Pizza day</Button>
+                    }
+                  </div>
+                  <SelectSearch
+                    search={true}
+                    options={pizzaSuggestions}
+                    placeholder='Vyhledat pizzu...'
+                    onChange={handlePizzaChange}
+                  />
+                  <PizzaOrderList orders={data.pizzaDay.orders} onDelete={handlePizzaDelete} />
+                </div>
+              }
+            </div>
           </div>
         </>}
       </div>