simplify front-end logic. move it to back-end

kabinizer-back-end/kabinizer-api/Controllers/BookingRequestController.cs

@@ -61,11 +61,6 @@ public async Task<ActionResult<IEnumerable<BookingRequestDto>>> GetBookingReques
         try
         {
            var bookingRequests = await bookingRequestService.GetBookingRequestsByUser(userId);
-           if (bookingRequests.Count == 0)
-           {
-               return NotFound("No booking requests found for the user");
-           }
-
            return Ok(bookingRequests.Select(BookingRequestDto.FromModel));
         }
         catch (Exception ex)

kabinizer-back-end/kabinizer-api/Services/BookingRequest/BookingRequestService.cs

@@ -73,9 +73,9 @@ public async Task<IEnumerable<BookingRequestEntity>> GetBookingRequests()
         return bookingRequest;
     }
 
-    public async Task<bool> DeleteBookingRequest(Guid bookingRequestId)
+    public async Task DeleteBookingRequest(Guid bookingRequestId)
     {
-        var bookingRequest = await GetBookingRequestById(bookingRequestId);
+        var bookingRequest = await entityContext.BookingRequests.FirstOrDefaultAsync(b => b.Id == bookingRequestId);
         if (bookingRequest == null)
         {
             throw new Exception(
@@ -84,7 +84,6 @@ public async Task<bool> DeleteBookingRequest(Guid bookingRequestId)
 
         entityContext.BookingRequests.Remove(bookingRequest);
         await entityContext.SaveChangesAsync();
-        return true;
     }
 
     public async Task<List<BookingRequestEntity>> GetBookingRequestsByUser(Guid userId)
@@ -109,6 +108,7 @@ public async Task<List<BookingRequestEntity>> GetBookingRequestsByPeriod(Guid pe
             .Include(br => br.Period)
             .Where(b => b.PeriodId == periodId)
             .ToListAsync();
+
         if (bookingRequests == null)
         {
             throw new Exception("No booking requests found for the period");

kabinizer-front-end/api/index.ts

@@ -11,11 +11,8 @@ export type { BookingRequestDto } from "./models/BookingRequestDto";
 export type { CreateBookingRequestDto } from "./models/CreateBookingRequestDto";
 export type { CreateDrawDto } from "./models/CreateDrawDto";
 export type { Draw } from "./models/Draw";
-export type { DrawEntity } from "./models/DrawEntity";
 export type { DrawPeriod } from "./models/DrawPeriod";
 export type { Period } from "./models/Period";
-export type { PeriodEntity } from "./models/PeriodEntity";
-export type { UserEntity } from "./models/UserEntity";
 
 export { BookingRequestService } from "./services/BookingRequestService";
 export { DrawService } from "./services/DrawService";

kabinizer-front-end/api/models/BookingRequestDto.ts

@@ -3,14 +3,9 @@
 /* tslint:disable */
 /* eslint-disable */
 
-import type { PeriodEntity } from "./PeriodEntity";
-import type { UserEntity } from "./UserEntity";
-
 export type BookingRequestDto = {
   id?: string;
   userId?: string;
-  user?: UserEntity;
-  period?: PeriodEntity;
   periodId?: string;
   createdDate?: string;
   createdBy?: string;

kabinizer-front-end/src/pages/selectPeriods/Calendar/DrawPeriodsCalendar.tsx

@@ -0,0 +1,66 @@
+import {
+  BookingRequestService,
+  CreateBookingRequestDto,
+  DrawService,
+} from "../../../../api";
+import { CompareDates } from "@/utils";
+import DrawPeriodMonths from "./Months";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import useUser from "@/hooks/useUser.tsx";
+import { getMonthsMap, GetWeeklyPeriods } from "@/utils/calendar.ts";
+
+const DrawPeriodsCalendar = () => {
+  const user = useUser();
+  const queryClient = useQueryClient();
+
+  const { data: draws, isLoading: isLoadingDraws } = useQuery(
+    "getApiDraw",
+    DrawService.getApiDraw,
+  );
+  const { data: bookingRequests, isLoading: isLoadingBookingRequests } =
+    useQuery(
+      "myBookingRequests",
+      () => BookingRequestService.getApiBookingRequestUser(user.localAccountId),
+      { enabled: !!user.localAccountId },
+    );
+
+  const addBooking = useMutation(
+    "postApiBooking",
+    (payload: CreateBookingRequestDto[]) =>
+      BookingRequestService.postApiBookingRequest(payload),
+    { onSuccess: () => queryClient.invalidateQueries("myBookingRequests") },
+  );
+  const removeBooking = useMutation(
+    "deleteApiBooking",
+    (payload: string[]) =>
+      BookingRequestService.deleteApiBookingRequest(payload),
+    { onSuccess: () => queryClient.invalidateQueries("myBookingRequests") },
+  );
+
+  if (isLoadingDraws || isLoadingBookingRequests) return <div>Loading...</div>;
+
+  const periods = draws
+    ?.flatMap((value) => value.periods ?? [])
+    .sort(CompareDates);
+
+  if (!periods?.length) return <div>No periods</div>;
+
+  const monthMap = getMonthsMap(GetWeeklyPeriods(periods, draws || []));
+
+  const toggleBooking = (periodId: string) => {
+    const booking = bookingRequests?.find((b) => b.periodId === periodId);
+    booking?.id
+      ? removeBooking.mutate([booking.id])
+      : addBooking.mutate([{ periodId }]);
+  };
+
+  return (
+    <DrawPeriodMonths
+      months={monthMap}
+      selected={bookingRequests || []}
+      onClick={toggleBooking}
+    />
+  );
+};
+
+export default DrawPeriodsCalendar;

kabinizer-front-end/src/pages/selectPeriods/Calendar/Months.tsx

@@ -3,6 +3,7 @@ import { COLORS, MONTHS } from "@/options";
 import { MonthMapType } from "@/types";
 import Weeks from "./Weeks";
 import { OptionsProps } from "./Options";
+import React from "react";
 
 type MonthsProps = {
   months: MonthMapType;

kabinizer-front-end/src/pages/selectPeriods/DrawDeadlines.tsx

@@ -0,0 +1,35 @@
+import { DrawService } from "../../../api";
+import { FormatDate } from "@/utils";
+import { useQuery } from "react-query";
+
+const DrawDeadlines = () => {
+  const { data: draws, isLoading } = useQuery(["getApiDraw"], () =>
+    DrawService.getApiDraw(),
+  );
+  if (isLoading) return <div>Loading...</div>;
+  if (!draws) return <div>No data</div>;
+
+  return (
+    <div className="w-full pb-10">
+      <div className="rounded-xl bg-[#E6E6E6] p-2">
+        <div className="flex justify-end">
+          <h2 className="font-poppins font-bold text-[#515151]">Deadline</h2>
+        </div>
+        <div className="flex flex-col gap-1">
+          {draws?.map((draw) => (
+            <div key={draw.id} className="flex justify-between align-middle">
+              <p className="text-l font-poppins font-bold text-[#020202]">
+                {draw.title}
+              </p>
+              <p className="font-poppins text-2xl font-bold text-[#354A71]">
+                {draw.end ? FormatDate(new Date(draw.end)) : "–"}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DrawDeadlines;