From c0f5c0278be12eee540ba70da9d14e0aa8519692 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 7 Feb 2025 07:02:53 +0000
Subject: [PATCH] Merged in feat/skeletons-and-cache (pull request #1273)

feat: skeleton key bullet proof. 10 min cache on city search response

* feat: skeleton key bullet proof. 10 min cache on city search response

* Refactor server.ts


Approved-by: Michael Zetterberg
---
 .../(standard)/select-hotel/map/page.tsx      |  7 +------
 .../(standard)/select-hotel/page.tsx          |  7 +------
 .../(standard)/select-rate/page.tsx           |  7 +------
 env/server.ts                                 | 21 ++++++++++++-------
 server/routers/hotels/query.ts                |  8 +++++++
 5 files changed, 24 insertions(+), 26 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 a1d11d80d..c5383562c 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,16 +16,11 @@ 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}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
+          key={JSON.stringify(searchParams)}
           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 5dc369727..065533eba 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -13,14 +13,9 @@ export default async function SelectHotelPage({
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
 
-  const roomKey = Object.keys(searchParams)
-    .filter((key) => key.startsWith("room["))
-    .map((key) => searchParams[key])
-    .join("-")
-
   return (
     <Suspense
-      key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
+      key={JSON.stringify(searchParams)}
       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 0483fdc65..ccda67e21 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -79,11 +79,6 @@ 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
@@ -96,7 +91,7 @@ export default async function SelectRatePage({
       />
 
       <Suspense
-        key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}-${hotelId}`}
+        key={JSON.stringify(searchParams)}
         fallback={<RoomsContainerSkeleton />}
       >
         <RoomsContainer
diff --git a/env/server.ts b/env/server.ts
index faa087dd4..4a5f900e9 100644
--- a/env/server.ts
+++ b/env/server.ts
@@ -171,16 +171,20 @@ export const env = createEnv({
 
     CACHE_TIME_HOTELDATA: z
       .number()
-      .transform(() =>
-        process.env.CMS_ENVIRONMENT === "test" ? 5 * 60 : 30 * 60
-      )
-      .default(30 * 60),
+      .default(30 * 60)
+      .transform((val) =>
+        process.env.CMS_ENVIRONMENT === "test" ? 5 * 60 : val
+      ),
     CACHE_TIME_HOTELS: z
       .number()
-      .transform(() =>
-        process.env.CMS_ENVIRONMENT === "test" ? 5 * 60 : TWENTYFOUR_HOURS
-      )
-      .default(TWENTYFOUR_HOURS),
+      .default(TWENTYFOUR_HOURS)
+      .transform((val) =>
+        process.env.CMS_ENVIRONMENT === "test" ? 5 * 60 : val
+      ),
+    CACHE_TIME_CITY_SEARCH: z
+      .number()
+      .default(10 * 60)
+      .transform((val) => (process.env.CMS_ENVIRONMENT === "test" ? 60 : val)),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
@@ -268,6 +272,7 @@ export const env = createEnv({
 
     CACHE_TIME_HOTELDATA: process.env.CACHE_TIME_HOTELDATA,
     CACHE_TIME_HOTELS: process.env.CACHE_TIME_HOTELS,
+    CACHE_TIME_CITY_SEARCH: process.env.CACHE_TIME_CITY_SEARCH,
   },
 })
 
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 2ca875de4..fbfc29b64 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -238,9 +238,13 @@ export const hotelQueryRouter = router({
         const apiResponse = await api.get(
           api.endpoints.v1.Availability.city(cityId),
           {
+            cache: undefined,
             headers: {
               Authorization: `Bearer ${ctx.serviceToken}`,
             },
+            next: {
+              revalidate: env.CACHE_TIME_CITY_SEARCH,
+            },
           },
           params
         )
@@ -354,9 +358,13 @@ export const hotelQueryRouter = router({
         const apiResponse = await api.get(
           api.endpoints.v1.Availability.hotels(),
           {
+            cache: undefined,
             headers: {
               Authorization: `Bearer ${ctx.serviceToken}`,
             },
+            next: {
+              revalidate: env.CACHE_TIME_CITY_SEARCH,
+            },
           },
           params
         )