From 7d47994539f18acd533c6a4ff0a0167ea3d7d5a1 Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Wed, 21 Aug 2024 14:52:13 +0200 Subject: [PATCH] refactor(SW-96): use images from API & reduce data returned in getHotel --- .../HotelPage/PreviewImages/index.tsx | 3 +- components/ContentType/HotelPage/data.ts | 41 ------------------- components/ContentType/HotelPage/index.tsx | 26 ++++++++---- components/Lightbox/FullView.tsx | 2 +- components/Lightbox/Gallery.tsx | 2 +- components/Lightbox/Lightbox.module.css | 7 +++- server/routers/hotels/query.ts | 15 ++++++- server/routers/utils/hotels.ts | 30 ++++++++++++++ types/components/lightbox/lightbox.ts | 1 + 9 files changed, 71 insertions(+), 56 deletions(-) create mode 100644 server/routers/utils/hotels.ts diff --git a/components/ContentType/HotelPage/PreviewImages/index.tsx b/components/ContentType/HotelPage/PreviewImages/index.tsx index 7f0306217..390430cf7 100644 --- a/components/ContentType/HotelPage/PreviewImages/index.tsx +++ b/components/ContentType/HotelPage/PreviewImages/index.tsx @@ -11,11 +11,11 @@ export default async function PreviewImages({ images }: PreviewImagesProps) { const intl = await getIntl() return ( - {/*TODO: Replace with images from API once SW-188 is merged. */}
{images[0].alt} | null { const iconName = facilityToIconMap[facilityName] return getIconByIconName(iconName) || null } - -/** - * NOTE: - * Images from the test API are hosted on test3.scandichotels.com, - * which can't be accessed unless on Scandic's Wifi or using Citrix. - * So I've added some placeholder images here for use when running the app locally. - */ -export const tempHotelLightboxImage: ImageItem[] = [ - { - url: "https://www.scandichotels.com/imagevault/publishedmedia/kd4e35n41mrqinfrkzok/scandic-continental-entrance-vasagatan.jpg", - alt: "Hotel entrance", - }, - { - url: "https://www.scandichotels.com/imageVault/publishedmedia/ip4a2rc93qda3aq9ph73/scandic-continental-room-standard.jpg", - alt: "Standard room", - }, - { - url: "https://www.scandichotels.com/imageVault/publishedmedia/75y2b2x8uvma4s7zvy50/scandic-continental-room-juniorsuite-detail-1.jpg", - alt: "Junior suite", - }, - { - url: "https://www.scandichotels.com/imageVault/publishedmedia/pwotq99pbr68djxnym4a/scandic-continental-diningroom-themarket.jpg", - alt: "Dining room, The Market", - }, - { - url: "https://www.scandichotels.com/imageVault/publishedmedia/yc2cjoxq2j01gp0f80gt/scandic-continental-room-juniorsuite-bathroom-1.jpg", - alt: "Junior suite bathroom", - }, - { - url: "https://www.scandichotels.com/imageVault/publishedmedia/xocam1f69h7lh57u8f9v/scandic-continental-themarket-detail.jpg", - alt: "The Market detail", - }, - { - url: "https://www.scandichotels.com/imageVault/publishedmedia/0nnwt72vwzfvkkx5whf0/scandic-continental-caldo.jpg", - alt: "Caldo", - }, - { - url: "https://www.scandichotels.com/imageVault/publishedmedia/mg9bbtbumfxbfjhovk2e/Scandic_Continental_Capitol_The_View_6.jpg", - alt: "Rooftop bar", - }, -] diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx index a1838403e..960863cc3 100644 --- a/components/ContentType/HotelPage/index.tsx +++ b/components/ContentType/HotelPage/index.tsx @@ -4,7 +4,6 @@ import { MOCK_FACILITIES } from "./Facilities/mockData" import Facilities from "./Facilities" import AmenitiesList from "./AmenitiesList" -import { tempHotelLightboxImage } from "./data" import IntroSection from "./IntroSection" import PreviewImages from "./PreviewImages" import { Rooms } from "./Rooms" @@ -20,23 +19,32 @@ export default async function HotelPage() { if (!hotelData) { return null } - const { hotel, roomCategories } = hotelData + const { + hotelName, + hotelDescription, + hotelLocation, + hotelAddress, + hotelRatings, + hotelDetailedFacilities, + hotelImages, + roomCategories, + } = hotelData return (
- +
- +
diff --git a/components/Lightbox/FullView.tsx b/components/Lightbox/FullView.tsx index 4a14fac2c..9e63dbf02 100644 --- a/components/Lightbox/FullView.tsx +++ b/components/Lightbox/FullView.tsx @@ -61,7 +61,7 @@ export default function FullView({ />
- {image.alt} + {image.title}
diff --git a/components/Lightbox/Gallery.tsx b/components/Lightbox/Gallery.tsx index 42385acb2..5134ecf29 100644 --- a/components/Lightbox/Gallery.tsx +++ b/components/Lightbox/Gallery.tsx @@ -56,7 +56,7 @@ export default function Gallery({
- {mainImage.alt} + {mainImage.title}
diff --git a/components/Lightbox/Lightbox.module.css b/components/Lightbox/Lightbox.module.css index 280b80911..fa3ea4f1c 100644 --- a/components/Lightbox/Lightbox.module.css +++ b/components/Lightbox/Lightbox.module.css @@ -5,7 +5,6 @@ .mobileGallery { margin-top: 70.047px; height: 100%; - overflow-y: auto; position: relative; display: flex; flex-direction: column; @@ -51,6 +50,7 @@ display: flex; flex-direction: column; position: relative; + overflow-y: auto; } .galleryHeader { @@ -60,6 +60,10 @@ margin-bottom: var(--Spacing-x1); } +.desktopGalleryCloseButton { + display: none; +} + .imageCaption { background-color: var(--Base-Surface-Subtle-Normal); padding: var(--Spacing-x-half) var(--Spacing-x1); @@ -187,6 +191,7 @@ } .desktopGalleryCloseButton { + display: block; position: absolute; top: var(--Spacing-x-one-and-half); right: var(--Spacing-x-half); diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts index 2b99bf9d3..bd8d8f14a 100644 --- a/server/routers/hotels/query.ts +++ b/server/routers/hotels/query.ts @@ -13,6 +13,7 @@ import { publicProcedure, router, } from "@/server/trpc" +import { extractHotelImages } from "@/server/routers/utils/hotels" import { toApiLang } from "@/server/utils" import { @@ -153,6 +154,10 @@ export const hotelQueryRouter = router({ const included = validatedHotelData.data.included || [] + const hotelAttributes = validatedHotelData.data.data.attributes + + const images = extractHotelImages(hotelAttributes) + const roomCategories = included ? included .filter((item) => item.type === "roomcategories") @@ -193,8 +198,14 @@ export const hotelQueryRouter = router({ }) ) return { - hotel: validatedHotelData.data.data.attributes, - roomCategories: roomCategories, + hotelName: hotelAttributes.name, + hotelDescription: hotelAttributes.hotelContent.texts.descriptions.short, + hotelLocation: hotelAttributes.location, + hotelAddress: hotelAttributes.address, + hotelRatings: hotelAttributes.ratings, + hotelDetailedFacilities: hotelAttributes.detailedFacilities, + hotelImages: images, + roomCategories, } }), rates: router({ diff --git a/server/routers/utils/hotels.ts b/server/routers/utils/hotels.ts new file mode 100644 index 000000000..ba05d20d1 --- /dev/null +++ b/server/routers/utils/hotels.ts @@ -0,0 +1,30 @@ +import { ImageItem } from "@/types/components/lightbox/lightbox" +import { Hotel } from "@/types/hotel" + +export function extractHotelImages(hotelData: Hotel): ImageItem[] { + const images: ImageItem[] = [] + + if (hotelData.hotelContent?.images) { + images.push({ + url: hotelData.hotelContent.images.imageSizes.large, + alt: hotelData.hotelContent.images.metaData.altText, + title: + hotelData.hotelContent.images.metaData.title || + hotelData.hotelContent.images.metaData.altText, + }) + } + + if (hotelData.healthFacilities) { + hotelData.healthFacilities.forEach((facility: any) => { + facility.content.images.forEach((image: any) => { + images.push({ + url: image.imageSizes.large, + alt: image.metaData.altText, + title: image.metaData.title || image.metaData.altText, + }) + }) + }) + } + + return images +} diff --git a/types/components/lightbox/lightbox.ts b/types/components/lightbox/lightbox.ts index be3eaa108..4f5eed250 100644 --- a/types/components/lightbox/lightbox.ts +++ b/types/components/lightbox/lightbox.ts @@ -1,6 +1,7 @@ export interface ImageItem { url: string alt: string + title: string } export interface LightboxProps {