fix: include space hierarchy when checking collisions

City-of-Helsinki · Oct 31, 2024 · d9eda9b · d9eda9b
1 parent 655bb62
commit d9eda9b
Show file tree

Hide file tree

Showing 15 changed files with 79 additions and 123 deletions.
diff --git a/apps/ui/components/reservation-unit/utils.test.ts b/apps/ui/components/reservation-unit/utils.test.ts
@@ -220,6 +220,7 @@ describe("getNextAvailableTime", () => {
       },
       reservableTimes,
       activeApplicationRounds: activeApplicationRounds ?? [],
+      blockingReservations: [],
     };
   }
 

diff --git a/apps/ui/components/reservation-unit/utils.ts b/apps/ui/components/reservation-unit/utils.ts
@@ -7,6 +7,7 @@ import {
   startOfDay,
 } from "date-fns";
 import type {
+  BlockingReservationFieldsFragment,
   ReservationUnitNode,
   ReservationUnitPageQuery,
 } from "@gql/gql-types";
@@ -63,6 +64,7 @@ type AvailableTimesProps = {
   reservationUnit: QueryT;
   reservableTimes: ReservableMap;
   activeApplicationRounds: readonly RoundPeriod[];
+  blockingReservations: readonly BlockingReservationFieldsFragment[];
   fromStartOfDay?: boolean;
 };
 
@@ -74,6 +76,7 @@ function getAvailableTimesForDay({
   reservationUnit,
   reservableTimes,
   activeApplicationRounds,
+  blockingReservations,
 }: AvailableTimesProps): string[] {
   if (!reservationUnit) {
     return [];
@@ -89,6 +92,7 @@ function getAvailableTimesForDay({
     reservationUnit,
     activeApplicationRounds,
     durationValue: duration,
+    blockingReservations,
   })
     .map((n) => {
       const [slotHours, slotMinutes] = n.label.split(":").map(Number);
@@ -105,6 +109,7 @@ function getAvailableTimesForDay({
         reservationUnit,
         reservableTimes,
         activeApplicationRounds,
+        blockingReservations,
       });
 
       return isReservable && !isBefore(startDate, startTime) ? n.label : null;

diff --git a/apps/ui/components/reservation/EditStep0.tsx b/apps/ui/components/reservation/EditStep0.tsx
@@ -1,6 +1,7 @@
 import { breakpoints } from "common/src/common/style";
 import type { PendingReservation } from "@/modules/types";
 import type {
+  BlockingReservationFieldsFragment,
   ReservationQuery,
   ReservationUnitPageQuery,
 } from "@gql/gql-types";
@@ -9,7 +10,6 @@ import { Button, IconArrowRight, IconCross } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
-import { filterNonNullable } from "common/src/helpers";
 import {
   canReservationTimeBeChanged,
   convertFormToFocustimeSlot,
@@ -48,6 +48,7 @@ type Props = {
   reservationUnit: ReservationUnitNodeT;
   reservationForm: UseFormReturn<PendingReservationFormType>;
   activeApplicationRounds: readonly RoundPeriod[];
+  blockingReservations: readonly BlockingReservationFieldsFragment[];
   nextStep: () => void;
   apiBaseUrl: string;
   isLoading: boolean;
@@ -103,29 +104,14 @@ const PinkBox = styled.div`
   }
 `;
 
-/// To check availability for the reservation.
-/// The check functions use the reservationUnit instead of a list of other reservations
-/// so have to do some questionable edits.
-function getWithoutThisReservation(
-  reservationUnit: ReservationUnitNodeT,
-  reservation: ReservationNodeT
-): ReservationUnitNodeT {
-  const otherReservations = filterNonNullable(
-    reservationUnit?.reservations?.filter((n) => n?.pk !== reservation.pk)
-  );
-  return {
-    ...reservationUnit,
-    reservations: otherReservations,
-  };
-}
-
 export function EditStep0({
   reservation,
   reservationUnit,
   activeApplicationRounds,
   reservationForm,
   nextStep,
   isLoading,
+  blockingReservations: blockingReservationsOrig,
 }: Props): JSX.Element {
   const { t, i18n } = useTranslation();
 
@@ -139,14 +125,17 @@ export function EditStep0({
 
   const reservableTimes = useReservableTimes(reservationUnit);
 
-  const resUnit = getWithoutThisReservation(reservationUnit, reservation);
+  const blockingReservations = blockingReservationsOrig.filter(
+    (r) => r.pk !== reservation.pk
+  );
 
   const submitReservation = (data: PendingReservationFormType) => {
     const slot = convertFormToFocustimeSlot({
       data,
-      reservationUnit: resUnit,
+      reservationUnit,
       reservableTimes,
       activeApplicationRounds,
+      blockingReservations,
     });
     if (!slot.isReservable) {
       return;
@@ -173,8 +162,9 @@ export function EditStep0({
       reservation,
       newReservation,
       reservableTimes,
-      reservationUnit: resUnit,
+      reservationUnit,
       activeApplicationRounds,
+      blockingReservations,
     });
 
     if (isNewReservationValid) {
@@ -191,25 +181,28 @@ export function EditStep0({
   const durationOptions = getDurationOptions(reservationUnit, t);
   const focusSlot = convertFormToFocustimeSlot({
     data: watch(),
-    reservationUnit: resUnit,
+    reservationUnit,
     reservableTimes,
     activeApplicationRounds,
+    blockingReservations,
   });
   const startingTimeOptions = getPossibleTimesForDay({
     reservableTimes,
     interval: reservationUnit?.reservationStartInterval,
     date: fromUIDate(watch("date") ?? "") ?? new Date(),
-    reservationUnit: resUnit,
+    reservationUnit,
     activeApplicationRounds,
     durationValue,
+    blockingReservations,
   });
 
   const nextAvailableTime = getNextAvailableTime({
     start: focusDate,
     reservableTimes,
     duration: durationValue,
-    reservationUnit: resUnit,
+    reservationUnit,
     activeApplicationRounds,
+    blockingReservations,
   });
 
   const lang = convertLanguageCode(i18n.language);
@@ -245,13 +238,14 @@ export function EditStep0({
       />
       <StyledCalendarWrapper>
         <ReservationTimePicker
-          reservationUnit={resUnit}
+          reservationUnit={reservationUnit}
           reservableTimes={reservableTimes}
           activeApplicationRounds={activeApplicationRounds}
           reservationForm={reservationForm}
           isReservationQuotaReached={false}
           startingTimeOptions={startingTimeOptions}
           submitReservation={submitReservation}
+          blockingReservations={blockingReservations}
         />
       </StyledCalendarWrapper>
       <form

diff --git a/apps/ui/components/reservation/ReservationTimePicker.tsx b/apps/ui/components/reservation/ReservationTimePicker.tsx
@@ -1,6 +1,7 @@
 import React, { Children, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import {
+  BlockingReservationFieldsFragment,
   ReservationNode,
   ReservationTypeChoice,
   ReservationUnitPageQuery,
@@ -105,6 +106,7 @@ type Props = {
   reservationUnit: NonNullable<ReservationUnitPageQuery["reservationUnit"]>;
   reservableTimes: ReservableMap;
   activeApplicationRounds: readonly RoundPeriod[];
+  blockingReservations: readonly BlockingReservationFieldsFragment[];
   reservationForm: UseFormReturn<PendingReservationFormType>;
   isReservationQuotaReached: boolean;
   submitReservation: (d: PendingReservationFormType) => void;
@@ -147,18 +149,18 @@ function useSlotPropGetter({
 function useCalendarEventChange({
   reservationUnit,
   focusSlot,
+  blockingReservations,
 }: Pick<Props, "reservationUnit"> & {
   focusSlot: ReturnType<typeof convertFormToFocustimeSlot>;
+  blockingReservations: readonly BlockingReservationFieldsFragment[];
 }): Array<CalendarEventBuffer | CalendarEvent<ReservationNode>> {
   const { t } = useTranslation();
   // TODO this doesn't optimize anything
   // any change in the event will cause a full recalculation
   const calendarEvents: Array<
     CalendarEventBuffer | CalendarEvent<ReservationNode>
   > = useMemo(() => {
-    const existingReservations = filterNonNullable(
-      reservationUnit.reservations
-    );
+    const existingReservations = blockingReservations;
 
     const shouldDisplayFocusSlot = focusSlot.isReservable;
 
@@ -214,7 +216,7 @@ function useCalendarEventChange({
         ...(pendingReservation != null ? [pendingReservation] : []),
       ]),
     ];
-  }, [reservationUnit, t, focusSlot]);
+  }, [reservationUnit, t, focusSlot, blockingReservations]);
 
   return calendarEvents;
 }
@@ -228,6 +230,7 @@ export function ReservationTimePicker({
   loginAndSubmitButton,
   submitReservation,
   startingTimeOptions,
+  blockingReservations,
 }: Props) {
   const { t, i18n } = useTranslation();
   const [calendarViewType, setCalendarViewType] = useState<WeekOptions>("week");
@@ -248,11 +251,13 @@ export function ReservationTimePicker({
     reservationUnit,
     activeApplicationRounds,
     reservableTimes,
+    blockingReservations,
   });
 
   const calendarEvents = useCalendarEventChange({
     reservationUnit,
     focusSlot,
+    blockingReservations,
   });
   const slotPropGetter = useSlotPropGetter({
     reservableTimes,
@@ -294,6 +299,7 @@ export function ReservationTimePicker({
       reservationUnit,
       reservableTimes,
       activeApplicationRounds,
+      blockingReservations,
     });
 
     if (!isReservable) {
@@ -351,6 +357,7 @@ export function ReservationTimePicker({
       reservationUnit,
       reservableTimes,
       activeApplicationRounds,
+      blockingReservations,
     });
     if (!isReservable) {
       return false;

diff --git a/apps/ui/gql/gql-types.ts b/apps/ui/gql/gql-types.ts
@@ -6515,19 +6515,6 @@ export type IsReservableFieldsFragment = {
   reservationsMinDaysBefore?: number | null;
   reservationBegins?: string | null;
   reservationEnds?: string | null;
-  reservations?: Array<{
-    pk?: number | null;
-    id: string;
-    state?: ReservationStateChoice | null;
-    isBlocked?: boolean | null;
-    begin: string;
-    end: string;
-    numPersons?: number | null;
-    calendarUrl?: string | null;
-    bufferTimeBefore: number;
-    bufferTimeAfter: number;
-    affectedReservationUnits?: Array<number | null> | null;
-  }> | null;
   reservableTimeSpans?: Array<{
     startDatetime?: string | null;
     endDatetime?: string | null;
@@ -6626,19 +6613,6 @@ export type ReservationUnitPageQuery = {
         nameSv?: string | null;
       };
     }>;
-    reservations?: Array<{
-      pk?: number | null;
-      id: string;
-      state?: ReservationStateChoice | null;
-      isBlocked?: boolean | null;
-      begin: string;
-      end: string;
-      numPersons?: number | null;
-      calendarUrl?: string | null;
-      bufferTimeBefore: number;
-      bufferTimeAfter: number;
-      affectedReservationUnits?: Array<number | null> | null;
-    }> | null;
     reservableTimeSpans?: Array<{
       startDatetime?: string | null;
       endDatetime?: string | null;
@@ -8001,9 +7975,6 @@ export const BlockingReservationFieldsFragmentDoc = gql`
 `;
 export const IsReservableFieldsFragmentDoc = gql`
   fragment IsReservableFields on ReservationUnitNode {
-    reservations(state: $state) {
-      ...BlockingReservationFields
-    }
     bufferTimeBefore
     bufferTimeAfter
     reservableTimeSpans(startDate: $beginDate, endDate: $endDate) {
@@ -8018,7 +7989,6 @@ export const IsReservableFieldsFragmentDoc = gql`
     reservationBegins
     reservationEnds
   }
-  ${BlockingReservationFieldsFragmentDoc}
 `;
 export const ReservationUnitNameFieldsFragmentDoc = gql`
   fragment ReservationUnitNameFields on ReservationUnitNode {

diff --git a/apps/ui/modules/__tests__/reservable.test.ts b/apps/ui/modules/__tests__/reservable.test.ts
@@ -14,6 +14,7 @@ import {
   isStartTimeValid,
 } from "../reservable";
 import {
+  BlockingReservationFieldsFragment,
   type IsReservableFieldsFragment,
   ReservationStartInterval,
   ReservationStateChoice,
@@ -322,7 +323,7 @@ describe("isRangeReservable", () => {
     bufferTimeBefore?: number;
     bufferTimeAfter?: number;
     reservableTimes?: ReservableMap;
-    reservations?: IsReservableFieldsFragment["reservations"];
+    reservations?: BlockingReservationFieldsFragment[];
     interval?: ReservationStartInterval;
     maxReservationDuration?: IsReservableFieldsFragment["maxReservationDuration"];
     minReservationDuration?: IsReservableFieldsFragment["minReservationDuration"];
@@ -338,6 +339,7 @@ describe("isRangeReservable", () => {
       reservationUnit: createMockReservationUnit(rest),
       activeApplicationRounds: activeApplicationRounds ?? [],
       reservableTimes: reservableTimes ?? mockReservableTimes(),
+      blockingReservations: rest.reservations ?? [],
     };
   }
 

diff --git a/apps/ui/modules/__tests__/reservation.test.ts b/apps/ui/modules/__tests__/reservation.test.ts
@@ -601,6 +601,7 @@ describe("canReservationBeChanged", () => {
       },
       reservationUnit: baseUnit,
       activeApplicationRounds: [],
+      blockingReservations: [],
     };
   }
 

diff --git a/apps/ui/modules/__tests__/reservationUnit.test.ts b/apps/ui/modules/__tests__/reservationUnit.test.ts
@@ -99,6 +99,7 @@ describe("getPossibleTimesForDay", () => {
       activeApplicationRounds: [] as const,
       reservableTimes: reservableTimes ?? mockReservableTimes(),
       durationValue: duration ?? 30,
+      blockingReservations: [] as const,
     };
   }
 

diff --git a/apps/ui/modules/queries/reservationUnit.tsx b/apps/ui/modules/queries/reservationUnit.tsx
@@ -120,9 +120,6 @@ export const RESERVATION_UNIT_PARAMS_PAGE_QUERY = gql`
 const IS_RESERVABLE_FRAGMENT = gql`
   ${BLOCKING_RESERVATION_FRAGMENT}
   fragment IsReservableFields on ReservationUnitNode {
-    reservations(state: $state) {
-      ...BlockingReservationFields
-    }
     bufferTimeBefore
     bufferTimeAfter
     reservableTimeSpans(startDate: $beginDate, endDate: $endDate) {