Update API requests to last API changes.

package-lock.json

@@ -22,7 +22,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
         "embla-carousel-react": "^8.0.2",
-        "lucide-react": "^0.378.0",
+        "lucide-react": "^0.483.0",
         "react": "^18.2.0",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.2.0",
@@ -3726,11 +3726,12 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.378.0",
+      "version": "0.483.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.378.0.tgz",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.483.0.tgz",
-      "integrity": "sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g==",
+      "integrity": "sha512-WldsY17Qb/T3VZdMnVQ9C3DDIP7h1ViDTHVdVGnLZcvHNg30zH/MTQ04RTORjexoGmpsXroiQXZ4QyR0kBy0FA==",
+      "license": "ISC",
       "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/merge2": {

package.json

@@ -25,7 +25,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.0.2",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.483.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.2.0",

src/api/api-roomCategories.tsx

@@ -2,7 +2,7 @@ import { RoomCategory } from "@/model/RoomCategory";
 import { fetcher, fetcherUnwraper } from "./backend";
 import useSWR from "swr";
 
-export function useAPIRoomCategories() {
+export function useAPIRoomCategoryList() {
   const { data, error, isLoading } = useSWR<RoomCategory[]>(
     "/api/room/category",
     fetcherUnwraper,
@@ -15,8 +15,8 @@ export function useAPIRoomCategories() {
   };
 }
 
-export function useAPIRoomCategoryId(categoryId: number) {
+export function useAPIRoomCategory(categoryId: number) {
-  const url = categoryId ? "/api/room/category/" + categoryId : null;
+  const url = `/api/room/category/${categoryId}`;
 
   const { data, error, isLoading } = useSWR<RoomCategory>(url, fetcher);
 

src/api/api-roomSearch.tsx

@@ -12,7 +12,8 @@ import {
 export function useAPIRoomAvailability(filter: AvailabilityFilter | null) {
   const request: AvailabilityRequest | null = filter
     ? {
-        filter: filter,
+        startDate: filter.startDate,
+        endDate: filter.endDate,
       }
     : null;
 
@@ -32,12 +33,14 @@ export function useAPIRoomAvailability(filter: AvailabilityFilter | null) {
 export function useAPIRoomPrices(filter: FareFilter | null) {
   const request: FareRequest | null = filter
     ? {
-        filter: filter,
+        roomCategory: filter.roomCategory,
+        startDate: filter.startDate,
+        endDate: filter.endDate,
       }
     : null;
 
   const { data, isLoading, error } = useSWR(
-    request ? ["/api/search/fares", request] : null,
+    request ? ["/api/search/prices", request] : null,
     ([url, request]) => fetcherUnwraperWithFilter<RoomPrice[]>(url, request),
   );
 

src/components/Rooms/room-booking.tsx

@@ -1,4 +1,4 @@
-import { useAPIRoomCategoryId } from "@/api/api-roomCategories";
+import { useAPIRoomCategory } from "@/api/api-roomCategories";
 import { Card, CardContent } from "../ui/card";
 import { useMemo } from "react";
 import { Typography } from "../ui/typography";
@@ -86,7 +86,7 @@ function RoomBooking({
     roomCategory,
     isLoading: isLoadingCategory,
     isError: isErrorCategory,
-  } = useAPIRoomCategoryId(roomCategoryId);
+  } = useAPIRoomCategory(roomCategoryId);
   const {
     roomPriceList,
     isLoading: isLoadingPrices,

src/components/Rooms/room-item-card.tsx

@@ -1,7 +1,7 @@
 import { Separator } from "../ui/separator";
 import { Card, CardContent } from "../ui/card";
 import { Typography } from "../ui/typography";
-import { BedDoubleIcon, BedSingleIcon, UserIcon } from "lucide-react";
+import { BedDouble, BedSingle, UserIcon } from "lucide-react";
 import { RoomCategory, RoomCategoryPhoto } from "@/model/RoomCategory";
 import { IconWithTooltip } from "../ui/icon-number-tooltip";
 import roomImg from "@/res/SomniaRoomImage.svg";
@@ -16,31 +16,39 @@ const defaultRoom: RoomCategory = {
   id: -1,
   name: "Sample Room",
   description: "Lorem Ipsum",
-  bedType: "0,1",
   maxGuestNum: 2,
-  roomCategoryDetails: [],
+  orderHomePage: undefined,
   roomCategoryPhotos: [],
+  roomCategoryBedTypes: [],
 };
 
 export function RoomItemCard({
   room = defaultRoom,
   className,
 }: RoomItemCardProps) {
-  const mainPhoto: RoomCategoryPhoto | undefined = room.roomCategoryPhotos.find(
+  //FIXME: Use PhotoOrder.
-    (element) => {
+  const mainPhoto: RoomCategoryPhoto | undefined =
-      return (element.kind = "main");
+    room.roomCategoryPhotos.length > 0
-    },
+      ? room.roomCategoryPhotos.at(0)
-  );
+      : undefined;
-  const bedTypeList: number[] = room.bedType
+
-    .split(",")
+  const bedTypeIconList = room.roomCategoryBedTypes.map((e) => {
-    .map((e) => Number.parseInt(e));
+    return (
-  const hasSingleBed: boolean =
+      <div>
-    bedTypeList.at(0) !== undefined && bedTypeList[0] > 0;
+        <IconWithTooltip
-  const hasDoubleBed: boolean =
+          key={room.id.toString() + e.bedTypeIcon}
-    bedTypeList.at(1) !== undefined && bedTypeList[1] > 0;
+          tooltipText={e.bedTypeName}
+          label={e.amount.toString()}
+        >
+          {e.bedTypeIcon.includes("bed-single") ? <BedSingle></BedSingle> : <BedDouble></BedDouble> }
+
+        </IconWithTooltip>
+      </div>
+    );
+  });
 
   return (
-    <Card id={room.id.toString()} className={cn(className, "relative")}>
+    <Card key={room.id} className={cn(className, "relative")}>
       {/* <CardHeader className="p-0 m-0 mb-5">
         </CardHeader> */}
       <CardContent className="flex h-full w-full flex-col p-0">
@@ -64,26 +72,7 @@ export function RoomItemCard({
         <div className="mt-auto pb-4">
           <Separator className="my-4" />
           <div className="flex justify-around">
-            <div className="flex flex-row gap-2">
+            <div className="flex flex-row gap-2">{bedTypeIconList}</div>
-              {hasSingleBed && (
-                <IconWithTooltip
-                  tooltipText="Single bed"
-                  label={bedTypeList[0]?.toString()}
-                >
-                  <BedSingleIcon />
-                </IconWithTooltip>
-              )}
-              {hasDoubleBed && (
-                <>
-                  <IconWithTooltip
-                    tooltipText="Double bed"
-                    label={bedTypeList[1]?.toString()}
-                  >
-                    <BedDoubleIcon />
-                  </IconWithTooltip>
-                </>
-              )}
-            </div>
             <div className="flex flex-row">
               <IconWithTooltip
                 tooltipText="Max. gests"

src/components/booking/booking-details.tsx

@@ -4,7 +4,7 @@ import { Typography } from "../ui/typography";
 import { differenceInDays } from "date-fns";
 import { Separator } from "../ui/separator";
 import { Button } from "../ui/button";
-import { useAPIRoomCategories } from "@/api/api-roomCategories";
+import { useAPIRoomCategoryList } from "@/api/api-roomCategories";
 import { IconWithTooltip } from "../ui/icon-number-tooltip";
 import { UserIcon } from "lucide-react";
 
@@ -19,7 +19,7 @@ export function BookingDetails({
   mode: BookingDetailsModes;
 }) {
   const bookingData = useAppStore((state) => state.newBookingData);
-  const roomCategoryList = useAPIRoomCategories();
+  const roomCategoryList = useAPIRoomCategoryList();
 
   const onBtBookingClick = () => {
     if (onBookingConfirm) {

src/model/RoomCategory.ts

@@ -1,22 +1,21 @@
 export type RoomCategory = {
   id: number;
   name: string;
-  description: string;
+  description: string | undefined;
-  bedType: string;
   maxGuestNum: number;
+  orderHomePage: number | undefined;
   roomCategoryPhotos: RoomCategoryPhoto[];
-  roomCategoryDetails: RoomCategoryDetails[];
+  roomCategoryBedTypes: RoomCategoryBedType[];
-};
-
-export type RoomCategoryDetails = {
-  id: number;
-  detailsSection: string;
-  detailValue: string;
 };
 
 export type RoomCategoryPhoto = {
-  id: number;
   path: string;
   altText: string | undefined;
-  kind: string;
+  photoOrder: string | undefined;
 };
+
+export type RoomCategoryBedType = {
+  amount: number;
+  bedTypeName: string;
+  bedTypeIcon: string;
+}

src/model/RoomSearch.ts

@@ -9,7 +9,8 @@ export type RoomPrice = {
 };
 
 export type AvailabilityRequest = {
-  filter: AvailabilityFilter;
+  startDate: string;
+  endDate: string;
 };
 
 export type AvailabilityFilter = {
@@ -18,7 +19,9 @@ export type AvailabilityFilter = {
 };
 
 export type FareRequest = {
-  filter: FareFilter;
+  roomCategory: number;
+  startDate: string;
+  endDate: string;
 };
 
 export type FareFilter = {

src/routes/home-page.tsx

@@ -1,4 +1,4 @@
-import { useAPIRoomCategories } from "@/api/api-roomCategories";
+import { useAPIRoomCategoryList } from "@/api/api-roomCategories";
 import { RoomItemCard } from "@/components/Rooms/room-item-card";
 import { SearchFilterCard } from "@/components/Search/SearchFilterCard";
 import BackendConnectionStatus from "@/components/backend-conection-status";
@@ -12,7 +12,7 @@ import { LoaderIcon } from "lucide-react";
 import "./home-page.css";
 
 function Homepage() {
-  const { roomCategoryList, isLoading, isError } = useAPIRoomCategories();
+  const { roomCategoryList, isLoading, isError } = useAPIRoomCategoryList();
   const navigate = useNavigate();
 
   const onBtSearchClick = (filter: SearchFilter) => {
@@ -22,7 +22,6 @@ function Homepage() {
   const roomList = roomCategoryList?.map((element: RoomCategory) => {
     return <RoomItemCard key={element.id} room={element} />;
   });
-
   return (
     <>
       <Typography variant={"h1"}>Somnia Rooms</Typography>

src/routes/search-page.tsx

@@ -48,9 +48,6 @@ function SearchPage() {
   const isError = isErrorAvailability;
 
   const onBtSearchClick = (newFilter: SearchFilter) => {
-    console.log("onBtSearchClick: ");
-    console.log(newFilter);
-
     if (
       newFilter.dateRange &&
       newFilter.dateRange.from &&
@@ -58,10 +55,17 @@ function SearchPage() {
     ) {
       setIsSearched(true);
 
-      resetBooking(newFilter.dateRange.from, newFilter.dateRange.to);
+      resetBooking(makeDayUTCDate(newFilter.dateRange.from), makeDayUTCDate(newFilter.dateRange.to));
     }
   };
 
+  // TODOME: Hay que dar una vuelta a esta solución 
+  // - Mirar cómo trabajar con tiempos UTC desde el principio.
+  // - En cualquier caso, mover esta función a otro lugar.
+  const makeDayUTCDate = (date : Date) : Date => {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+  }
+
   const onBookingContinue = () => {
     navigate("/book");
   };