refactor(SW-296)

components/ContentType/HotelPage/AmenitiesList/index.tsx

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

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

@@ -24,15 +24,10 @@ export default async function CardGrid({ facilities }: CardGridProps) {
   return (
     <section id={imageCard.card?.id}>
       <Grids.Stackable className={styles.desktopGrid}>
-        {facilities.map((card: CardProps, idx: number) => (
+        {facilities.map((card: CardProps) => (
           <Card
             theme={card.theme || "primaryDark"}
-            key={
+            key={card.id}
-              card.id ||
-              (card.title && `${card.title}-${idx}`) ||
-              (card.heading && `${card.heading}-${idx}`) ||
-              idx
-            }
             scriptedTopTitle={card.scriptedTopTitle}
             heading={card.heading}
             bodyText={card.bodyText}

components/ContentType/HotelPage/Facilities/index.tsx

@@ -17,16 +17,16 @@ export default async function Facilities({ facilities }: FacilityProps) {
 
   // Put activities card at the end
   const activitiesIdx = facilities.findIndex(
-    (facility) => facility[0].id == activities[lang]
+    (facility) => facility[0].id === activities[lang]
   )
-  if (activitiesIdx != -1) {
+  if (activitiesIdx !== -1) {
     facilities.push(facilities.splice(activitiesIdx, 1)[0])
   }
 
   return (
     <SectionContainer className={styles.grid}>
-      {facilities.map((facilityCards: FacilityCards, idx: number) => (
+      {facilities.map((facilityCards: FacilityCards) => (
-        <CardGrid key={`grid_${idx}`} facilities={facilityCards} />
+        <CardGrid key={facilityCards[0].id} facilities={facilityCards} />
       ))}
     </SectionContainer>
   )

components/ContentType/HotelPage/index.tsx

@@ -51,9 +51,9 @@ export default async function HotelPage() {
     facilityCards,
   } = hotelData
 
-  const facilities = setFacilityCards(facilityCards, hotelDetailedFacilities)
+  const facilities = setFacilityCards(facilityCards)
-
   activitiesCard && facilities.push(setActivityCard(activitiesCard))
+
   const topThreePois = pointsOfInterest.slice(0, 3)
 
   const coordinates = {

components/TempDesignSystem/Card/CardImage/index.tsx

@@ -15,16 +15,10 @@ export default function CardImage({
     <article className={`${styles.container} ${className}`}>
       <div className={styles.imageContainer}>
         {imageCards.map(
-          ({ backgroundImage }, idx: Number) =>
+          ({ backgroundImage }) =>
             backgroundImage && (
               <Image
-                key={
+                key={backgroundImage.id}
-                  (backgroundImage.title &&
-                    `${backgroundImage.title}-${idx}`) ||
-                  (backgroundImage.meta.caption &&
-                    `${backgroundImage.meta.caption}-${idx}`) ||
-                  backgroundImage.url
-                }
                 src={backgroundImage.url}
                 className={styles.image}
                 alt={backgroundImage.title}

server/routers/hotels/output.ts

@@ -791,4 +791,3 @@ export const apiLocationsSchema = z.object({
         })
     ),
 })
-export type Facility = z.infer<typeof facilitySchema> & { id: string }

types/components/cardImage.ts

@@ -1,6 +1,6 @@
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
 export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
-  card: CardProps | undefined
+  card?: CardProps
   imageCards: Pick<CardProps, "backgroundImage">[]
 }

types/components/hotelPage/amenities.ts

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

types/components/image.ts

@@ -1,4 +1,5 @@
 export type ApiImage = {
+  id: string
   url: string
   title: string
   meta: {

utils/facilityCards.ts

@@ -77,7 +77,7 @@ async function setCardProps(
   return card
 }
 
-export function setFacilityCards(facilities: Facility[], amenities: Amenities) {
+export function setFacilityCards(facilities: Facility[]) {
   const lang = getLang()
   const cards: Facilities = []
 
@@ -88,6 +88,7 @@ export function setFacilityCards(facilities: Facility[], amenities: Amenities) {
     facility.heroImages.slice(0, 2).forEach((image) => {
       // Can be a maximum 2 images per grid
       const img: CardProps = {}
+      img.id = image.imageSizes.large
       ;(img.backgroundImage = {
         url: image.imageSizes.large,
         title: image.metaData.title,
@@ -95,6 +96,7 @@ export function setFacilityCards(facilities: Facility[], amenities: Amenities) {
           alt: image.metaData.altText,
           caption: image.metaData.altText_En,
         },
+        id: image.imageSizes.large,
       }),
         (img.theme = "image")
       grid.push(img)
@@ -143,10 +145,10 @@ export function setFacilityCards(facilities: Facility[], amenities: Amenities) {
 export function getRestaurantHeading(amenities: Amenities): RestaurantHeadings {
   const hasBar = amenities.some(
     (facility) =>
-      facility.id == FacilityIds.bar || facility.id == FacilityIds.rooftopBar
+      facility.id === FacilityIds.bar || facility.id === FacilityIds.rooftopBar
   )
   const hasRestaurant = amenities.some(
-    (facility) => facility.id == FacilityIds.restaurant
+    (facility) => facility.id === FacilityIds.restaurant
   )
 
   if (hasBar && hasRestaurant) {