From 1e039febaf05ba01001cdb7cd915d1a06dbff2ec Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 18 Jun 2025 08:42:16 +0000 Subject: [PATCH] fix(SW-2933): Making the hotels/city listing render correctly with active filter on page load MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Christian Andolf Approved-by: Matilda Landström --- .../destination_city_page/[uid]/page.tsx | 7 +- .../destination_country_page/[uid]/page.tsx | 9 +-- .../CityDataContainer/index.tsx | 57 ----------------- .../DestinationCityPage/index.tsx | 64 ++++++++++++++++--- .../DestinationCountryPage/index.tsx | 61 +++++++++++++++--- .../DestinationPage/ExperienceList/index.tsx | 5 ++ .../HotelDataContainer/index.tsx | 51 --------------- .../SidebarContentWrapper/index.tsx | 23 ++----- .../DestinationDataProvider/index.tsx | 4 ++ .../stores/destination-data/index.ts | 6 +- .../types/providers/destination-data.ts | 7 +- .../types/stores/destination-data.ts | 6 +- 12 files changed, 149 insertions(+), 151 deletions(-) delete mode 100644 apps/scandic-web/components/ContentType/DestinationPage/CityDataContainer/index.tsx delete mode 100644 apps/scandic-web/components/ContentType/DestinationPage/HotelDataContainer/index.tsx diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.tsx index 2689807ec..c0ac58be5 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.tsx @@ -11,7 +11,7 @@ import type { PageArgs } from "@/types/params" export { generateMetadata } from "@/utils/generateMetadata" export default async function DestinationCityPagePage( - props: PageArgs<{}, { view?: "map" }> + props: PageArgs<{}, { view?: "map"; filterFromUrl?: string }> ) { const searchParams = await props.searchParams if (env.NEW_SITE_LIVE_STATUS === "NOT_LIVE") { @@ -20,7 +20,10 @@ export default async function DestinationCityPagePage( return ( }> - + ) } diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_country_page/[uid]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_country_page/[uid]/page.tsx index 2b73db576..43c8553f3 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_country_page/[uid]/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_country_page/[uid]/page.tsx @@ -10,10 +10,10 @@ import type { LangParams, PageArgs } from "@/types/params" export { generateMetadata } from "@/utils/generateMetadata" -export default function DestinationCountryPagePage({}: PageArgs< - LangParams, - { view?: "map" } ->) { +export default async function DestinationCountryPagePage( + props: PageArgs +) { + const searchParams = await props.searchParams if (env.NEW_SITE_LIVE_STATUS === "NOT_LIVE") { return notFound() } @@ -22,6 +22,7 @@ export default function DestinationCountryPagePage({}: PageArgs< }> diff --git a/apps/scandic-web/components/ContentType/DestinationPage/CityDataContainer/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/CityDataContainer/index.tsx deleted file mode 100644 index 5580996bc..000000000 --- a/apps/scandic-web/components/ContentType/DestinationPage/CityDataContainer/index.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { - getDestinationCityPagesByCountry, - getHotelsByCountry, -} from "@/lib/trpc/memoizedRequests" - -import { getIntl } from "@/i18n" -import DestinationDataProvider from "@/providers/DestinationDataProvider" - -import type { SortItem } from "@/types/components/destinationFilterAndSort" -import type { Country } from "@/types/enums/country" -import { SortOption } from "@/types/enums/destinationFilterAndSort" - -interface CityDataContainerProps extends React.PropsWithChildren { - country: Country -} - -export function preload(country: Country) { - void getHotelsByCountry(country) - void getDestinationCityPagesByCountry(country) -} - -export default async function CityDataContainer({ - country, - children, -}: CityDataContainerProps) { - const intl = await getIntl() - const [hotels, cities] = await Promise.all([ - getHotelsByCountry(country), - getDestinationCityPagesByCountry(country), - ]) - - const sortItems: SortItem[] = [ - { - label: intl.formatMessage({ - defaultMessage: "Recommended", - }), - value: SortOption.Recommended, - isDefault: true, - }, - { - label: intl.formatMessage({ - defaultMessage: "Name", - }), - value: SortOption.Name, - }, - ] - - return ( - - {children} - - ) -} diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx index 2133989a0..a9e279edc 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx @@ -2,32 +2,44 @@ import { notFound } from "next/navigation" import { Suspense } from "react" import { env } from "@/env/server" -import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests" +import { + getDestinationCityPage, + getHotelsByCityIdentifier, +} from "@/lib/trpc/memoizedRequests" +import { getFiltersFromHotels } from "@/stores/destination-data/helper" import Breadcrumbs from "@/components/Breadcrumbs" import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton" +import { getIntl } from "@/i18n" +import DestinationDataProvider from "@/providers/DestinationDataProvider" import Blocks from "../Blocks" import ExperienceList from "../ExperienceList" -import HotelDataContainer, { preload } from "../HotelDataContainer" import HotelListing from "../HotelListing" import SidebarContentWrapper from "../SidebarContentWrapper" import DestinationPageSidePeek from "../Sidepeek" import StaticMap from "../StaticMap" import TopImages from "../TopImages" import DestinationTracking from "../Tracking" +import { getHeadingText } from "../utils" import CityMap from "./CityMap" import DestinationCityPageSkeleton from "./DestinationCityPageSkeleton" import styles from "./destinationCityPage.module.css" +import type { SortItem } from "@/types/components/destinationFilterAndSort" +import { SortOption } from "@/types/enums/destinationFilterAndSort" + interface DestinationCityPageProps { isMapView: boolean + filterFromUrl?: string } export default async function DestinationCityPage({ isMapView, + filterFromUrl, }: DestinationCityPageProps) { + const intl = await getIntl() const pageData = await getDestinationCityPage() if (!pageData) { @@ -46,12 +58,39 @@ export default async function DestinationCityPage({ destination_settings, } = destinationCityPage - preload(cityIdentifier) + const allHotels = await getHotelsByCityIdentifier(cityIdentifier) + const allFilters = getFiltersFromHotels(allHotels) + const sortItems: SortItem[] = [ + { + label: intl.formatMessage({ + defaultMessage: "Distance to city center", + }), + value: SortOption.Distance, + isDefault: true, + }, + { + label: intl.formatMessage({ + defaultMessage: "Name", + }), + value: SortOption.Name, + }, + { + label: intl.formatMessage({ + defaultMessage: "TripAdvisor rating", + }), + value: SortOption.TripAdvisorRating, + }, + ] return ( <> }> - + {isMapView ? ( }