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