scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Move Sidepeek param logic to SidePeekProvider

Browse Source
This commit is contained in:
Arvid Norlin
2024-09-03 15:35:06 +02:00
parent 5cfbd8e70d
commit 2849c69c52
11 changed files with 227 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -73,6 +73,7 @@ export default async function IntroSection({
color="burgundy"
variant="icon"
href={`?s=${about[lang]}`}
scroll={false}
>
{intl.formatMessage({ id: "Read more about the hotel" })}
<ArrowRight color="burgundy" />

99
components/ContentType/HotelPage/SidePeeks.tsx
View File

@@ -1,99 +0,0 @@
"use client"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useEffect, useState } from "react"
import { useIntl } from "react-intl"
import {
about,
activities,
amenities,
meetingsAndConferences,
restaurantAndBar,
wellnessAndExercise,
} from "@/constants/routes/hotelPageParams"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import SidePeekItem from "@/components/TempDesignSystem/SidePeek/Item"
import { SidePeekContentKey } from "@/components/TempDesignSystem/SidePeek/types"
import useLang from "@/hooks/useLang"
function SidePeekContainer() {
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
const [activeSidePeek, setActiveSidePeek] =
useState<SidePeekContentKey | null>(() => {
const sidePeekParam = searchParams.get("s") as SidePeekContentKey | null
return sidePeekParam || null
})
const lang = useLang()
const intl = useIntl()
useEffect(() => {
const sidePeekParam = searchParams.get("s") 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("s")
router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
}
}
return (
<SidePeek handleClose={handleClose} activeSidePeek={activeSidePeek}>
<SidePeekItem
contentKey={amenities[lang]}
title={intl.formatMessage({ id: "Amenities" })}
>
{/* TODO: Render amenities as per the design. */}
Read more about the amenities here
</SidePeekItem>
<SidePeekItem
contentKey={about[lang]}
title={intl.formatMessage({ id: "Read more about the hotel" })}
>
Some additional information about the hotel
</SidePeekItem>
<SidePeekItem
contentKey={restaurantAndBar[lang]}
title={intl.formatMessage({ id: "Restaurant & Bar" })}
>
{/* TODO */}
Restaurant & Bar
</SidePeekItem>
<SidePeekItem
contentKey={wellnessAndExercise[lang]}
title={intl.formatMessage({ id: "Wellness & Exercise" })}
>
{/* TODO */}
Wellness & Exercise
</SidePeekItem>
<SidePeekItem
contentKey={activities[lang]}
title={intl.formatMessage({ id: "Activities" })}
>
{/* TODO */}
Activities
</SidePeekItem>
<SidePeekItem
contentKey={meetingsAndConferences[lang]}
title={intl.formatMessage({ id: "Meetings & Conferences" })}
>
{/* TODO */}
Meetings & Conferences
</SidePeekItem>
</SidePeek>
)
}
export default SidePeekContainer

55
components/ContentType/HotelPage/index.tsx
View File

@@ -1,6 +1,12 @@
import hotelPageParams from "@/constants/routes/hotelPageParams"
import { env } from "@/env/server"
import { serverClient } from "@/lib/trpc/server"
import SidePeekProvider from "@/components/SidePeekProvider"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { MOCK_FACILITIES } from "./Facilities/mockData"
import { setActivityCard } from "./Facilities/utils"
import DynamicMap from "./Map/DynamicMap"
@@ -12,13 +18,14 @@ import Facilities from "./Facilities"
import IntroSection from "./IntroSection"
import PreviewImages from "./PreviewImages"
import { Rooms } from "./Rooms"
import SidePeeks from "./SidePeeks"
import TabNavigation from "./TabNavigation"
import styles from "./hotelPage.module.css"
export default async function HotelPage() {
const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
const intl = await getIntl()
const lang = getLang()
const hotelData = await serverClient().hotel.get({
include: ["RoomCategories"],
})
@@ -61,6 +68,51 @@ export default async function HotelPage() {
address={hotelAddress}
tripAdvisor={hotelRatings?.tripAdvisor}
/>
<SidePeekProvider>
{/* eslint-disable import/no-named-as-default-member */}
<SidePeek
contentKey={hotelPageParams.amenities[lang]}
title={intl.formatMessage({ id: "Amenities" })}
>
{/* TODO: Render amenities as per the design. */}
Read more about the amenities here
</SidePeek>
<SidePeek
contentKey={hotelPageParams.about[lang]}
title={intl.formatMessage({ id: "Read more about the hotel" })}
>
Some additional information about the hotel
</SidePeek>
<SidePeek
contentKey={hotelPageParams.restaurantAndBar[lang]}
title={intl.formatMessage({ id: "Restaurant & Bar" })}
>
{/* TODO */}
Restaurant & Bar
</SidePeek>
<SidePeek
contentKey={hotelPageParams.wellnessAndExercise[lang]}
title={intl.formatMessage({ id: "Wellness & Exercise" })}
>
{/* TODO */}
Wellness & Exercise
</SidePeek>
<SidePeek
contentKey={hotelPageParams.activities[lang]}
title={intl.formatMessage({ id: "Activities" })}
>
{/* TODO */}
Activities
</SidePeek>
<SidePeek
contentKey={hotelPageParams.meetingsAndConferences[lang]}
title={intl.formatMessage({ id: "Meetings & Conferences" })}
>
{/* TODO */}
Meetings & Conferences
</SidePeek>
{/* eslint-enable import/no-named-as-default-member */}
</SidePeekProvider>
<AmenitiesList detailedFacilities={hotelDetailedFacilities} />
</div>
<Rooms rooms={roomCategories} />
@@ -80,7 +132,6 @@ export default async function HotelPage() {
/>
</>
) : null}
<SidePeeks />
</div>
)
}