Somnia/SomniaRoomsApp
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update API requests to last API changes.

Browse Source
This commit is contained in:
Daniel-Garmig
2025-06-03 20:56:10 +02:00
parent 532337a46a
commit 06c1af92b3
11 changed files with 70 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+6 -5
View File
@@ -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",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.378.0.tgz",
"integrity": "sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g==",
"version": "0.483.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.483.0.tgz",
"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
+1 -1
View File
@@ -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
+3 -3
View File
@@ -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) {
const url = categoryId ? "/api/room/category/" + categoryId : null;
export function useAPIRoomCategory(categoryId: number) {
const url = `/api/room/category/${categoryId}`;
const { data, error, isLoading } = useSWR<RoomCategory>(url, fetcher);
src/api/api-roomSearch.tsx
+6 -3
View File
@@ -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
+2 -2
View File
@@ -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
+25 -36
View File
@@ -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(
(element) => {
return (element.kind = "main");
},
);
const bedTypeList: number[] = room.bedType
.split(",")
.map((e) => Number.parseInt(e));
const hasSingleBed: boolean =
bedTypeList.at(0) !== undefined && bedTypeList[0] > 0;
const hasDoubleBed: boolean =
bedTypeList.at(1) !== undefined && bedTypeList[1] > 0;
//FIXME: Use PhotoOrder.
const mainPhoto: RoomCategoryPhoto | undefined =
room.roomCategoryPhotos.length > 0
? room.roomCategoryPhotos.at(0)
: undefined;
const bedTypeIconList = room.roomCategoryBedTypes.map((e) => {
return (
<div>
<IconWithTooltip
key={room.id.toString() + e.bedTypeIcon}
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">
{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 gap-2">{bedTypeIconList}</div>
<div className="flex flex-row">
<IconWithTooltip
tooltipText="Max. gests"
src/components/booking/booking-details.tsx
+2 -2
View File
@@ -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
+10 -11
View File
@@ -1,22 +1,21 @@
export type RoomCategory = {
id: number;
name: string;
description: string;
bedType: string;
description: string | undefined;
maxGuestNum: number;
orderHomePage: number | undefined;
roomCategoryPhotos: RoomCategoryPhoto[];
roomCategoryDetails: RoomCategoryDetails[];
};
export type RoomCategoryDetails = {
id: number;
detailsSection: string;
detailValue: string;
roomCategoryBedTypes: RoomCategoryBedType[];
};
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
+5 -2
View File
@@ -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
+2 -3
View File
@@ -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
+8 -4
View File
@@ -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");
};