refactor(SW-302)

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -10,11 +10,11 @@ import { getLang } from "@/i18n/serverContext"
 
 import styles from "./amenitiesList.module.css"
 
-import type { AmentiesListProps } from "@/types/components/hotelPage/amenities"
+import type { AmenitiesListProps } from "@/types/components/hotelPage/amenities"
 
 export default async function AmenitiesList({
   detailedFacilities,
-}: AmentiesListProps) {
+}: AmenitiesListProps) {
   const intl = await getIntl()
   const sortedAmenities = detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)

components/ContentType/HotelPage/Facilities/CardGrid/index.tsx

@@ -1,8 +1,7 @@
 import Card from "@/components/TempDesignSystem/Card"
 import CardImage from "@/components/TempDesignSystem/Card/CardImage"
 import Grids from "@/components/TempDesignSystem/Grids"
-import { isFacilityCard } from "@/utils/facilityCards"
-import { sortCards } from "@/utils/imageCard"
+import { filterFacilityCards, isFacilityCard } from "@/utils/facilityCards"
 
 import styles from "./cardGrid.module.css"
 
@@ -14,7 +13,7 @@ import type {
 export default function FacilitiesCardGrid({
   facilitiesCardGrid,
 }: CardGridProps) {
-  const imageCard = sortCards(facilitiesCardGrid)
+  const imageCard = filterFacilityCards(facilitiesCardGrid)
   const nrCards = facilitiesCardGrid.length
 
   function getCardClassName(card: FacilityCardType): string {

components/ContentType/HotelPage/Facilities/index.tsx

@@ -8,6 +8,7 @@ import FacilitiesCardGrid from "./CardGrid"
 import styles from "./facilities.module.css"
 
 import type {
+  Facilities,
   FacilitiesProps,
   FacilityCardType,
   FacilityGrid,
@@ -21,20 +22,29 @@ export default async function Facilities({
 
   const facilityCardGrids = setFacilityCardGrids(facilities)
 
-  facilityCardGrids.map((cardGrid: FacilityGrid) => {
-    cardGrid.map((card: FacilityCardType) => {
-      if (isFacilityCard(card)) {
-        card.heading = intl.formatMessage({ id: card.heading })
-        card.secondaryButton.title = intl.formatMessage({
-          id: card.secondaryButton.title,
-        })
-      }
-    })
-  })
+  const translatedFacilityGrids: Facilities = facilityCardGrids.map(
+    (cardGrid: FacilityGrid) => {
+      return cardGrid.map((card: FacilityCardType) => {
+        if (isFacilityCard(card)) {
+          return {
+            ...card,
+            heading: intl.formatMessage({ id: card.heading }),
+            secondaryButton: {
+              ...card.secondaryButton,
+              title: intl.formatMessage({
+                id: card.secondaryButton.title,
+              }),
+            },
+          }
+        }
+        return card
+      })
+    }
+  )
 
   return (
     <SectionContainer className={styles.grid}>
-      {facilityCardGrids.map((cardGrid: FacilityGrid) => (
+      {translatedFacilityGrids.map((cardGrid: FacilityGrid) => (
         <FacilitiesCardGrid
           key={cardGrid[0].id}
           facilitiesCardGrid={cardGrid}

types/components/hotelPage/amenities.ts

@@ -1,5 +1,5 @@
 import type { Amenities } from "@/types/hotel"
 
-export type AmentiesListProps = {
+export type AmenitiesListProps = {
   detailedFacilities: Amenities
 }

utils/facilityCards.ts

@@ -20,11 +20,11 @@ import type { Amenities, Facility } from "@/types/hotel"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
 export function isFacilityCard(card: FacilityCardType): card is FacilityCard {
-  return (card as FacilityCard).heading != undefined
+  return "heading" in card
 }
 
-export function isFacilityImage(card: FacilityCardType): card is FacilityCard {
-  return (card as FacilityImage).backgroundImage != undefined
+export function isFacilityImage(card: FacilityCardType): card is FacilityImage {
+  return "backgroundImage" in card
 }
 
 function setCardProps(
@@ -35,10 +35,10 @@ function setCardProps(
   scriptedTopTitle: string
 ): FacilityCard {
   return {
-    theme: theme,
+    theme,
     id: href,
-    heading: heading,
-    scriptedTopTitle: scriptedTopTitle,
+    heading,
+    scriptedTopTitle,
     secondaryButton: {
       href: `?s=${href}`,
       title: buttonText,
@@ -49,13 +49,11 @@ function setCardProps(
 
 export function setFacilityCardGrids(facilities: Facility[]): Facilities {
   const lang = getLang()
-  const cards: Facilities = []
 
-  facilities.forEach(async (facility) => {
-    const grid: FacilityGrid = []
+  const cards: Facilities = facilities.map((facility) => {
     let card: FacilityCard
 
-    facility.heroImages.slice(0, 2).forEach((image) => {
+    const grid: FacilityGrid = facility.heroImages.slice(0, 2).map((image) => {
       // Can be a maximum 2 images per grid
       const img: FacilityImage = {
         backgroundImage: {
@@ -70,7 +68,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
         theme: "image",
         id: image.imageSizes.large,
       }
-      grid.push(img)
+      return img
     })
 
     switch (facility.id) {
@@ -108,7 +106,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
         grid.unshift(card)
         break
     }
-    cards.push(grid)
+    return grid
   })
   return cards
 }
@@ -131,3 +129,13 @@ export function getRestaurantHeading(amenities: Amenities): RestaurantHeadings {
   }
   return RestaurantHeadings.breakfastRestaurant
 }
+
+export function filterFacilityCards(cards: FacilityGrid) {
+  const card = cards.filter((card) => isFacilityCard(card))
+  const images = cards.filter((card) => isFacilityImage(card))
+
+  return {
+    card: card[0] as FacilityCard,
+    images: images as FacilityImage[],
+  }
+}

utils/imageCard.ts

@@ -1,27 +0,0 @@
-import { isFacilityImage } from "./facilityCards"
-
-import type {
-  FacilityCard,
-  FacilityCardType,
-  FacilityGrid,
-  FacilityImage,
-} from "@/types/components/hotelPage/facilities"
-
-export function sortCards(cards: FacilityGrid) {
-  const sortedCards = cards
-    .slice(0)
-    .sort((a: FacilityCardType, b: FacilityCardType) => {
-      if (!isFacilityImage(a) && isFacilityImage(b)) {
-        return 1
-      }
-      if (isFacilityImage(a) && !isFacilityImage(b)) {
-        return -1
-      }
-      return 0
-    })
-
-  return {
-    card: sortedCards.pop() as FacilityCard,
-    images: sortedCards as FacilityImage[],
-  }
-}