diff --git a/client/src/App.tsx b/client/src/App.tsx index 3dfb51d..86925d3 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -63,13 +63,15 @@ function App() { const settings = useSettings(); const navigate = useNavigate(); const [easterEgg, _] = useEasterEgg(auth); - const [isConnected, setIsConnected] = useState(false); + const socket = useContext(SocketContext); + // Socket je singleton mimo React, takže při návratu v historii prohlížeče (remount + // komponenty) už žádný "connect" event nepřijde - stav proto inicializujeme z něj + const [isConnected, setIsConnected] = useState(() => socket.connected); const [data, setData] = useState(); const [food, setFood] = useState(); const [myOrder, setMyOrder] = useState(); const [foodChoiceList, setFoodChoiceList] = useState(); const [closed, setClosed] = useState(false); - const socket = useContext(SocketContext); const choiceRef = useRef(null); const foodChoiceRef = useRef(null); const departureChoiceRef = useRef(null); @@ -121,6 +123,8 @@ function App() { // Registrace socket eventů useEffect(() => { + // Srovnání se skutečným stavem socketu (mohl se změnit mezi renderem a efektem) + setIsConnected(socket.connected); socket.on(EVENT_CONNECT, () => { setIsConnected(true); });