Merged in feature/bookingwidget-client-side (pull request #1481)

Move more of BookingWidget to client SW-1639

* feat: move getLocations in booking widget to client side so that it's also cached on the client reducing the blinking when switching urls (and reducing duplicate calls)


Approved-by: Linus Flood

apps/scandic-web/components/BookingWidget/Client.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
 import { dt } from "@/lib/dt"
+import { trpc } from "@/lib/trpc/client"
 import { StickyElementNameEnum } from "@/stores/sticky-position"
 
 import Form, {
@@ -12,6 +13,7 @@ import Form, {
 } from "@/components/Forms/BookingWidget"
 import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
 import { CloseLargeIcon } from "@/components/Icons"
+import useLang from "@/hooks/useLang"
 import useStickyPosition from "@/hooks/useStickyPosition"
 import { debounce } from "@/utils/debounce"
 import isValidJson from "@/utils/isValidJson"
@@ -31,32 +33,14 @@ import type {
 } from "@/types/components/bookingWidget"
 import type { Location } from "@/types/trpc/routers/hotel/locations"
 
-function getLocationObj(locations: Location[], destination: string) {
-  try {
-    const location = locations.find((location) => {
-      if (location.type === "hotels") {
-        return location.operaId === destination
-      } else if (location.type === "cities") {
-        return location.name.toLowerCase() === destination.toLowerCase()
-      }
-    })
-
-    if (location) {
-      return location
-    }
-  } catch (_) {
-    // ignore any errors
-  }
-  return null
-}
-
 export default function BookingWidgetClient({
-  locations,
   type,
   bookingWidgetSearchParams,
 }: BookingWidgetClientProps) {
   const [isOpen, setIsOpen] = useState(false)
   const bookingWidgetRef = useRef(null)
+  const lang = useLang()
+  const [locations] = trpc.hotel.locations.get.useSuspenseQuery({ lang })
 
   useStickyPosition({
     ref: bookingWidgetRef,
@@ -225,3 +209,22 @@ export function BookingWidgetSkeleton() {
     </>
   )
 }
+
+function getLocationObj(locations: Location[], destination: string) {
+  try {
+    const location = locations.find((location) => {
+      if (location.type === "hotels") {
+        return location.operaId === destination
+      } else if (location.type === "cities") {
+        return location.name.toLowerCase() === destination.toLowerCase()
+      }
+    })
+
+    if (location) {
+      return location
+    }
+  } catch (_) {
+    // ignore any errors
+  }
+  return null
+}

apps/scandic-web/components/BookingWidget/index.tsx

@@ -1,16 +1,9 @@
-import {
-  getLocations,
-  isBookingWidgetHidden,
-} from "@/lib/trpc/memoizedRequests"
+import { isBookingWidgetHidden } from "@/lib/trpc/memoizedRequests"
 
 import BookingWidgetClient from "./Client"
 
 import type { BookingWidgetProps } from "@/types/components/bookingWidget"
 
-export function preload() {
-  void getLocations()
-}
-
 export default async function BookingWidget({
   type,
   bookingWidgetSearchParams,
@@ -21,15 +14,8 @@ export default async function BookingWidget({
     return null
   }
 
-  const locations = await getLocations()
-
-  if (!locations || "error" in locations) {
-    return null
-  }
-
   return (
     <BookingWidgetClient
-      locations={locations.data}
       type={type}
       bookingWidgetSearchParams={bookingWidgetSearchParams}
     />