LeviExpress – fix typos, drobné opravy zadání

daweb/react/leviexpress-1/cvlekce/potvrzeni-rezervace/exercise.md

@@ -31,7 +31,7 @@ Nyn již máme ve stavu `journey` uložené všechny potřebné informace k tomu
 
 1. Volání tohoto API vrací JSON s daty, ze kterých nás bude zajímat hodnota `reservationId`. Vypište si ji do konzole.
 1. Podle [dokumentace](https://reactrouter.com/en/main/hooks/use-navigate) React Routeru se podívejte, jak lze pomocí hooku `useNavigate` přímo v kódu změnit stránku, na které se uživatel nachází. Tedy jak uživatele navigovat na novou adresu a stránku.
-1. Na začátku komponenty `HomePage` vytvořte proměnnou `navigate` s použitím hooku `useNavigate()`, nezapomeňte hook naimportovat z `react-router-dom`. Za moment tuto proměnnou použijeme.
+1. Na začátku komponenty `HomePage` vytvořte proměnnou `navigate` (bude to funkce) s použitím hooku `useNavigate()`, nezapomeňte hook naimportovat z `react-router-dom`.
 1. Pomocí funkce `navigate` a hodnoty `reservationId` přesměrujte uživatele na stránku detailu rezervace. Takové volání bude může vypadat následovně:
    ```js
    navigate(`/reservation/${reservationId}`);

daweb/react/leviexpress-1/cvlekce/udaje-o-ceste/exercise.md

@@ -14,5 +14,5 @@ Ve svém projektu již máte vytvořen základ komponenty s názvem `JourneyPick
 1. Napojte funkci `handleSubmit` na událost submit ve formuláři. Ověřte v prohlížeči, že po kliknutí na _Vyhledat spoj_ se v konzoli objeví výše uvedený text.
 1. Pomocí `useState` si v komponentě připravte tři stavy: `fromCity`, `toCity` a `date`. Výchozí hodnotou bude ve všech třech případech prázdný řetězec `''`;
 1. Napojte každý ze stavů na správný `<select>` tak, aby `select` zobrazoval vybraný stav a změna v `select`u se promítla do stavu. Vytvoříte tedy dvoucestný databinding, kdy se např. stav `fromCity` bude promítat do `value` příslušného `select`u, a při události `onChange` na `select`u se nová hodnota zapíše do stavu `fromCity`. Obdobně i pro další dva `select`y a stavy `toCity` a `date`.
-1. Upravte funkci `handleSubmit` tak, aby do konzole vypsala všechny tři stavy. Vyzkoušejte, že výběrem stavu v `select`u se změní stav – po kliknutí na tlačítko se do konzole vypíše změněný stav. Tím, že si dočasně změnít výchozí hodnotu v `useState('')` na některou z hodnot (atribut `value`) v `<option>` můžete ověřit, že funguje správně nastavení výchozího stavu `select`u.
+1. Upravte funkci `handleSubmit` tak, aby do konzole vypsala všechny tři stavy. Vyzkoušejte, že výběrem stavu v `select`u se změní stav – po kliknutí na tlačítko se do konzole vypíše změněný stav. Tím, že si dočasně změníte výchozí hodnotu v `useState('')` na některou z hodnot (atribut `value`) v `<option>` můžete ověřit, že funguje správně nastavení výchozího stavu `select`u.
 1. Commitněte změny.

daweb/react/leviexpress-1/cvlekce/vyhledat-spoj.md

@@ -17,7 +17,7 @@ V tomto cvičení dokončíte komponentu pro vyhledání spojení. V komponentě
 
 1. Volání tohoto API vrací JSON s nalezenými spoji. Vypište si výsledek volání do konzole prohlížeče.
 1. Nalezená spojení budeme potřebovat zobrazit v další komponentě na stránce. Potřebujeme je tedy poslat z komponenty `JourneyPicker` jejímu rodiči – to uděláme v následujících krocích.
-1. V komponentě `HomePage` si připravte funkci `handleJourneyChange`. Funkce `handleJourneyChange` bude očekávat jeden parametr – objekt s údaji o nalezeném spojení. Nazvěte jej třeba `journey`. Ve funkci zatím vypište tento parametr do konzole. Volání funkce zařídíme v následujícím kroku.
+1. V komponentě `HomePage` si připravte funkci `handleJourneyChange`. Funkce `handleJourneyChange` bude očekávat jeden parametr – objekt s údaji o nalezeném spojení. Nazvěte jej třeba `journeyData`. Ve funkci zatím vypište tento parametr do konzole. Volání funkce zařídíme v následujícím kroku.
 1. V komponentě `HomePage` používáte komponentu `JourneyPicker`. Této komponentě předejte property jménem `onJourneyChange`, jako hodnotu jí předejte funkci (callback) `handleJourneyChange`.
 1. V komponentě `JourneyPicker` bude property `onJourneyChange`, do které rodič (`HomePage`) vkládá funkci, která se zavolá s údaji nalezeném spoji. Všimněte si, že v hlavičce komponenty `JourneyPicker` už je property `onJourneyChange` připravená.
 1. Ve funkci `handleSubmit` v komponentě `JourneyPicker` nyní vypisujete nalezená spojení jen do konzole prohlížeče. Tento výpis nahraďte voláním funkce uložené v property `onJourneyChange`, které jako parametr předáte data získaná z volání API pod klíčem `results`.

daweb/react/leviexpress-1/cvlekce/zobrazeni-sedadla/exercise.md

@@ -11,8 +11,9 @@ V první fázi projektu bude sedadlo pro cestujícího přidělovat automaticky
 ::fig[náhled]{src=assets/nahled.png}
 
 1. Na vzorové stránce vidíte sekci s nadpisem „Vaše sedadlo“. Vytvořte pro tuto sekci React komponentu s názvem `SelectedSeat`. Její obsah vyplňte dle vzorové stránky.
-1. Vložte (použijte) komponentu `SelectedSeat` na správné místo homponenty `HomePage`. Zatím ji ponechte zobrazenou vždy, bude se vám tak komponenta lépe ladit.
-1. Všimněte si, že obrázek sedadla je vytvořen pomocí SVG. SVG je formát pro vektorové obrázky, jde ovšem o textový zápis podobný HTML. Díky tomu jej můžeme používat i přímo v JSX – a můžeme také pomocí Reactu měnit obsah SVG, nebo-li to, co se v obrázku zobrazuje.
+1. Vložte (použijte) komponentu `SelectedSeat` na správné místo komponenty `HomePage`. Zatím ji ponechte zobrazenou vždy, bude se vám tak komponenta lépe ladit.
+1. Všimněte si, že obrázek sedadla je vytvořen pomocí SVG. SVG je formát pro vektorové obrázky, jde ovšem o textový zápis podobný HTML. Díky tomu jej můžeme používat i přímo v JSX – a můžeme také pomocí Reactu měnit obsah SVG, neboli to, co se v obrázku zobrazuje.
 1. Najděte, kde se ve struktuře SVG nastavuje číslo sedadlo. Zařiďte, aby šlo komponentě `SelectedSeat` nastavit číslo sedadla skrze prop `number`.
 1. Tak, kde je komponenta `SelectedSeat` použitá, nastavte komponentě atribut `number` a ověřte, že se v prohlížeči zobrazí správné číslo sedadla.
 1. V komponentě `HomePage` máme ve stavu `journey` uložen výsledek vyhledané cesty. Stačí tedy vlastnost `autoSeat` předat komponentě `SelectedSeat` v atributu `number`. Dejte však pozor na to, že při načtení stránky je ve stavu `journey` hodnota `null`. V takovém případě komponentu `SelectedSeat` vůbec nezobrazujte.
+1. Commitněte změny.

daweb/react/leviexpress-2/cvlekce/stav-sedadla.md

@@ -16,6 +16,7 @@ V předchozí verzi projektu jsme sedadlo pro rezervaci získali z hodnoty `auto
 1. Nyní chceme být schopní změnit stav `userSeat` při kliknutí na komponentu `Seat`, která je ovšem zanořena v hlubinách komponenty `SeatPicker`. Mezi komponentami `Seat` a `HomePage` je vztah potomek - pra-prarodič. Komunikace mezi nimi tedy musí probíhat skrze komponenty `SeatRow` a `SeatPicker`.
 1. Obě komponenty `SeatPicker` i `SeatRow` musí mít proto _prop_ `onSeatSelected`. Komponenta `SeatRow` tuto funkci/callback předá všem svým `Seat` jako _prop_ `onSelect`. Komponenta `SeatPicker` funkci `onSeatSelected` předá dolů komponentě `SeatRow` skrze stejnojmennou _prop_. Takto můžeme z prarodiče `SeatPicker` propašovat funkci do vnuka `Seat`.
 1. Nyní stačí komponentě `SeatPicker` skrze _prop_ `onSeatSelected` předat funkci `setUserSeat`, která nastaví stav v komponentě `HomePage`. Pokud se povedlo vše správně propojit, při kliknutí na sedadlo se změní stav `userSeat` v komponentě `HomePage` a plánek zobrazí vybrané sedadlo. Vyzkoušejte v prohlížeči, že vše správně funguje.
+1. Pokud zkusít ekliknout na sedadlo, které už je obsazené, zjistíte, že i takové sedadlo jde vybrat. V komponentě `Seat`tedy ještě upravte zpracování události `click` tak, aby se callback `onSelect` zavolal jen v případě, že sedadlo ještě není obsazené.
 1. Pokud jste došli až sem, váš projekt je téměř hotový. Stačí už je v obsluze tlačítka pro rezervaci místo `autoSeat` (funkce `handleBuy` v komponentě `HomePage`) použít stav `userSeat`.
 1. Pročistěte kód od všech nepotřebných výpisů, zakomentovaných částí kódu a jiných pozůstatků vývoje.
 1. Pokud se vše povedlo, váš projekt LeviExpress je hotový. Umožní uživateli vybrat, odkud kam chce jet, datum cesty i sedadlo, a rezervovat si jízdenku.

daweb/react/leviexpress-2/cvlekce/zobrazeni-sedadla/exercise.md

@@ -11,7 +11,7 @@ Když už dokážeme zobrazit plánek autobusu, je na čase zobrazit uživatelem
 ::fig[náhled]{src=assets/nahled.png}
 
 1. Nejprve musíme upravit komponentu `Seat` tak, aby správně zobrazovala sedadlo, pokud je vybrané. Přidáme jí tedy novou _prop_ `isSelected`. Pokud je sedadlo vybrané (prop `isSelected` je nastavena na `true`), bude mít sedadlo nastavenu vedle `seat` také třídu `seat--selected`.
-1. V komponentě `SeatRow` budeme nyní potřebovat _prop_ `rowSelectedSeat`, do které vložíme číslo vybraného sedadla. Pro otestování si můžete nejprve v komponentě vytvořit konstantu `rowSelectedSeat` s testovacím číslem sedadla, a teprve až s ebdue vybrané sedadlo správně zobrazovat, předělejte konstantu na _prop_. Zobrazení vybraného sedadla zařídíme tak, že na komponentách `Seat` uvnitř `SeatRow` nastavíme atribut `isSelected`. Jeho hodnotu (`true`/`false`) nastavujte v závislosti na tom, zda číslo sedadla je shodné s číslem v `rowSelectedSeat`.
+1. V komponentě `SeatRow` budeme nyní potřebovat _prop_ `rowSelectedSeat`, do které vložíme číslo vybraného sedadla. Pro otestování si můžete nejprve v komponentě vytvořit konstantu `rowSelectedSeat` s testovacím číslem sedadla, a teprve až se bude vybrané sedadlo správně zobrazovat, předělejte konstantu na _prop_. Zobrazení vybraného sedadla zařídíme tak, že na komponentách `Seat` uvnitř `SeatRow` nastavíme atribut `isSelected`. Jeho hodnotu (`true`/`false`) nastavujte v závislosti na tom, zda číslo sedadla je shodné s číslem v `rowSelectedSeat`.
 1. Komponenta `SeatRow` dostane číslo vybraného sedadla skrze _prop_ `rowSelectedSeat` od rodiče `SeatPicker`. Do komponenty `SeatPicker` tedy přidejte _prop_ s názvem `selectedSeat`. Hodnotu v této `prop` pak předejte komponentám `SeatRow` jako `rowSelectedSeat`.
 1. Nyní si v prohlížeči vyzkoušejte, že pomocí ruční změny atributu `selectedSeat` komponenty `SeatPicker` můžete nastavit libovolné sedadlo jako vybrané.
 1. Nyní můžete jako vybrané nastavit to sedadlo, které přišlo v hodnotě `autoSeat` z backendu. Uživatel vidí automaticky vybrané sedadlo přímo na plánku autobusu.