Форма бронирования

В выборе мест теперь есть форма, под итогом: поля «Имя» и «Email» и кнопка «Забронировать», переписанные на JSX (где for стал htmlFor, а novalidate — noValidate). Оживите её, как в уроке «Формы»: поля управляемые, с состояниями name и email, а форма вызывает handleSubmit, которая начинается с event.preventDefault().

Проверка. Затем handleSubmit проверяет форму, шаг за шагом, как в упражнении «Сообщения об ошибках»: пустое имя, email без @, не выбрано ни одного места. Первая найденная проблема попадает в состояние error, которое показывает форма, а return завершает обработчик, так что ничего не бронируется. Посетитель исправляет ошибку и снова нажимает «Забронировать». Старая страница показывала все три сообщения сразу. Здесь сообщение одно, под кнопкой, и код короче.

Бронирование. Когда всё верно, выбор мест создаёт билет: объект с id из Date.now(), сеансом, местами, именем и email. Но куда он попадёт? Билеты нужны выбору мест, чтобы показывать забронированные места занятыми, и списку «Ваши билеты» в Showtimes. Поэтому это состояние Showtimes, tickets, а выбор мест получает билеты в пропсах вместе с функцией, которая добавляет билет, как форма для ваших слов в итоговом проекте курса React:

onBook({
    id: Date.now(),
    showtime: showtime,
    seats: selected,
    name: name.trim(),
    email: email.trim(),
});

Билет хранит сеанс целиком, чтобы список мог показать его день, время и фильм. Затем выбор мест очищает selected и оба поля. С этого момента забронированные места заняты: isTaken() тоже проверяет через some(), есть ли это место в одном из билетов на этот сеанс, как делал старый скрипт:

return tickets.some(
    (ticket) =>
        ticket.showtime.id === showtime.id && ticket.seats.includes(seat),
);

Наконец, выбор мест сообщает, какие места забронированы, — Забронировано! Ваши места: A3, A4, — ещё одним состоянием, confirmation. Его текст можно составить из selected даже после setSelected([]): как вы знаете из урока «Состояние», новое значение появляется только при следующей отрисовке.