Rezervační formulář

Výběr míst má teď pod souhrnem svůj formulář: textová pole Jméno a E-mail a tlačítko Rezervovat, převedené do JSX (z for se v něm stalo htmlFor a z novalidate noValidate). Oživte ho jako v lekci Formuláře: textová pole jsou řízená, se stavy jmeno a email, a při odeslání formulář zavolá funkci odesli, která začne voláním event.preventDefault().

Kontrola. Potom funkce odesli formulář zkontroluje, jednu věc po druhé, jako ve cvičení Chybové zprávy: prázdné jméno, e-mail bez @, žádné vybrané místo. První problém uloží do stavu chyba, který formulář ukáže, a return funkci ukončí, takže se nic nezarezervuje. Návštěvník problém opraví a klikne na Rezervovat znovu. Stará stránka ukazovala všechny tři zprávy najednou. Tady je zpráva vždy jen jedna, pod tlačítkem, a kód je kratší.

Rezervace. Když je všechno v pořádku, výběr vytvoří vstupenku: objekt s id z Date.now(), představením, místy, jménem a e-mailem. Kam ale patří? Vstupenky potřebuje výběr míst, aby ukázal zarezervovaná místa jako obsazená, a seznam Vaše vstupenky v komponentě Program. Patří tedy do stavu komponenty Program, vstupenky, a výběr je dostane v props spolu s funkcí, která přidá novou, stejně jako formulář pro vlastní slovíčka v závěrečném projektu kurzu Reactu:

onRezervovat({
    id: Date.now(),
    predstaveni: predstaveni,
    mista: vybrana,
    jmeno: jmeno.trim(),
    email: email.trim(),
});

Vstupenka si drží celé představení, aby seznam mohl ukázat jeho den, čas a film. Pak výběr vyprázdní vybrana i obě textová pole. Zarezervovaná místa jsou od té chvíle obsazená: jeObsazene() navíc pomocí some() zjistí, jestli místo nemá některá vstupenka na toto představení, jako to dělal starý skript:

return vstupenky.some(
    (vstupenka) =>
        vstupenka.predstaveni.id === predstaveni.id &&
        vstupenka.mista.includes(misto),
);

Nakonec výběr napíše, která místa jsou zarezervovaná: Rezervováno! Vaše místa: A3, A4. Ten text bude v dalším stavu, potvrzeni. Místa do něj můžete vzít z vybrana, i když setPotvrzeni() zavoláte až po setVybrana([]): jak víte z lekce Stav, nová hodnota přijde až s dalším vykreslením.