feat(SW-251): check for undefined

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx

@@ -28,6 +28,8 @@ export default async function SelectHotelPage({
 
   if (!getHotelFitlers) return null
 
+  const { filters } = getHotelFitlers
+
   const getAvailableHotels = await serverClient().hotel.availability.get({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
     roomStayStartDate: "2024-11-02",
@@ -54,7 +56,7 @@ export default async function SelectHotelPage({
           {intl.formatMessage({ id: "Show map" })}
           <ChevronRightIcon color="burgundy" />
         </Link>
-        {/* <HotelFilter filters={hotelFilters} /> */}
+        <HotelFilter filters={filters} />
       </section>
       <section className={styles.hotelCards}>
         {availability.length ? (

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -4,25 +4,20 @@ import styles from "./hotelFilter.module.css"
 
 import { HotelFilterProps } from "@/types/components/hotelReservation/selectHotel/hotelFilterProps"
 
-export default async function HotelFilter({
-  hotelId,
-  filters,
-}: HotelFilterProps) {
+export default async function HotelFilter({ filters }: HotelFilterProps) {
   const { formatMessage } = await getIntl()
 
+  console.log(filters)
+
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Room facilities" })}
-        {/* {filters.roomFacilities.map((roomFilter) => (
-          <div key={roomFilter} className={styles.filter}>
-            <input id={roomFilter} name={roomFilter} type="checkbox" />
-            <label htmlFor={roomFilter}>{roomFilter}</label>
-          </div>
-        ))} */}
+        {formatMessage({ id: "Hotel facilities" })}
+        {filters.map((data) => (
+          <div key={data.id}>{data.name}</div>
+        ))}
       </div>
       <div className={styles.facilities}>
-        {formatMessage({ id: "Hotel facilities" })}
         {/* {filters.hotelFacilities.map((hotelFilter) => (
           <div key={hotelFilter} className={styles.filter}>
             <input id={hotelFilter} name={hotelFilter} type="checkbox" />

server/routers/hotels/query.ts

@@ -36,6 +36,7 @@ import {
   getHotelDataSchema,
   getHotelFilterSchema,
   getRatesSchema,
+  HotelFilters,
   roomSchema,
 } from "./output"
 import tempRatesData from "./tempRatesData.json"
@@ -519,13 +520,12 @@ export const hotelQueryRouter = router({
         const filters = hotelData.flatMap(
           (data) => data.attributes.detailedFacilities
         )
-        const unieqId = [...new Set(filters.map((data) => data.id))]
+        const unieqeFilters = [...new Set(filters.map((data) => data.id))]
 
         return {
-          hotelId: hotelData.map((data) => data.id),
-          filters: unieqId.map((data) =>
-            filters.find((find) => find.id === data)
-          ),
+          filters: unieqeFilters
+            .map((data) => filters.find((find) => find.id === data))
+            .filter((filter) => filter !== undefined) as HotelFilters,
         }
       }),
   }),

types/components/hotelReservation/selectHotel/hotelFilterProps.ts

@@ -1,6 +1,5 @@
-import { HotelFilters, HotelId } from "@/server/routers/hotels/output"
+import { HotelFilters } from "@/server/routers/hotels/output"
 
 export type HotelFilterProps = {
-  hotelId: HotelId
   filters: HotelFilters
 }