Merged in feat/refactor-select-rate (pull request #1402)

Select-rate: refactor - converted RoomsContainer into a client component

* feat/select-rate - refactor and fixed duplicate key warning

* Rooms as client component

* Fixed lang in input

* It works

* Cleanup

* Cleanup

* PR fixes


Approved-by: Joakim Jäderberg

components/HotelReservation/SelectRate/RoomsContainer/RoomsContainerSkeleton.tsx

@@ -6,7 +6,7 @@ type Props = {
   count?: number
 }
 
-export async function RoomsContainerSkeleton({ count = 4 }: Props) {
+export function RoomsContainerSkeleton({ count = 4 }: Props) {
   return (
     <div className={styles.container}>
       <div className={styles.filterContainer}></div>

components/HotelReservation/SelectRate/RoomsContainer/index.tsx

@@ -1,109 +1,59 @@
+"use client"
+import { useSession } from "next-auth/react"
+
 import { dt } from "@/lib/dt"
-import {
-  getHotel,
-  getPackages,
-  getRoomsAvailability,
-} from "@/lib/trpc/memoizedRequests"
 
-import { auth } from "@/auth"
-import { generateChildrenString } from "@/components/HotelReservation/utils"
+import useLang from "@/hooks/useLang"
 import RatesProvider from "@/providers/RatesProvider"
-import { isValidSession } from "@/utils/session"
+import { isValidClientSession } from "@/utils/clientSession"
 
-import { combineRoomAvailabilities } from "../utils"
+import { useHotelPackages, useRoomsAvailability } from "../utils"
 import RateSummary from "./RateSummary"
 import Rooms from "./Rooms"
+import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"
 
-import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer"
-import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
-import type { Lang } from "@/constants/languages"
 
-export function preload(
-  hotelId: string,
-  lang: Lang,
-  fromDate: string,
-  toDate: string,
-  adults: number[],
-  children?: Child[]
-) {
-  void getHotel({ hotelId, isCardOnlyPayment: false, language: lang })
-  void getPackages({
-    adults: adults[0],
-    children: children ? children?.length : undefined,
-    endDate: toDate,
-    hotelId,
-    packageCodes: [
-      RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
-      RoomPackageCodeEnum.PET_ROOM,
-      RoomPackageCodeEnum.ALLERGY_ROOM,
-    ],
-    startDate: fromDate,
-  })
-
-  const uniqueAdultsCount = Array.from(new Set(adults))
-  uniqueAdultsCount.forEach((adultsInRoom) => {
-    void getRoomsAvailability({
-      adults: adultsInRoom,
-      children: children ? generateChildrenString(children) : undefined,
-      hotelId: +hotelId,
-      roomStayEndDate: toDate,
-      roomStayStartDate: fromDate,
-    })
-  })
-}
-
-export async function RoomsContainer({
+export function RoomsContainer({
   adultArray,
   booking,
   childArray,
   fromDate,
   hotelId,
-  lang,
+  hotelData,
   toDate,
 }: RoomsContainerProps) {
-  const session = await auth()
-  const isUserLoggedIn = isValidSession(session)
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)
+  const lang = useLang()
 
   const fromDateString = dt(fromDate).format("YYYY-MM-DD")
   const toDateString = dt(toDate).format("YYYY-MM-DD")
 
-  const hotelData = await getHotel({
-    hotelId: hotelId.toString(),
-    isCardOnlyPayment: false,
-    language: lang,
-  })
-
   const uniqueAdultsCount = Array.from(new Set(adultArray))
-  const roomsAvailabilityResults = await Promise.allSettled(
-    uniqueAdultsCount.map((adultCount) =>
-      getRoomsAvailability({
-        adults: adultCount,
-        hotelId: hotelId,
-        roomStayEndDate: toDateString,
-        roomStayStartDate: fromDateString,
-        children:
-          childArray && childArray.length > 0
-            ? generateChildrenString(childArray)
-            : undefined,
-      })
+
+  const { isPending: isLoadingAvailability, data: roomsAvailability } =
+    useRoomsAvailability(
+      uniqueAdultsCount,
+      hotelId,
+      fromDateString,
+      toDateString,
+      lang,
+      childArray
     )
+
+  const { data: packages, isPending: isLoadingPackages } = useHotelPackages(
+    adultArray,
+    childArray,
+    fromDateString,
+    toDateString,
+    hotelId,
+    lang
   )
 
-  const roomsAvailability = combineRoomAvailabilities(roomsAvailabilityResults)
-
-  const packages = await getPackages({
-    adults: adultArray[0],
-    children: childArray ? childArray.length : undefined,
-    endDate: toDateString,
-    hotelId: hotelId.toString(),
-    packageCodes: [
-      RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
-      RoomPackageCodeEnum.PET_ROOM,
-      RoomPackageCodeEnum.ALLERGY_ROOM,
-    ],
-    startDate: fromDateString,
-  })
+  if (isLoadingAvailability || isLoadingPackages) {
+    return <RoomsContainerSkeleton />
+  }
 
   if (!hotelData?.hotel) {
     return null

components/HotelReservation/SelectRate/index.tsx

@@ -10,11 +10,7 @@ import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreserva
 import HotelInfoCard, {
   HotelInfoCardSkeleton,
 } from "@/components/HotelReservation/SelectRate/HotelInfoCard"
-import {
-  preload,
-  RoomsContainer,
-} from "@/components/HotelReservation/SelectRate/RoomsContainer"
-import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/RoomsContainer/RoomsContainerSkeleton"
+import { RoomsContainer } from "@/components/HotelReservation/SelectRate/RoomsContainer"
 import TrackingSDK from "@/components/TrackingSDK"
 import { setLang } from "@/i18n/serverContext"
 import { convertSearchParamsToObj } from "@/utils/url"
@@ -45,15 +41,6 @@ export default async function SelectRatePage({
     selectHotelParams.toDate
   )
 
-  preload(
-    hotel.id,
-    params.lang,
-    fromDate.format("YYYY-MM-DD"),
-    toDate.format("YYYY-MM-DD"),
-    adultsInRoom,
-    childrenInRoom
-  )
-
   const hotelData = await getHotel({
     hotelId: hotel.id,
     isCardOnlyPayment: false,
@@ -104,18 +91,17 @@ export default async function SelectRatePage({
         <HotelInfoCard hotelData={hotelData} />
       </Suspense>
 
-      <Suspense key={suspenseKey} fallback={<RoomsContainerSkeleton />}>
-        <RoomsContainer
-          adultArray={adultsInRoom}
-          booking={booking}
-          childArray={childrenInRoom}
-          fromDate={arrivalDate}
-          hotelId={hotelId}
-          lang={params.lang}
-          toDate={departureDate}
-        />
-      </Suspense>
-      <Suspense key={suspenseKey} fallback={null}>
+      <RoomsContainer
+        hotelData={hotelData}
+        adultArray={adultsInRoom}
+        booking={booking}
+        childArray={childrenInRoom}
+        fromDate={arrivalDate}
+        hotelId={hotelId}
+        toDate={departureDate}
+      />
+
+      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
         <TrackingSDK
           pageData={pageTrackingData}
           hotelInfo={hotelsTrackingData}

components/HotelReservation/SelectRate/utils.ts

@@ -1,4 +1,9 @@
+import { trpc } from "@/lib/trpc/client"
+
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { RoomsAvailability } from "@/types/trpc/routers/hotel/roomAvailability"
+import type { Lang } from "@/constants/languages"
 
 export function combineRoomAvailabilities(
   availabilityResults: PromiseSettledResult<RoomsAvailability | null>[]
@@ -37,3 +42,56 @@ export function getRates(
     ),
   }
 }
+
+export function useRoomsAvailability(
+  uniqueAdultsCount: number[],
+  hotelId: number,
+  fromDateString: string,
+  toDateString: string,
+  lang: Lang,
+  childArray?: Child[]
+) {
+  const returnValue =
+    trpc.hotel.availability.roomsCombinedAvailability.useQuery({
+      hotelId,
+      roomStayStartDate: fromDateString,
+      roomStayEndDate: toDateString,
+      uniqueAdultsCount,
+      childArray,
+      lang,
+    })
+
+  const combinedAvailability = returnValue.data?.length
+    ? combineRoomAvailabilities(
+        returnValue.data as PromiseSettledResult<RoomsAvailability | null>[]
+      )
+    : null
+
+  return {
+    ...returnValue,
+    data: combinedAvailability,
+  }
+}
+
+export function useHotelPackages(
+  adultArray: number[],
+  childArray: Child[] | undefined,
+  fromDateString: string,
+  toDateString: string,
+  hotelId: number,
+  lang: Lang
+) {
+  return trpc.hotel.packages.get.useQuery({
+    adults: adultArray[0], // Using the first adult count
+    children: childArray ? childArray.length : undefined,
+    endDate: toDateString,
+    hotelId: hotelId.toString(),
+    packageCodes: [
+      RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
+      RoomPackageCodeEnum.PET_ROOM,
+      RoomPackageCodeEnum.ALLERGY_ROOM,
+    ],
+    startDate: fromDateString,
+    lang: lang,
+  })
+}