Drobná vylepšení a opravy zadání LeviExpress.

daweb/react/leviexpress-1/cvlekce/podrobnosti-cesty/exercise.md

@@ -11,13 +11,14 @@ V tomto cvičení vytvoříte komponentu pro zobrazení detailu cesty a komponen
 ::fig[náhled]{src=assets/nahled.png}
 
 1. Ve svém projektu vytvořte komponentu s názvem `JourneyDetail`. Do této komponenty zatím zkopírujte HTML kód ze zadání – celý element `div` s třídami `journey-detail` a `container` i s jeho obsahem. Vytvoře v komponentě také soubor `style.css`, do kterého zkopírujte ze zadání styly pro třídy `stops` a `journey-detail`. Naimportujte soubor se styly do komponenty.
-1. Použijete komponentu `JourneyDetail` v komponentě `HomePage` na místě, kde se nyní vypisuje id nalezeného spoje. Komponenta se bude zobrazovat jenom tehdy, když ve stavu `journey` v komponentě `HomePage` je něco jiného, než `null`. Ověřte, že po vyhledání spojení se na stránce zobrazí podrobnosti cesty s městy 1 až 4.
+1. Použijete komponentu `JourneyDetail` v komponentě `HomePage` na místě, kde se nyní vypisuje id nalezeného spoje. Komponenta se bude zobrazovat jenom tehdy, když ve stavu `journey` v komponentě `HomePage` je něco jiného než `null`. Ověřte, že se po vyhledání spojení na stránce zobrazí podrobnosti cesty s městy 1 až 4 (komponenta `JourneyDetail` zatím není napojená na reálná data).
 1. V samostatné složce vytvořte komponentu s názvem `BusStop`. V komponentě vytvořte také soubor se styly, do kterého ze zadání zkopírujete všechny styly pro třídy začínající `bus-stop`.
 1. Do komponenty `BusStop` vložte ze zadání celý element `div`, který má třídu `bus-stop`. Je to jeden prvek ze seznamu zastávek.
 1. V komponentě `JourneyDetail` smažte HTML kód se seznamem zastávek. Zbyde tam jen kontejner, v něm `h3` s textem „Podrobnosti cesty“ a pod ním `div` s třídou `stops`. Do tohoto divu vložte komponentu `BusStop`. Zkontrolujte v prohlížeči, že se zobrazí jedna zastávka.
-1. Komponenta `BusStop` bude očekávat tři `props` – `name`, `station` a `time`. Tam, kde používáte komponentu `BusStop`, přidejte komponentě odpovídající atributy a nastavte jim hodnoty „Praha“, „ÚAN Florenc“ a „15:55“. Komponentu `BusStop` upravte tak, aby se tyto hodnoty propsaly na správná místa v HTML. Zkontrolujte, že se v prohlížeči zobrazují správné údaje pro jednu zastávku.
-1. Komponenta `JourneyDetail` bude v `props` očekávat property `journey` s údaji o cestě. V property `journey` bude objekt, který má v sobě v property `stops` seznam zastávek. Property `journey` si můžete vypsat do konzole prohlížeče.
-1. Místo jedné komponenty `BusStop` použité v komponentě napište kód, který projde všechny zastávky v `journey.stops` a pro každou zastávku vloží jednu komponentu `BusStop`, které předá správné údaje. Můžete si pomoci tak, že nejprve upravíte vloženou komponentu `BusStop`, ve které máte „Praha“, „ÚAN Florenc“ a „15:55“ tak, aby se místo těchto údajů vložily údaje z první zastávky v `journey.stops[0]` a následně kód upravíte tak, aby pomocí funkce `map` prošel všechny zastávky v `journey.stops`. Jako klíč (`key`) pro React můžete použít property `code`, která je uvedená v `journey.stops` u každé zastávky.
+1. Komponenta `BusStop` bude očekávat tři _props_: `name`, `station` a `time`. Tam, kde používáte komponentu `BusStop`, přidejte komponentě odpovídající atributy a nastavte jim hodnoty „Praha“, „ÚAN Florenc“ a „15:55“. Komponentu `BusStop` upravte tak, aby se tyto hodnoty propsaly na správná místa v HTML. Zkontrolujte, že se v prohlížeči zobrazují správné údaje pro jednu zastávku.
+1. Komponenta `JourneyDetail` bude v _props_ očekávat property `journey` s údaji o cestě. V property `journey` bude objekt, který má v sobě v property `stops` seznam zastávek. Property `journey` si můžete vypsat do konzole prohlížeče.
+1. Místo jedné komponenty `BusStop` použité v komponentě `JourneyDetail` napište kód, který projde všechny zastávky v `journey.stops` a pro každou zastávku vloží jednu komponentu `BusStop`, které předá správné údaje. Můžete si pomoci tak, že nejprve upravíte vloženou komponentu `BusStop`, ve které máte „Praha“, „ÚAN Florenc“ a „15:55“ tak, aby se místo těchto údajů vložily údaje z první zastávky v `journey.stops[0]` a následně kód upravíte tak, aby pomocí funkce `map` prošel všechny zastávky v `journey.stops`. Jako klíč (`key`) pro React můžete použít property `code`, která je uvedená v `journey.stops` u každé zastávky.
 1. Nyní už zbývá jen poslat z komponenty `HomePage` do komponenty `JourneyDetail` údaje o cestě. Vraťte se do komponenty `HomePage`. Ve stavu `journey` tam jsou uloženy údaje o cestě. Nyní už jen stačí tento stav předat do prop `journey` komponenty `JourneyDetail`.
 1. Ověřte v prohlížeči, že funguje vyhledání spojení a že se pod vyhledávacím formulářem zobrazí „jízdní řád“ spoje – seznam zastávek s časy. Zastávek je u spoje víc a když vyhledáte jiné spojení, změní se i seznam zastávek.
+1. Pročistěte kód od zbytečných `consol.log()`, zakomentovaných částí kódu a podobně.
 1. Commitněte změny.

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

@@ -8,14 +8,10 @@ solutionAccess: protected
 
 Nyn již máme ve stavu `journey` uložené všechny potřebné informace k tomu, abychom mohli provést rezervaci jizdenky. V tomto cvičení potvrdíme rezervaci kliknutím na tlačíko, zpracujeme odpověď ze serveru a přesměrujeme uživatele na detail rezervované jízdenky.
 
-1. Vložte do komponenty `HomePage` oddíl s tlačítkem „Rezervovat". Stále v komponentě `HomePage` vytvořte funkci `handleBuy` a zařiďte, aby byla tato funkce volána při kliknutí na tlačítko „Rezervovat". Ve funkci si zatím můžete vypsat nějakou zprávu do konzole `('Funguju!')`.
-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ánka, na které se uživatel nachází. Tedy jak uživatele přesměrovat.
-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. Vložte do komponenty `HomePage` oddíl s tlačítkem „Rezervovat" (zkopírujte potřebný kód z dodaného designu). Stále v komponentě `HomePage` vytvořte funkci `handleBuy` a zařiďte, aby byla tato funkce volána při kliknutí na tlačítko „Rezervovat". Ve funkci si zatím můžete vypsat nějakou zprávu do konzole (třeba `'Funguju!'`).
 1. Nákup jízdenky se ve funkci `handleBuy` provede tak, že metodou POST zavoláte API endpoint
 
-   ```
-   https://apps.kodim.cz/daweb/leviexpress/api/reservation
-   ```
+   > https://apps.kodim.cz/daweb/leviexpress/api/reservation
 
    Tělo požadavku bude obsahovat akci `create`, vlastnost `seat` – číslo sedadla vybrané uživatelem, a vlastnost `journeyId` – hodnota `journeyId` ze stavu. Příklad:
 
@@ -34,18 +30,21 @@ 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. 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}`);
    ```
 1. Zkontrolujte, že po kliknutí na tlačíko „Rezervovat" se stránka přesměruje například na adresu
 
-   ```
-   http://localhost:5173/reservation/HAQBAQASf7M
-   ```
+   > http://localhost:5173/reservation/HAQBAQASf7M
 
-   kde záhy vytvoříme detail jízdenky!
+   kde záhy vytvoříme detail jízdenky.
 
    ::fig[náhled]{src=assets/nahled.png}
 
-1. Commitněte změny.
+1. Odstraňte pomocné výpisy do konzole a jiné pozůstatky bitvy programátora se vzpurným kódem.
+1. Commitněte a pushněte změny.
+1. Nyní máte zcela hotovou první část projektu. Pokochejte se hotovou aplikací a pochvalte se za pořádný kus dobře odvedené práce. Po malé oslavě svých úspěchů se můžete vrhnout na druhou část.
+

daweb/react/leviexpress-1/cvlekce/routovani.md

@@ -6,11 +6,11 @@ context: lekce
 solutionAccess: protected
 ---
 
-Hned na začátku rozběháme routování, abychom ho pak nemuseli složitě včlenňovat do již rozpracovaného projektu. Knihovna `react-router` už je v naklonovaném projektu nainstalovaná, můžete ji rovnou začít používat.
+Hned na začátku rozběháme routování, abychom ho pak nemuseli složitě včleňovat do již rozpracovaného projektu. Knihovna `react-router` už je v naklonovaném projektu nainstalovaná, můžete ji rovnou začít používat.
 
-Naše aplikace bude mít dvě hlavní stránky: :i[Home] a :i[Reservation]. Obě obsahují stejnou hlavičku i patičku. Stránka :i[Home] bude pod routou `/`, stránka s detaily rezervace bude mít adresu `/reservation`.
+Naše aplikace bude mít dvě hlavní stránky: _Home_ a _Reservation_. Obě obsahují stejnou hlavičku i patičku. Stránka _Home_ bude pod routou `/`, stránka s detaily rezervace bude mít adresu `/reservation`.
 
-1. Uvnitř komponenty `App` již máte připravenou strukturu s hlavičkou a patičkou stránky. Mezi ně budeme pomocí `Outlet` vkládat naše stránky. Stránku `HomePage` již míte připravenou. Vložte ji do routeru jako dítě routy `/` v hlavním `index.jsx`. Stránku `HomePage` chceme umístit na adresu: `/`. Vyzkoušejte, že se vaše stránka správně zobrazuje. Měli byste vidět formulář pro vyhledání spojení.
-1. Dále vytvořte komponentu `ReservationPage`. Tuto komponentu zobrazte na adrese `/reservation`. Zatím může také vracet pouze nadpis `h2`, abychom viděli, že se na stránce něco děje. Obsah komponenty vytvoříme později.
+1. Uvnitř komponenty `App` již máte připravenou strukturu s hlavičkou a patičkou stránky. Mezi ně budeme pomocí `Outlet` vkládat naše stránky. Stránku `HomePage` již máte připravenou. Vložte ji do routeru jako potomka routy `/` v hlavním `index.jsx`. Stránku `HomePage` chceme umístit na adresu: `/`. Vyzkoušejte, že se vaše stránka správně zobrazuje. Měli byste vidět formulář pro vyhledání spojení.
+1. Dále vytvořte komponentu `ReservationPage`. Tuto komponentu zobrazte na adrese `/reservation`. Zatím může také vracet pouze nadpis `h2` s textem „Vaše e-jízdenka“, abychom viděli, že se na stránce něco děje. Obsah komponenty vytvoříme později.
 1. Vyzkoušejte, že vaše stránka správně funguje (adresu `/reservation` vyzkoušejte tak, že ji prostě napíšete do adresního řádku prohlížeče).
 1. Proveďte commit změn se smysluplnou commit zprávou.

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

@@ -1,18 +1,18 @@
 ---
 title: Údaje o cestě
-lead: Propojte výběr měst a data se příslušnými stavy.
+lead: Propojte výběr měst a data cesty s příslušnými stavy.
 demand: 2
 context: lekce
 solutionAccess: protected
 ---
 
-Ve svém projektu již máte vytvořen základy komponenty s názvem `JourneyPicker`. Ta je součástí komponenty `HomePage` a zatím vrací pouze statické JSX. V tomto cvičení propojíme výběr měst a data se stavem komponenty.
+Ve svém projektu již máte vytvořen základ komponenty s názvem `JourneyPicker`. Ta je součástí komponenty `HomePage` a zatím vrací pouze statické JSX. V tomto cvičení propojíme výběr měst a data cesty se stavem komponenty.
 
 ::fig[náhled]{src=assets/nahled.png}
 
 1. V komponentě `JourneyPicker` si připravte funkci `handleSubmit(event)`, která se bude volat při odeslání formuláře. Ošetřete, aby prohlížeč sám neodesílal formulář a zatím si ve funkci jen vypište do konzole text `'Odesílám formulář s cestou'`.
 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ávý `<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. 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. Commitněte změny.

daweb/react/leviexpress-1/cvlekce/vyber-datumu.md

@@ -10,26 +10,26 @@ Na konci tohoto cvičení bude uživatel schopen vybrat datum cesty podle dat st
 
 1. Komponentu `DatesOptions` vytvořte opět přímo v souboru s komponentami `JourneyPicker` a `CityOptions`.
 1. HTML kód s elementy `<option>` pro výběr termínu přesuňte ze `select`u pro výběr data do komponenty `DatesOptions`. V `select`u použijte vytvořenou komponentu `DatesOptions`. Zkontrolujte v prohlížeči, že se výběr termínů zobrazuje stále stejně.
-1. Podobně jako `CityOptions` získává seznam měst v property `cities`, bude i `DatesOptions` získávat seznam termínů v property `dates`. V elementech `<option>` (s výjimkou prvního ručně vloženého s textem „Vyberte“) požijte jako `value` a `key` hodnotu `dateBasic` a jako hodnotu `dateCs` použíjte jako obsah.
+1. Podobně jako `CityOptions` získává seznam měst v property `cities`, bude i `DatesOptions` získávat seznam termínů v property `dates`. V elementech `<option>` (s výjimkou prvního ručně vloženého s textem „Vyberte“) požijte jako `value` a `key` hodnotu `dateBasic` a hodnotu `dateCs` použijte jako textový obsah.
 1. Připravte si pomocí `useState` další stav `dates`. Pro otestování si do něj vložte tato data:
    ```json
    [
      {
-       "dateBasic": "28.05.2021",
-       "dateCs": "pá 28. květen 2021"
+       "dateBasic": "17.05.2024",
+       "dateCs": "pá 17. květen 2024"
      },
      {
-       "dateBasic": "29.05.2021",
-       "dateCs": "so 29. květen 2021"
+       "dateBasic": "18.05.2024",
+       "dateCs": "so 18. květen 2024"
      }
    ]
    ```
 1. Použijte stav `dates` pro naplnění hodnot property `dates` tam, kde je použita komponenta `DatesOptions`. Ověřte v prohlížeči, že se ve výběru termínů zobrazují dvě uvedená data.
-1. Upravte `useEffect` volaný při prvním zobrazení komponenty. Vedle seznamu měst bude z API získávat také seznam termínů. Endpoint je na adrese
+1. Upravte `useEffect` volaný při prvním zobrazení komponenty. Vedle funkce, která stahuje seznam měst, přidejte do `useEffect`u ještě funkci, která stáhne z API termíny cesty. Nezapomeňte v `useEffect`u zavolat i tuto druhou funkci.  Endpoint je na adrese
 
-   https://apps.kodim.cz/daweb/leviexpress/api/dates
+   > https://apps.kodim.cz/daweb/leviexpress/api/dates
 
-   a vrací seznam termínů ve formátu, který máme připraven. Změňte výchozí stav `dates` na prázdné pole a poté do něj nastavte výsledek volání uvedeného endpointu.
+   a vrací seznam termínů ve formátu, který máme připraven. Změňte výchozí stav `dates` na prázdné pole a poté do něj v `useEffect`u nastavte výsledek volání uvedeného endpointu.
 
 1. Ověřte v prohlížeči, že se do `select`ů načítají data (města a termíny) a že po kliknutí na tlačítko „Vyhledat spoj“ se uživatelem zvolené údaje vypíší do konzole prohlížeče.
 1. Commitněte změny.