From 04eb3c6d944ef3a154c1472d42f77341e7ba2ef5 Mon Sep 17 00:00:00 2001 From: Arvid Norlin Date: Mon, 12 Aug 2024 10:52:29 +0200 Subject: [PATCH] fix: enable localization of sidepeek params --- .../HotelPage/AmenitiesList/index.tsx | 8 ++++++- .../ContentType/HotelPage/HotelPage.tsx | 8 ++++++- .../HotelPage/IntroSection/index.tsx | 6 +++++- .../HotelPage/IntroSection/types.ts | 4 ++++ .../SidePeek/Container/index.tsx | 8 +++---- components/TempDesignSystem/SidePeek/data.ts | 3 ++- constants/routes/hotelPageParams.js | 21 +++++++++++++++++++ 7 files changed, 49 insertions(+), 9 deletions(-) create mode 100644 constants/routes/hotelPageParams.js diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx index 380357188..aa1939752 100644 --- a/components/ContentType/HotelPage/AmenitiesList/index.tsx +++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx @@ -1,3 +1,6 @@ +import { Lang } from "@/constants/languages" +import { amenities } from "@/constants/routes/hotelPageParams" + import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" import { ChevronRightIcon } from "@/components/Icons" import Link from "@/components/TempDesignSystem/Link" @@ -12,11 +15,14 @@ import { HotelData } from "@/types/hotel" export default async function AmenitiesList({ detailedFacilities, + // TODO: remove prop drilling once getLang() is merged + lang, }: { detailedFacilities: HotelData["data"]["attributes"]["detailedFacilities"] + lang: Lang }) { const { formatMessage } = await getIntl() - const sidePeekLink = generateSidePeekLink("amenities") + const sidePeekLink = generateSidePeekLink(amenities[lang]) const sortedAmenities = detailedFacilities .sort((a, b) => b.sortOrder - a.sortOrder) .slice(0, 5) diff --git a/components/ContentType/HotelPage/HotelPage.tsx b/components/ContentType/HotelPage/HotelPage.tsx index f24358c39..c91d6036b 100644 --- a/components/ContentType/HotelPage/HotelPage.tsx +++ b/components/ContentType/HotelPage/HotelPage.tsx @@ -1,3 +1,4 @@ +import { about, amenities } from "@/constants/routes/hotelPageParams" import { serverClient } from "@/lib/trpc/server" import { getLang } from "@/i18n/serverContext" @@ -34,6 +35,8 @@ export default async function HotelPage() {
- +
diff --git a/components/ContentType/HotelPage/IntroSection/index.tsx b/components/ContentType/HotelPage/IntroSection/index.tsx index f534a539a..50b3ba03a 100644 --- a/components/ContentType/HotelPage/IntroSection/index.tsx +++ b/components/ContentType/HotelPage/IntroSection/index.tsx @@ -1,3 +1,5 @@ +import { about } from "@/constants/routes/hotelPageParams" + import ArrowRight from "@/components/Icons/ArrowRight" import TripAdvisorIcon from "@/components/Icons/TripAdvisor" import Link from "@/components/TempDesignSystem/Link" @@ -18,6 +20,8 @@ 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 @@ -32,7 +36,7 @@ export default async function IntroSection({ { id: "Tripadvisor reviews" }, { rating: tripAdvisor.rating, count: tripAdvisor.numberOfReviews } ) - const aboutTheHotelLink = generateSidePeekLink("about") + const aboutTheHotelLink = generateSidePeekLink(about[lang]) return (
diff --git a/components/ContentType/HotelPage/IntroSection/types.ts b/components/ContentType/HotelPage/IntroSection/types.ts index 88c23f13b..15fab89e7 100644 --- a/components/ContentType/HotelPage/IntroSection/types.ts +++ b/components/ContentType/HotelPage/IntroSection/types.ts @@ -1,3 +1,5 @@ +import { Lang } from "@/constants/languages" + import { HotelAddress, HotelData, @@ -11,4 +13,6 @@ export type IntroSectionProps = { location: HotelLocation address: HotelAddress tripAdvisor: HotelTripAdvisor + // TODO: remove prop drilling once getLang() is merged + lang: Lang } diff --git a/components/TempDesignSystem/SidePeek/Container/index.tsx b/components/TempDesignSystem/SidePeek/Container/index.tsx index 907e834f3..fd1d527ad 100644 --- a/components/TempDesignSystem/SidePeek/Container/index.tsx +++ b/components/TempDesignSystem/SidePeek/Container/index.tsx @@ -15,15 +15,13 @@ export default function SidePeekContainer({ const [activeSidePeek, setActiveSidePeek] = useState(() => { const sidePeekParam = searchParams.get( - "sidepeek" + "open" ) as SidePeekContentKey | null return sidePeekParam || null }) useEffect(() => { - const sidePeekParam = searchParams.get( - "sidepeek" - ) as SidePeekContentKey | null + const sidePeekParam = searchParams.get("open") as SidePeekContentKey | null if (sidePeekParam !== activeSidePeek) { setActiveSidePeek(sidePeekParam) } @@ -34,7 +32,7 @@ export default function SidePeekContainer({ setActiveSidePeek(null) const nextSearchParams = new URLSearchParams(searchParams.toString()) - nextSearchParams.delete("sidepeek") + nextSearchParams.delete("open") router.push(`${pathname}?${nextSearchParams}`, { scroll: false }) } diff --git a/components/TempDesignSystem/SidePeek/data.ts b/components/TempDesignSystem/SidePeek/data.ts index b60452af1..e53cef850 100644 --- a/components/TempDesignSystem/SidePeek/data.ts +++ b/components/TempDesignSystem/SidePeek/data.ts @@ -1,5 +1,6 @@ import { SidePeekContentKey } from "./types" export const generateSidePeekLink = (key: SidePeekContentKey) => { - return `?sidepeek=${key}` + // what should the parameter be named to make sense in all use cases/languages? single caracter? like`s=`? + return `?open=${key}` } diff --git a/constants/routes/hotelPageParams.js b/constants/routes/hotelPageParams.js new file mode 100644 index 000000000..a6fcb1a5a --- /dev/null +++ b/constants/routes/hotelPageParams.js @@ -0,0 +1,21 @@ +export const about = { + en: "about", + sv: "om-hotellet", + no: "om-hotellet", + fi: "hotellista", + da: "om-hotellet", + de: "uber-das-hotel", +} + +export const amenities = { + en: "amenities", + sv: "bekvamligheter", + no: "fasiliteter", + da: "faciliteter", + fi: "palvelut", + de: "annehmlichkeiten", +} + +const params = { about, amenities } + +export default params