Předvyplnění posledně zvolené hodnoty

README.md

@@ -7,6 +7,7 @@ Server je v adresáři /server, client v adresáři /client obojí lze spustit p
 ### `yarn start`
 
 ## TODO
+- Minimálně v klientovi nefunguje správně eslint - neřve, když chybí závislosti v useEffect
 - Popsat Food API, nginx
 - Popsat spuštění pro vývoj
 - Vyndat URL na Food API do .env

client/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+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';
@@ -18,6 +18,7 @@ function App() {
   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(() => {
@@ -55,6 +56,20 @@ function App() {
     }
   }, [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) {
@@ -107,7 +122,7 @@ function App() {
           <div className='content-wrapper'>
             <div className='content'>
               <p>Jak to dnes vidíš s obědem?</p>
-              <Form.Select onChange={changeChoice}>
+              <Form.Select ref={choiceRef} onChange={changeChoice}>
                 <option></option>
                 <option value={Locations.SLADOVNICKA}>Sladovnická</option>
                 <option value={Locations.UMOTLIKU}>U Motlíků</option>