Příprava Pizza Day

client/src/App.tsx

@@ -1,15 +1,20 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+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 { getData, getFood, updateChoice } from './Api';
+import { createPizzaDay, deletePizzaDay, getData, getFood, getPizzy, updateChoice } from './Api';
 import { useAuth } from './context/auth';
 import Login from './Login';
-import { Locations, ClientData } from './Types';
-import { Alert, Col, Form, Row, Table } from 'react-bootstrap';
+import { Locations, ClientData, Pizza } from './Types';
+import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
 import Header from './components/Header';
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import PizzaOrderList from './components/PizzaOrderList';
+import SelectSearch from 'react-select-search';
+import 'react-select-search/style.css';
 import './App.css';
+import { SelectSearchOption } from 'react-select-search';
+
 
 const EVENT_CONNECT = "connect"
 
@@ -18,15 +23,15 @@ function App() {
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [data, setData] = useState<ClientData>();
   const [food, setFood] = useState<any>();
-  // const [pizzy, setPizzy] = useState();
+  const [pizzy, setPizzy] = useState<Pizza[]>();
   const socket = useContext(SocketContext);
   const choiceRef = useRef<HTMLSelectElement>(null);
 
   // Prvotní načtení aktuálního stavu
   useEffect(() => {
-    // getPizzy().then(pizzy => {
-    //   setPizzy(pizzy);
-    // });
+    getPizzy().then(pizzy => {
+      setPizzy(pizzy);
+    });
     getData().then(data => {
       setData(data);
     })
@@ -88,6 +93,31 @@ function App() {
     }
   }
 
+  const pizzaSuggestions = useMemo(() => {
+    if (!pizzy) {
+      return [];
+    }
+    const suggestions: SelectSearchOption[] = [];
+    pizzy.forEach((pizza, index) => {
+      pizza.sizes.forEach((size, sizeIndex) => {
+        const name = `${pizza.name}, ${size.size} (${size.price} Kč)`;
+        const value = `${index}|${sizeIndex}`;
+        suggestions.push({ name, value });
+      })
+    })
+    return suggestions;
+  }, [pizzy]);
+
+  const handlePizzaChange = (value) => {
+    console.log("Pizza vybrána", value);
+    if (pizzy) {
+      const s = value.split('|');
+      const pizza = pizzy[Number.parseInt(s[0])];
+      const size = pizza.sizes[Number.parseInt(s[1])];
+      console.log("Vybraná pizza a velikost", pizza, size);
+    }
+  }
+
   const renderFoodTable = (name, food) => {
     return <Col md={12} lg={4}>
       <h3>{name}</h3>
@@ -113,8 +143,6 @@ function App() {
     return <div>Načítám data...</div>
   }
 
-  // const pizzaDayExists = data?.state > 0;
-
   return (
     <>
       <Header />
@@ -168,26 +196,31 @@ 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' onClick={async () => {
+                  await deletePizzaDay(auth.login);
+                }}>Smazat Pizza day</Button>
+              }
+              <SelectSearch
+                search={true}
+                options={pizzaSuggestions}
+                placeholder='Vyhledat pizzu...'
+                onChange={handlePizzaChange}
+              />
+              <PizzaOrderList orders={data.pizzaDay.orders} />
+            </div>} */}
           </div>
         </>}
-        {/* {!pizzaDayExists &&
-        <div>
-          <p>Pro dnešní den není aktuálně založen Pizza day.</p>
-          <Button onClick={async () => {
-            await createPizzaDay();
-          }}>Založit Pizza day</Button>
-        </div>
-      }
-      {pizzaDayExists && <div>
-        <Button className='danger' onClick={async () => {
-          await deletePizzaDay();
-        }}>Smazat Pizza day</Button>
-        <OrderList orders={data.orders} />
-      </div>} */}
-        {/* <Button onClick={async () => {
-          const pizzy = await getPizzy();
-          console.log("Výsledek", pizzy);
-        }}>Získat pizzy</Button> */}
       </div>
     </>
   );