feat(SW-251): use parallel fetch for hotels

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css

@@ -6,10 +6,9 @@
   min-height: 100dvh;
 }
 
-.hotelCards {
+.section {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x4);
 }
 
 .link {

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx

@@ -1,40 +1,75 @@
 import { serverClient } from "@/lib/trpc/server"
+import { notFound } from "@/server/errors/next"
 
-import HotelCard from "@/components/HotelReservation/HotelCard"
+import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-import { setLang } from "@/i18n/serverContext"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
+import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
+import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import { LangParams, PageArgs } from "@/types/params"
 
-export default async function SelectHotelPage({
-  params,
-}: PageArgs<LangParams>) {
-  const intl = await getIntl()
-  setLang(params.lang)
-
-  const tempSearchTerm = "Stockholm"
-
+async function getAvailableHotels({
+  cityId,
+  roomStayStartDate,
+  roomStayEndDate,
+  adults,
+}: AvailabilityInput): Promise<HotelData[] | null> {
   const getAvailableHotels = await serverClient().hotel.availability.get({
-    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
-    roomStayStartDate: "2024-11-02",
-    roomStayEndDate: "2024-11-03",
-    adults: 1,
+    cityId: cityId,
+    roomStayStartDate: roomStayStartDate,
+    roomStayEndDate: roomStayEndDate,
+    adults: adults,
   })
 
   if (!getAvailableHotels) return null
 
   const { availability } = getAvailableHotels
 
+  const hotels = availability.map(async (hotel) => {
+    const hotelData = await serverClient().hotel.hotel.get({
+      hotelId: hotel.hotelId.toString(),
+      language: getLang(),
+    })
+
+    return {
+      hotelData: hotelData?.data.attributes,
+      price: hotel.bestPricePerNight,
+    }
+  })
+
+  return await Promise.all(hotels)
+}
+
+export default async function SelectHotelPage({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
+
+  const tempSearchTerm = "Stockholm"
+
+  const intl = await getIntl()
+
+  const hotels = await getAvailableHotels({
+    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
+    adults: 1,
+  })
+
+  if (!hotels) return null
+
+  if (hotels.some((item) => item?.hotelData === undefined)) return notFound()
+
   return (
     <main className={styles.main}>
-      <section>
+      <section className={styles.section}>
         <StaticMap
           city={tempSearchTerm}
           width={340}
@@ -49,22 +84,7 @@ export default async function SelectHotelPage({
         </Link>
         <HotelFilter />
       </section>
-      <section className={styles.hotelCards}>
-        {availability.length ? (
-          availability.map((hotel) => (
-            <HotelCard
-              key={hotel.hotelId}
-              checkInDate={hotel.checkInDate}
-              checkOutDate={hotel.checkOutDate}
-              hotelId={hotel.hotelId}
-              price={hotel.bestPricePerNight}
-            />
-          ))
-        ) : (
-          // TODO: handle no hotels found
-          <Title>No hotels found</Title>
-        )}
-      </section>
+      <HotelCardListing hotelData={hotels} />
     </main>
   )
 }

components/HotelReservation/HotelCard/index.tsx

@@ -1,5 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
+import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import {
@@ -15,43 +14,30 @@ import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import styles from "./hotelCard.module.css"
 
 import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default async function HotelCard({
-  checkInDate,
-  checkOutDate,
-  hotelId,
-  price,
-}: HotelCardProps) {
-  const intl = await getIntl()
+export default function HotelCard({ hotel }: HotelCardProps) {
+  const intl = useIntl()
 
-  // TODO: Use real endpoint.
-  const hotel = tempHotelData.data.attributes
+  const { hotelData } = hotel
+  const { price } = hotel
 
-  const hotelResponse = await serverClient().hotel.hotel.get({
-    hotelId: hotelId.toString(),
-    language: getLang(),
-  })
+  if (!hotelData) return null
+  if (!price) return null
 
-  if (!hotelResponse) return null
-
-  const { data } = hotelResponse
-
-  const sortedAmenities = data.attributes.detailedFacilities
-    .sort((a, b) => b.sortOrder - a.sortOrder)
+  const sortedAmenities = hotelData.detailedFacilities
+    ?.sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
   return (
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={data.attributes.hotelContent.images.imageSizes.large}
-          alt={data.attributes.hotelContent.images.metaData.altText}
+          src={hotelData.hotelContent.images.imageSizes.medium}
+          alt={hotelData.hotelContent.images.metaData.altText}
           width={300}
           height={200}
           className={styles.image}
@@ -59,25 +45,25 @@ export default async function HotelCard({
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {data.attributes.ratings?.tripAdvisor.rating}
+            {hotelData.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
       </section>
       <section className={styles.hotelInformation}>
         <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
-          {hotel.name}
+          {hotelData.name}
         </Title>
         <Footnote color="textMediumContrast" className={styles.adress}>
-          {`${data.attributes.address.streetAddress}, ${data.attributes.address.city}`}
+          {`${hotelData.address?.streetAddress}, ${hotelData.address?.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${data.attributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+          {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>
       </section>
       <section className={styles.hotel}>
         <div className={styles.facilities}>
-          {sortedAmenities.map((facility) => {
+          {sortedAmenities?.map((facility) => {
             const IconComponent = mapFacilityToIcon(facility.name)
             return (
               <div className={styles.facilitiesItem} key={facility.id}>

components/HotelReservation/HotelCardListing/hotelCardListing.module.css

@@ -0,0 +1,5 @@
+.hotelCards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x4);
+}

components/HotelReservation/HotelCardListing/index.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import HotelCard from "../HotelCard"
+
+import styles from "./hotelCardListing.module.css"
+
+import { HotelCardListingProps } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+
+export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
+  if (!hotelData) return null
+
+  return (
+    <section className={styles.hotelCards}>
+      {hotelData && hotelData.length ? (
+        hotelData.map((hotel) => (
+          <HotelCard key={hotel.hotelData?.name} hotel={hotel} />
+        ))
+      ) : (
+        <Title>Hallå</Title>
+      )}
+    </section>
+  )
+}

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -3,15 +3,15 @@ import { getIntl } from "@/i18n"
 import styles from "./hotelFilter.module.css"
 
 export default async function HotelFilter() {
-  const { formatMessage } = await getIntl()
+  const intl = await getIntl()
 
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Hotel facilities" })}
+        {intl.formatMessage({ id: "Hotel facilities" })}
       </div>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Hotel surroundings" })}
+        {intl.formatMessage({ id: "Hotel surroundings" })}
         {/* {filters.hotelSurroundings.map((surroundings) => (
           <div key={surroundings} className={styles.filter}>
             <input id={surroundings} name={surroundings} type="checkbox" />

types/components/hotelReservation/selectHotel/availabilityInput.ts

@@ -0,0 +1,10 @@
+export type AvailabilityInput = {
+  cityId: string
+  roomStayStartDate: string
+  roomStayEndDate: string
+  adults: number
+  children?: number
+  promotionCode?: string
+  reservationProfileType?: string
+  attachedProfileId?: string
+}

types/components/hotelReservation/selectHotel/hotelCardListingProps.ts

@@ -0,0 +1,12 @@
+import { AvailabilityPrices } from "@/server/routers/hotels/output"
+
+import { Hotel } from "@/types/hotel"
+
+export type HotelCardListingProps = {
+  hotelData: HotelData[]
+}
+
+export type HotelData = {
+  hotelData: Hotel | undefined
+  price: AvailabilityPrices
+}

types/components/hotelReservation/selectHotel/hotelCardProps.ts

@@ -1,11 +1,5 @@
-import {
-  Availability,
-  AvailabilityPrices,
-} from "@/server/routers/hotels/output"
+import { HotelData } from "./hotelCardListingProps"
 
 export type HotelCardProps = {
-  checkInDate: Availability["data"][number]["attributes"]["checkInDate"]
-  checkOutDate: Availability["data"][number]["attributes"]["checkOutDate"]
-  hotelId: Availability["data"][number]["attributes"]["hotelId"]
-  price: AvailabilityPrices
+  hotel: HotelData
 }