From 8f0763285c33aec9754f2f55cd27fc68eb1a65bd Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Mon, 17 Mar 2025 07:45:12 +0000
Subject: [PATCH] Merged in fix/SW-1895-update-hotel-listning-to-show-all (pull
 request #1535)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(SW-1895): always display full list of cities or countries

* fix(SW-1895): always display full list of cities or countries


Approved-by: Erik Tiekstra
Approved-by: Matilda Landström
---
 .../CityListing/cityListing.module.css        |  4 ----
 .../DestinationPage/CityListing/index.tsx     | 23 ++-----------------
 .../HotelListing/hotelListing.module.css      |  4 ----
 .../DestinationPage/HotelListing/index.tsx    | 23 ++-----------------
 4 files changed, 4 insertions(+), 50 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/cityListing.module.css b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/cityListing.module.css
index 1f4318bb4..b5f62647a 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/cityListing.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/cityListing.module.css
@@ -18,10 +18,6 @@
   gap: var(--Spacing-x2);
 }
 
-.cityList:not(.allVisible) li:nth-child(n + 6) {
-  display: none;
-}
-
 @media screen and (min-width: 768px) {
   .container {
     --scroll-margin-top: calc(
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx
index dc787426c..e01ac8382 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useRef, useState } from "react"
+import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
@@ -8,7 +8,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
-import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
@@ -30,16 +29,6 @@ export default function CityListing() {
     activeCities: state.activeCities,
     isLoading: state.isLoading,
   }))
-  const [allCitiesVisible, setAllCitiesVisible] = useState(
-    activeCities.length <= 5
-  )
-
-  function handleShowMore() {
-    if (scrollRef.current && allCitiesVisible) {
-      scrollRef.current.scrollIntoView({ behavior: "smooth" })
-    }
-    setAllCitiesVisible((state) => !state)
-  }
 
   return isLoading ? (
     <CityListingSkeleton />
@@ -66,21 +55,13 @@ export default function CityListing() {
         />
       ) : (
         <>
-          <ul
-            className={`${styles.cityList} ${allCitiesVisible ? styles.allVisible : ""}`}
-          >
+          <ul className={styles.cityList}>
             {activeCities.map((city) => (
               <li key={city.system.uid}>
                 <CityListingItem city={city} />
               </li>
             ))}
           </ul>
-          {activeCities.length > 5 ? (
-            <ShowMoreButton
-              loadMoreData={handleShowMore}
-              showLess={allCitiesVisible}
-            />
-          ) : null}
           {showBackToTop && (
             <BackToTopButton position="center" onClick={scrollToTop} />
           )}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/hotelListing.module.css b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/hotelListing.module.css
index e09427a78..a19f8bf1c 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/hotelListing.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/hotelListing.module.css
@@ -19,10 +19,6 @@
   gap: var(--Spacing-x2);
 }
 
-.hotelList:not(.allVisible) li:nth-child(n + 6) {
-  display: none;
-}
-
 @media screen and (min-width: 768px) {
   .container {
     --scroll-margin-top: calc(
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx
index 7e7699390..0849df736 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useRef, useState } from "react"
+import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
@@ -8,7 +8,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
-import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
@@ -30,16 +29,6 @@ export default function HotelListing() {
     activeHotels: state.activeHotels,
     isLoading: state.isLoading,
   }))
-  const [allHotelsVisible, setAllHotelsVisible] = useState(
-    activeHotels.length <= 5
-  )
-
-  function handleShowMore() {
-    if (scrollRef.current && allHotelsVisible) {
-      scrollRef.current.scrollIntoView({ behavior: "smooth" })
-    }
-    setAllHotelsVisible((state) => !state)
-  }
 
   return isLoading ? (
     <HotelListingSkeleton />
@@ -66,21 +55,13 @@ export default function HotelListing() {
         />
       ) : (
         <>
-          <ul
-            className={`${styles.hotelList} ${allHotelsVisible ? styles.allVisible : ""}`}
-          >
+          <ul className={styles.hotelList}>
             {activeHotels.map(({ hotel, url }) => (
               <li key={hotel.name}>
                 <HotelListingItem hotel={hotel} url={url} />
               </li>
             ))}
           </ul>
-          {activeHotels.length > 5 ? (
-            <ShowMoreButton
-              loadMoreData={handleShowMore}
-              showLess={allHotelsVisible}
-            />
-          ) : null}
           {showBackToTop && (
             <BackToTopButton position="center" onClick={scrollToTop} />
           )}