Тестовое задание на Angular. Создание State для бронирования варианта.
В данной статье рассмотрим создание “гибридного” state’а, который формально собирается из двух других state’ов.
После того, как был создан компонент карты, можно создать данные для отображения на ней. В данном случае мы будем на карте отображать отели, где маркером будет первый номер в отеле.
Для этого сначала создадим интерфейс в booking/common:
Как видно из примера, сущность для бронирования (BookingVariant) это немного измененный отель:
export interface BookingVariant extends Building {
firstRoom: RoomEntity | null;
}Конечно, с точки зрения приложения, отель без доступных номеров, не является вариантом. И в данном случае это является архитектурной ошибкой.
Создадим новый Ngrx state, который будет хранить в себе выбранный вариант.
Внимательный читатель, взглянув на state, заметит, что в state’е нет механизма получения доступных вариантов. State хранит только выбранный вариант.
Вопрос в том, как получить доступные варианты?
Для этого, мы создадим сервис, который подключит в себе RoomFacade и BuildingFacade и и их помощью, позволит получить актуальный список вариантов.
Создадим BookingService в booking/service:
Сначала рассмотрим bookingVariants$. Свойство bookingVariants$ представляет собой все доступные варианты. Для его формирования используется:
bookingVariants$: Observable<BookingVariant[]> = combineLatest([
this.buildingFacade.buildings$.pipe(filter<any>(Boolean)),
this.roomFacade.rooms$.pipe(filter<any>(Boolean)),
]).pipe(
map(([buildings, rooms]: [Building[], Room[]]) =>
buildings
.filter((building) => building.rooms.length)
.map((building) => ({ ...building, firstRoom: getFirstRoomOnBuilding(building, rooms) }))
)
);Другими словами получаем все номера и отели, потом для каждого отеля, из всего списка номеров, находим первый номер и создаем новую сущность, которая является BookingVariant.
Далее идет bookingVariant$. В данном случае bookingVariant$ — это выбранный вариант из списка доступных вариантов. Поэтому просто передается значение из BookingFacade.
В предыдущей статье, уже говорилось о наследовании и использовании данных state. И в данном случае, bookingVariant$ как и методы setBookingVariant(), setBookingDetails(), clearBookingVariant() и clearBookingDetails() являются плохой практикой и при возможности старайтесь избегать этого.
Ссылки
Вернуться к оглавлению — Введение.
Следующая статья — Создание UI kit для приложения.
Предыдущая статья — Добавление google maps.
Все исходники на github/fafnur/barinb.
Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur
