Merged in fix/SW-1103-page-loading (pull request #1181)

Fix/SW-1103 page loading

* feat(SW-1103): Move backend req behinde suspense

* fix/SW-1103 fix merge conflicts


Approved-by: Joakim Jäderberg

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

@@ -1,4 +1,3 @@
-import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
@@ -6,8 +5,6 @@ import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/S
 import { MapContainer } from "@/components/MapContainer"
 import { setLang } from "@/i18n/serverContext"
 
-import { getHotelSearchDetails } from "../../utils"
-
 import styles from "./page.module.css"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
@@ -18,32 +15,15 @@ export default async function SelectHotelMapPage({
   searchParams,
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
-  const searchDetails = await getHotelSearchDetails({ searchParams })
-  if (!searchDetails) return notFound()
-  const {
-    city,
-    adultsInRoom,
-    childrenInRoomString,
-    childrenInRoom,
-    selectHotelParams,
-  } = searchDetails
-
-  if (!city) return notFound()
 
   return (
     <div className={styles.main}>
       <MapContainer>
         <Suspense
-          key={city.name}
+          key={searchParams.city}
           fallback={<SelectHotelMapContainerSkeleton />}
         >
-          <SelectHotelMapContainer
+          <SelectHotelMapContainer searchParams={searchParams} />
-            city={city}
-            selectHotelParams={selectHotelParams}
-            adultsInRoom={adultsInRoom}
-            childrenInRoomString={childrenInRoomString}
-            childrenInRoom={childrenInRoom}
-          />
         </Suspense>
       </MapContainer>
     </div>

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

@@ -1,12 +1,9 @@
-import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import SelectHotel from "@/components/HotelReservation/SelectHotel"
 import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
-import { getHotelSearchDetails } from "../utils"
-
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
 
@@ -15,35 +12,18 @@ export default async function SelectHotelPage({
   searchParams,
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
-  const searchDetails = await getHotelSearchDetails({ searchParams })
-  if (!searchDetails) return notFound()
-  const {
-    city,
-    selectHotelParams,
-    adultsInRoom,
-    childrenInRoomString,
-    childrenInRoom,
-  } = searchDetails
 
-  if (!city) return notFound()
+  const roomKey = Object.keys(searchParams)
-
+    .filter((key) => key.startsWith("room["))
-  const reservationParams = {
+    .map((key) => searchParams[key])
-    selectHotelParams,
+    .join("-")
-    adultsInRoom,
-    childrenInRoomString,
-    childrenInRoom,
-  }
 
   return (
     <Suspense
-      key={`${city.name}-${searchParams.fromDate}-${searchParams.toDate}-${adultsInRoom}-${childrenInRoomString}`}
+      key={`${searchParams.name}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
       fallback={<SelectHotelSkeleton />}
     >
-      <SelectHotel
+      <SelectHotel params={params} searchParams={searchParams} />
-        city={city}
-        params={params}
-        reservationParams={reservationParams}
-      />
     </Suspense>
   )
 }

components/HotelReservation/HotelCardListing/index.tsx

@@ -38,10 +38,10 @@ export default function HotelCardListing({
     [searchParams]
   )
 
-  const sortedHotels = useMemo(
+  const sortedHotels = useMemo(() => {
-    () => getSortedHotels({ hotels: hotelData, sortBy }),
+    if (!hotelData) return []
-    [hotelData, sortBy]
+    return getSortedHotels({ hotels: hotelData, sortBy })
-  )
+  }, [hotelData, sortBy])
 
   const hotels = useMemo(() => {
     if (activeFilters.length === 0) return sortedHotels

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx

@@ -1,4 +1,5 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import { env } from "@/env/server"
@@ -8,6 +9,7 @@ import {
   fetchAvailableHotels,
   getFiltersFromHotels,
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
+import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getLang } from "@/i18n/serverContext"
 import { safeTry } from "@/utils/safeTry"
@@ -21,6 +23,7 @@ import type {
   NullableHotelData,
 } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { SelectHotelMapContainerProps } from "@/types/components/hotelReservation/selectHotel/map"
+import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import {
   TrackingChannelEnum,
   type TrackingSDKHotelInfo,
@@ -32,15 +35,32 @@ function isValidHotelData(hotel: NullableHotelData): hotel is HotelData {
 }
 
 export async function SelectHotelMapContainer({
-  city,
+  searchParams,
-  selectHotelParams,
-  adultsInRoom,
-  childrenInRoom,
-  childrenInRoomString,
 }: SelectHotelMapContainerProps) {
   const lang = getLang()
   const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
   const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+  const getHotelSearchDetailsPromise = safeTry(
+    getHotelSearchDetails({
+      searchParams: searchParams as SelectHotelSearchParams & {
+        [key: string]: string
+      },
+    })
+  )
+
+  const [searchDetails] = await getHotelSearchDetailsPromise
+
+  if (!searchDetails) return notFound()
+
+  const {
+    city,
+    selectHotelParams,
+    adultsInRoom,
+    childrenInRoom,
+    childrenInRoomString,
+  } = searchDetails
+
+  if (!city) return notFound()
 
   const fetchAvailableHotelsPromise = safeTry(
     fetchAvailableHotels({

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css

@@ -43,5 +43,6 @@
   }
   .skeletonContainer {
     display: flex;
+    width: 360px;
   }
 }

components/HotelReservation/SelectHotel/index.tsx

@@ -1,4 +1,5 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import {
@@ -10,6 +11,7 @@ import {
   fetchAvailableHotels,
   getFiltersFromHotels,
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
+import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils"
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Alert from "@/components/TempDesignSystem/Alert"
@@ -33,6 +35,7 @@ import styles from "./selectHotel.module.css"
 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
 import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { SelectHotelProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import {
   TrackingChannelEnum,
   type TrackingSDKHotelInfo,
@@ -41,18 +44,32 @@ import {
 import { AlertTypeEnum } from "@/types/enums/alert"
 
 export default async function SelectHotel({
-  city,
   params,
-  reservationParams,
+  searchParams,
 }: SelectHotelProps) {
+  const intl = await getIntl()
+
+  const getHotelSearchDetailsPromise = safeTry(
+    getHotelSearchDetails({
+      searchParams: searchParams as SelectHotelSearchParams & {
+        [key: string]: string
+      },
+    })
+  )
+
+  const [searchDetails] = await getHotelSearchDetailsPromise
+
+  if (!searchDetails) return notFound()
+
   const {
+    city,
     selectHotelParams,
     adultsInRoom,
     childrenInRoomString,
     childrenInRoom,
-  } = reservationParams
+  } = searchDetails
 
-  const intl = await getIntl()
+  if (!city) return notFound()
 
   const hotelsPromise = safeTry(
     fetchAvailableHotels({
@@ -76,7 +93,7 @@ export default async function SelectHotel({
     []
   const filterList = getFiltersFromHotels(validHotels)
 
-  const searchParams = convertObjToSearchParams(selectHotelParams)
+  const convertedSearchParams = convertObjToSearchParams(selectHotelParams)
   const breadcrumbs = [
     {
       title: intl.formatMessage({ id: "Home" }),
@@ -90,7 +107,7 @@ export default async function SelectHotel({
     },
     {
       title: intl.formatMessage({ id: "Select hotel" }),
-      href: `${selectHotel(params.lang)}/?${searchParams.toString()}`,
+      href: `${selectHotel(params.lang)}/?${convertedSearchParams}`,
       uid: "select-hotel",
     },
     {

types/components/hotelReservation/selectHotel/map.ts

@@ -65,9 +65,5 @@ export interface HotelCardDialogListingProps {
 }
 
 export type SelectHotelMapContainerProps = {
-  city: Location
+  searchParams: SelectHotelSearchParams
-  selectHotelParams: SelectHotelSearchParams
-  adultsInRoom: number
-  childrenInRoomString: string | undefined
-  childrenInRoom: Child[] | undefined
 }

types/components/hotelReservation/selectHotel/selectHotel.ts

@@ -1,7 +1,5 @@
 import type { CheckInData, Hotel, ParkingData } from "@/types/hotel"
-import type { Location } from "@/types/trpc/routers/hotel/locations"
 import type { Lang } from "@/constants/languages"
-import type { Child } from "../selectRate/selectRate"
 import type { SelectHotelSearchParams } from "./selectHotelSearchParams"
 
 export enum AvailabilityEnum {
@@ -41,14 +39,8 @@ export interface MeetingsAndConferencesProps {
 }
 
 export interface SelectHotelProps {
-  city: Location
   params: {
     lang: Lang
   }
-  reservationParams: {
+  searchParams: SelectHotelSearchParams
-    selectHotelParams: SelectHotelSearchParams
-    adultsInRoom: number
-    childrenInRoomString: string | undefined
-    childrenInRoom: Child[] | undefined
-  }
 }