Zapamatované vstupenky

Zarezervujte místo a klikněte na Spustit: vstupenka je pryč a místo zase volné. Stav žije, jen dokud aplikace běží. Abyste vstupenky uchovali, potřebujete localStorage, a hook na to už máte: useLocalStorage je v souboru useLocalStorage.js, tak jak jste ho napsali v lekci Refy a vlastní hooky. Funguje jako useState a navíc hodnotu ukládá pod klíčem a začíná tím, co je pod ním uložené. V komponentě Program se tedy změní jeden řádek:

const [vstupenky, setVstupenky] = useLocalStorage("vstupenky", []);

To je všechno. Výběr míst dostává vstupenky v props jako dřív a seznam Vaše vstupenky je dál ukazuje: ani jeden nemusí vědět, odkud se berou. Obsazená místa zůstanou obsazená a seznam Vaše vstupenky si své vstupenky nechá i po dalším spuštění. Smažete je tlačítkem Smazat uložená data v konzoli.

Proč klíč vstupenky, když starý web ukládal rezervace pod klíčem rezervace? Naše vstupenky vypadají jinak: drží si celé představení, kdežto staré rezervace měly jen jeho idPredstaveni. Až bude vaše aplikace na internetu na adrese starého webu, dostane ve vašem prohlížeči stejné localStorage, i s případnými rezervacemi, které jste udělali, když jste starý web zkoušeli. Pod klíčem rezervace by je aplikace četla jako vstupenky, nenašla by v nich vstupenka.predstaveni a skončila by chybou. Nový klíč začíná načisto.

Zrušení. Rezervaci, kterou už nechcete, má jít snadno zrušit. Každá vstupenka dostane tlačítko Zrušit a funkce zrusVstupenku(id) vytvoří pomocí filter() nové pole bez té vstupenky, jako ve cvičení Odebrání z pole. Hook nové pole uloží a místa jsou zase volná.