feat(SW-251): type assertion

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

@@ -1,5 +1,4 @@
 import { serverClient } from "@/lib/trpc/server"
-import { notFound } from "@/server/errors/next"
 
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
@@ -24,7 +23,7 @@ async function getAvailableHotels({
   promotionCode,
   attachedProfileId,
   reservationProfileType,
-}: AvailabilityInput): Promise<HotelData[] | null> {
+}: AvailabilityInput): Promise<HotelData[]> {
   const getAvailableHotels = await serverClient().hotel.availability.get({
     cityId: cityId,
     roomStayStartDate: roomStayStartDate,
@@ -36,7 +35,7 @@ async function getAvailableHotels({
     reservationProfileType: reservationProfileType,
   })
 
-  if (!getAvailableHotels) return null
+  if (!getAvailableHotels) throw new Error()
 
   const { availability } = getAvailableHotels
 
@@ -46,8 +45,10 @@ async function getAvailableHotels({
       language: getLang(),
     })
 
+    if (!hotelData) throw new Error()
+
     return {
-      hotelData: hotelData?.data.attributes,
+      hotelData: hotelData.data.attributes,
       price: hotel.bestPricePerNight,
     }
   })
@@ -70,12 +71,9 @@ export default async function SelectHotelPage({
     adults: 1,
   })
 
-  if (!hotels) return null
-  if (hotels.some((item) => item?.hotelData === undefined)) return notFound()
+  const filters = hotels.flatMap((data) => data.hotelData.detailedFacilities)
 
-  const filters = hotels.flatMap((data) => data.hotelData?.detailedFacilities)
-
-  const filterId = [...new Set(filters.map((data) => data?.id))]
+  const filterId = [...new Set(filters.map((data) => data.id))]
   const filterList: {
     name: string
     id: number
@@ -86,7 +84,7 @@ export default async function SelectHotelPage({
     code?: string
     iconName?: string
   }[] = filterId
-    .map((data) => filters.find((find) => find?.id === data))
+    .map((data) => filters.find((find) => find.id === data))
     .filter(
       (
         filter

components/HotelReservation/HotelCard/index.tsx

@@ -25,7 +25,7 @@ export default function HotelCard({ hotel }: HotelCardProps) {
   const { hotelData } = hotel
   const { price } = hotel
 
-  const sortedAmenities = hotelData?.detailedFacilities
+  const sortedAmenities = hotelData.detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
@@ -33,8 +33,8 @@ export default function HotelCard({ hotel }: HotelCardProps) {
     <article className={styles.card}>
       <section className={styles.imageContainer}>
         <Image
-          src={hotelData?.hotelContent.images.imageSizes.medium ?? ""}
-          alt={hotelData?.hotelContent.images.metaData.altText ?? ""}
+          src={hotelData.hotelContent.images.imageSizes.medium}
+          alt={hotelData.hotelContent.images.metaData.altText}
           width={300}
           height={200}
           className={styles.image}
@@ -42,25 +42,25 @@ export default function HotelCard({ hotel }: HotelCardProps) {
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
-            {hotelData?.ratings?.tripAdvisor.rating}
+            {hotelData.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
       </section>
       <section className={styles.hotelInformation}>
         <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
-          {hotelData?.name}
+          {hotelData.name}
         </Title>
         <Footnote color="textMediumContrast" className={styles.adress}>
-          {`${hotelData?.address?.streetAddress}, ${hotelData?.address?.city}`}
+          {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
         </Footnote>
         <Footnote color="textMediumContrast">
-          {`${hotelData?.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+          {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>
       </section>
       <section className={styles.hotel}>
         <div className={styles.facilities}>
-          {sortedAmenities?.map((facility) => {
+          {sortedAmenities.map((facility) => {
             const IconComponent = mapFacilityToIcon(facility.name)
             return (
               <div className={styles.facilitiesItem} key={facility.id}>

components/HotelReservation/HotelCardListing/index.tsx

@@ -9,13 +9,11 @@ import styles from "./hotelCardListing.module.css"
 import { HotelCardListingProps } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 
 export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
-  if (!hotelData) return null
-
   return (
     <section className={styles.hotelCards}>
       {hotelData && hotelData.length ? (
         hotelData.map((hotel) => (
-          <HotelCard key={hotel.hotelData?.name} hotel={hotel} />
+          <HotelCard key={hotel.hotelData.name} hotel={hotel} />
         ))
       ) : (
         <Title>No hotels found</Title>

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -9,6 +9,10 @@ import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHot
 export default function HotelFilter({ filters }: HotelFiltersProps) {
   const intl = useIntl()
 
+  function handleOnChange() {
+    // TODO: Update URL with selected values
+  }
+
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
@@ -16,8 +20,13 @@ export default function HotelFilter({ filters }: HotelFiltersProps) {
         <form>
           <ul>
             {filters.map((data) => (
-              <li key={data?.id} className={styles.filter}>
-                <input id={`${data?.id}`} name={data?.name} type="checkbox" />
+              <li key={data.id} className={styles.filter}>
+                <input
+                  id={`${data.id}`}
+                  name={data.name}
+                  type="checkbox"
+                  onChange={handleOnChange}
+                />
                 <label htmlFor={`${data?.id}`}>{data?.name}</label>
               </li>
             ))}

types/components/hotelReservation/selectHotel/hotelCardListingProps.ts

@@ -7,6 +7,6 @@ export type HotelCardListingProps = {
 }
 
 export type HotelData = {
-  hotelData: Hotel | undefined
+  hotelData: Hotel
   price: AvailabilityPrices
 }