refactor: update SidePeek composition

components/ContentType/HotelPage/HotelPage.tsx

@@ -2,8 +2,8 @@ import { about, amenities } from "@/constants/routes/hotelPageParams"
 import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
-import SidePeekContainer from "@/components/TempDesignSystem/SidePeek/Container"
-import SidePeekContent from "@/components/TempDesignSystem/SidePeek/Content"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import SidePeekItem from "@/components/TempDesignSystem/SidePeek/Item"
 import { getIntl } from "@/i18n"
 
 import AmenitiesList from "./AmenitiesList"
@@ -20,10 +20,10 @@ export default async function HotelPage() {
   if (!hotelPageIdentifierData) {
     return null
   }
-
+  const lang = getLang()
   const { attributes, roomCategories } = await serverClient().hotel.getHotel({
     hotelId: hotelPageIdentifierData.hotel_page_id,
-    language: getLang(),
+    language: lang,
     include: ["RoomCategories"],
   })
 
@@ -35,29 +35,27 @@ export default async function HotelPage() {
       <main className={styles.mainSection}>
         <div className={styles.introContainer}>
           <IntroSection
-            // TODO: remove prop drilling once getLang() is merged
-            lang={lang}
             hotelName={attributes.name}
             hotelDescription={attributes.hotelContent.texts.descriptions.short}
             location={attributes.location}
             address={attributes.address}
             tripAdvisor={attributes.ratings.tripAdvisor}
           />
-          <SidePeekContainer>
-            <SidePeekContent
-              contentKey={"amenities"}
+          <SidePeek>
+            <SidePeekItem
+              contentKey={amenities[lang]}
               title={formatMessage({ id: "Amenities" })}
             >
               {/* TODO: Render amenities as per the design. */}
               Read more about the amenities here
-            </SidePeekContent>
-            <SidePeekContent
-              contentKey={"about"}
+            </SidePeekItem>
+            <SidePeekItem
+              contentKey={about[lang]}
               title={formatMessage({ id: "About the hotel" })}
             >
               Some additional information about the hotel
-            </SidePeekContent>
-          </SidePeekContainer>
+            </SidePeekItem>
+          </SidePeek>
           <AmenitiesList
             detailedFacilities={attributes.detailedFacilities}
             lang={lang}

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -9,7 +9,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-
+import { getLang } from "@/i18n/serverContext"
 import { IntroSectionProps } from "./types"
 
 import styles from "./introSection.module.css"
@@ -20,8 +20,6 @@ export default async function IntroSection({
   location,
   address,
   tripAdvisor,
-  // TODO: remove prop drilling once getLang() is merged
-  lang,
 }: IntroSectionProps) {
   const intl = await getIntl()
   const { formatMessage } = intl
@@ -31,6 +29,7 @@ export default async function IntroSection({
     { id: "Distance to city centre" },
     { number: distanceToCentre }
   )
+  const lang = getLang()
   const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`
   const formattedTripAdvisorText = formatMessage(
     { id: "Tripadvisor reviews" },

components/ContentType/HotelPage/IntroSection/types.ts

@@ -1,5 +1,3 @@
-import { Lang } from "@/constants/languages"
-
 import {
   HotelAddress,
   HotelData,
@@ -13,6 +11,4 @@ export type IntroSectionProps = {
   location: HotelLocation
   address: HotelAddress
   tripAdvisor: HotelTripAdvisor
-  // TODO: remove prop drilling once getLang() is merged
-  lang: Lang
 }

components/TempDesignSystem/SidePeek/Container/index.tsx

@@ -1,55 +0,0 @@
-"use client"
-
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import React, { Children, cloneElement, useEffect, useState } from "react"
-
-import SidePeek from "@/components/TempDesignSystem/SidePeek"
-import { SidePeekContentKey } from "@/components/TempDesignSystem/SidePeek/types"
-
-export default function SidePeekContainer({
-  children,
-}: React.PropsWithChildren) {
-  const router = useRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const [activeSidePeek, setActiveSidePeek] =
-    useState<SidePeekContentKey | null>(() => {
-      const sidePeekParam = searchParams.get(
-        "open"
-      ) as SidePeekContentKey | null
-      return sidePeekParam || null
-    })
-
-  useEffect(() => {
-    const sidePeekParam = searchParams.get("open") as SidePeekContentKey | null
-    if (sidePeekParam !== activeSidePeek) {
-      setActiveSidePeek(sidePeekParam)
-    }
-  }, [searchParams, activeSidePeek])
-
-  function handleClose(isOpen: boolean) {
-    if (!isOpen) {
-      setActiveSidePeek(null)
-
-      const nextSearchParams = new URLSearchParams(searchParams.toString())
-      nextSearchParams.delete("open")
-
-      router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
-    }
-  }
-  const childrenWithIsActive = Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child
-    }
-    return cloneElement(child as React.ReactElement, {
-      isActive:
-        (child.props.contentKey as SidePeekContentKey) === activeSidePeek,
-    })
-  })
-
-  return (
-    <SidePeek activeContent={activeSidePeek} onClose={handleClose}>
-      {childrenWithIsActive}
-    </SidePeek>
-  )
-}

components/TempDesignSystem/SidePeek/Item/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Children, PropsWithChildren } from "react"
+import { PropsWithChildren } from "react"
 
 import { CloseIcon } from "@/components/Icons"
 import { SidePeekContentProps } from "@/components/TempDesignSystem/SidePeek/types"
@@ -8,16 +8,16 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 
 import Button from "../../Button"
 
-import styles from "./content.module.css"
+import styles from "./sidePeekItem.module.css"
 
-export default function Content({
+function SidePeekItem({
   title,
   children,
   isActive = false,
   onClose,
 }: PropsWithChildren<SidePeekContentProps>) {
   return isActive ? (
-    <aside className={styles.content}>
+    <aside className={styles.sidePeekItem}>
       <header className={styles.header}>
         <Title color="burgundy" textTransform="uppercase" level="h2" as="h3">
           {title}
@@ -35,3 +35,5 @@ export default function Content({
     </aside>
   ) : null
 }
+
+export default SidePeekItem

components/TempDesignSystem/SidePeek/Item/sidePeekItem.module.css

@@ -1,11 +1,11 @@
-.content {
+.sidePeekItem {
   display: grid;
   grid-template-rows: min-content auto;
   gap: var(--Spacing-x4);
   height: 100%;
 }
 
-.content > * {
+.content>* {
   padding: var(--Spacing-x3) var(--Spacing-x2);
 }
 
@@ -20,8 +20,8 @@
   justify-content: space-between;
 }
 
-@media and screen (min-width: 1367px) {
-  .content > * {
+@media screen and (min-width: 1367px) {
+  .content>* {
     padding: var(--Spacing-x4);
   }
-}
+}

components/TempDesignSystem/SidePeek/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 
 import { useIsSSR } from "@react-aria/ssr"
-import { Children, cloneElement, PropsWithChildren } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import React, { Children, cloneElement, useEffect, useState } from "react"
 import {
   Dialog,
   DialogTrigger,
@@ -9,15 +10,54 @@ import {
   ModalOverlay,
 } from "react-aria-components"
 
-import { SidePeekProps } from "./types"
+import { SidePeekContentKey } from "@/components/TempDesignSystem/SidePeek/types"
 
 import styles from "./sidePeek.module.css"
 
-export default function SidePeek({
-  children,
-  onClose,
-  activeContent,
-}: PropsWithChildren<SidePeekProps>) {
+function SidePeek({ children }: React.PropsWithChildren) {
+  // TODO: to make this more reusable,
+  // should the param logic be moved up/out so this component can be
+  // controlled by e.g. URL segments
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [activeSidePeek, setActiveSidePeek] =
+    useState<SidePeekContentKey | null>(() => {
+      const sidePeekParam = searchParams.get(
+        "open"
+      ) as SidePeekContentKey | null
+      return sidePeekParam || null
+    })
+
+  useEffect(() => {
+    const sidePeekParam = searchParams.get("open") as SidePeekContentKey | null
+    if (sidePeekParam !== activeSidePeek) {
+      setActiveSidePeek(sidePeekParam)
+    }
+  }, [searchParams, activeSidePeek])
+
+  function handleClose(isOpen: boolean) {
+    if (!isOpen) {
+      setActiveSidePeek(null)
+
+      const nextSearchParams = new URLSearchParams(searchParams.toString())
+      nextSearchParams.delete("open")
+
+      router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
+    }
+  }
+
+  const sidePeekChildren = Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+    return cloneElement(child as React.ReactElement, {
+      isActive:
+        (child.props.contentKey as SidePeekContentKey) === activeSidePeek,
+      onClose: handleClose,
+    })
+  })
+
   const isSSR = useIsSSR()
   return isSSR ? (
     <div>{children}</div>
@@ -25,24 +65,16 @@ export default function SidePeek({
     <DialogTrigger>
       <ModalOverlay
         className={styles.overlay}
-        isOpen={!!activeContent}
-        onOpenChange={onClose}
+        isOpen={!!activeSidePeek}
+        onOpenChange={handleClose}
         isDismissable
       >
         <Modal className={styles.sidePeek}>
-          <Dialog className={styles.dialog}>
-            {({ close }) => (
-              <>
-                {Children.map(children, (child) => {
-                  return cloneElement(child as React.ReactElement, {
-                    onClose: close,
-                  })
-                })}
-              </>
-            )}
-          </Dialog>
+          <Dialog className={styles.dialog}>{sidePeekChildren}</Dialog>
         </Modal>
       </ModalOverlay>
     </DialogTrigger>
   )
 }
+
+export default SidePeek