Запоминаем билеты

Забронируйте место и нажмите «Запустить»: билета больше нет, а место снова свободно. Состояние живёт, только пока работает приложение. Чтобы сохранить билеты, нужен localStorage, и хук для него у вас уже есть: useLocalStorage лежит в файле useLocalStorage.js, как вы написали его в уроке «Рефы и собственные хуки». Он работает как useState, а вдобавок сохраняет значение под ключом и начинает с того, что там сохранено. Поэтому в Showtimes меняется одна строка:

const [tickets, setTickets] = useLocalStorage("tickets", []);

Вот и всё. Выбор мест по-прежнему получает билеты в пропсах, а список «Ваши билеты» по-прежнему их показывает: ни тому, ни другому не нужно знать, откуда берутся билеты. Занятые места остаются занятыми, а «Ваши билеты» хранит свои билеты и после «Запустить». В предпросмотре кнопка консоли Очистить сохранённые данные удаляет их.

Почему ключ называется tickets, если старый сайт сохранял бронирования под ключом bookings? Наши билеты выглядят иначе: они хранят сеанс целиком, а у старых бронирований был только его showtimeId. Когда ваше приложение на React окажется в интернете по адресу старого сайта, в вашем браузере у него будет тот же localStorage, с бронированиями, которые вы сделали, пока пробовали старый сайт. Под ключом bookings приложение прочитало бы их как билеты, не нашло бы в них ticket.showtime и остановилось бы с ошибкой. Под новым ключом приложение начинает с пустого хранилища.

Отмена. Ненужную бронь должно быть легко отменить. У каждого билета появляется кнопка «Отменить», а handleCancel(id) делает новый массив без этого билета с помощью filter(), как в упражнении «Удаление из массива». Хук сохраняет новый массив, и места снова свободны.