Luncher/client/src/App.tsx

import React, { useCallback, useContext, useEffect, 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 { useAuth } from './context/auth';
import Login from './Login';
import { Locations, ClientData } from './Types';
import { Alert, Col, Form, Row, Table } from 'react-bootstrap';
import Header from './components/Header';
import './App.css';

const EVENT_CONNECT = "connect"

function App() {
  const auth = useAuth();
  const [isConnected, setIsConnected] = useState<boolean>(false);
  const [data, setData] = useState<ClientData>();
  const [food, setFood] = useState<any>();
  // const [pizzy, setPizzy] = useState();
  const socket = useContext(SocketContext);
  const choiceRef = useRef<HTMLSelectElement>(null);

  // Prvotní načtení aktuálního stavu
  useEffect(() => {
    // getPizzy().then(pizzy => {
    //   setPizzy(pizzy);
    // });
    getData().then(data => {
      setData(data);
    })
    getFood().then(food => {
      setFood(food);
    })
  }, []);

  // Registrace socket eventů
  useEffect(() => {
    socket.on(EVENT_CONNECT, () => {
      // console.log("Connected!");
      setIsConnected(true);
    });
    socket.on(EVENT_DISCONNECT, () => {
      // console.log("Disconnected!");
      setIsConnected(false);
    });
    socket.on(EVENT_MESSAGE, (newData: ClientData) => {
      // const data: any = JSON.parse(payload);
      // console.log("Přijata nová data ze socketu", newData);
      setData(newData);
    });

    return () => {
      socket.off(EVENT_CONNECT);
      socket.off(EVENT_DISCONNECT);
      socket.off(EVENT_MESSAGE);
    }
  }, [socket]);

  useEffect(() => {
    if (!auth || !auth.login) {
      return
    }
    // TODO tohle občas náhodně nezafunguje, nutno přepsat, viz https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
    if (data?.choices && choiceRef.current) {
      for (let entry of Object.entries(data.choices)) {
        if (entry[1].includes(auth.login)) {
          choiceRef.current.value = Object.values(Locations)[entry[0]]
        }
      }
    }
  }, [auth?.login, data?.choices, choiceRef?.current])

  const changeChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
    const index = Object.values(Locations).indexOf(event.target.value as unknown as Locations);
    if (auth?.login) {
      await updateChoice(auth.login, index > -1 ? index : null);
    }
  }

  const renderFoodTable = (name, food) => {
    return <Col md={12} lg={4}>
      <h3>{name}</h3>
      <Table striped bordered hover>
        <tbody>
          {food.map((f: any, index: number) =>
            <tr key={index}>
              <td>{f.amount}</td>
              <td>{f.name}</td>
              <td>{f.price}</td>
            </tr>
          )}
        </tbody>
      </Table>
    </Col>
  }

  if (!auth || !auth.login) {
    return <Login />;
  }

  if (!data || !isConnected || !food) {
    return <div>Načítám data...</div>
  }

  // const pizzaDayExists = data?.state > 0;

  return (
    <>
      <Header />
      <div className='wrapper'>
        {data.isWeekend ? <h4>Užívejte víkend :)</h4> : <>
          <Alert variant={'primary'}>
            Tvé zobrazované jméno je {auth.login}. Změnu můžeš provést v local storage prohlížeče.<br />
            <small>Pro gamer move: Změň si své jméno na cizí. Můžeš pak libovolně měnit jejich volbu.</small>
          </Alert>
          <h1 className='title'>Dnes je {data.date}</h1>
          <Row className='food-tables'>
            {renderFoodTable('Sladovnická', food.sladovnicka)}
            {renderFoodTable('U Motlíků', food.uMotliku)}
            {renderFoodTable('TechTower', food.techTower)}
          </Row>
          <div className='content-wrapper'>
            <div className='content'>
              <p>Jak to dnes vidíš s obědem?</p>
              <Form.Select ref={choiceRef} onChange={changeChoice}>
                <option></option>
                <option value={Locations.SLADOVNICKA}>Sladovnická</option>
                <option value={Locations.UMOTLIKU}>U Motlíků</option>
                <option value={Locations.TECHTOWER}>TechTower</option>
                <option value={Locations.SPSE}>SPŠE</option>
                <option value={Locations.VLASTNI}>Mám vlastní</option>
                <option value={Locations.OBJEDNAVAM}>Budu objednávat</option>
                <option value={Locations.NEOBEDVAM}>Nebudu obědvat</option>
              </Form.Select>
              <p style={{ fontSize: "12px", marginTop: "5px" }}>
                Aktuálně je možné vybrat pouze jednu variantu. Vyber prázdnou položku pro odstranění.
              </p>
              {Object.keys(data.choices).length > 0 ?
                <Table striped bordered hover className='results-table mt-5'>
                  <tbody>
                    {Object.keys(data.choices).map((key: string, index: number) =>
                      <tr key={index}>
                        <td>{Object.values(Locations)[Number(key)]}</td>
                        <td>
                          <ul>
                            {data.choices[Number(key)].map((p: string, index: number) => <li key={index}>{p}</li>)}
                          </ul>
                        </td>
                      </tr>
                    )}
                  </tbody>
                </Table>
                : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
              }
            </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>
    </>
  );
}

export default App;