From 9ad8d397129390ff17750c373ac77abc30d06a6a Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Thu, 6 Feb 2025 13:30:18 +0000
Subject: [PATCH] Merged in fix/hotelreservation-skeletons (pull request #1270)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: skeletons in hotelreservation key includes all search params

* fix: skeletons in hotelreservation key includes all search params


Approved-by: Joakim Jäderberg
---
 .../(standard)/select-hotel/map/page.tsx               |  7 ++++++-
 .../hotelreservation/(standard)/select-hotel/page.tsx  |  2 +-
 .../hotelreservation/(standard)/select-rate/page.tsx   | 10 +++++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
index 024ab49c5..a1d11d80d 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
@@ -16,11 +16,16 @@ export default async function SelectHotelMapPage({
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
 
+  const roomKey = Object.keys(searchParams)
+    .filter((key) => key.startsWith("room["))
+    .map((key) => searchParams[key])
+    .join("-")
+
   return (
     <div className={styles.main}>
       <MapContainer>
         <Suspense
-          key={searchParams.city}
+          key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
           fallback={<SelectHotelMapContainerSkeleton />}
         >
           <SelectHotelMapContainer searchParams={searchParams} />
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index b6f7bb4d9..5dc369727 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -20,7 +20,7 @@ export default async function SelectHotelPage({
 
   return (
     <Suspense
-      key={`${searchParams.name}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
+      key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
       fallback={<SelectHotelSkeleton />}
     >
       <SelectHotel params={params} searchParams={searchParams} />
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
index e9f4ce451..4032c91ef 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -79,6 +79,11 @@ export default async function SelectRatePage({
 
   const hotelId = +hotel.id
 
+  const roomKey = Object.keys(searchParams)
+    .filter((key) => key.startsWith("room["))
+    .map((key) => searchParams[key])
+    .join("-")
+
   return (
     <>
       <HotelInfoCard
@@ -90,7 +95,10 @@ export default async function SelectRatePage({
         childArray={childrenInRoom}
       />
 
-      <Suspense key={hotelId} fallback={<RoomsContainerSkeleton />}>
+      <Suspense
+        key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}-${searchParams.hotelId}`}
+        fallback={<RoomsContainerSkeleton />}
+      >
         <RoomsContainer
           hotelId={hotelId}
           lang={params.lang}