fix: calendar drag with min duration > 30

Author: joonatank

apps/ui/components/reservation-unit/utils.ts

@@ -107,15 +107,15 @@ const getAvailableTimesForDay = ({
       const endDate = addMinutes(startDate, duration ?? 0);
       const startTime = new Date(start);
       startTime.setHours(timeHours, timeMinutes, 0, 0);
-      return isReservationReservable({
+      const isReservable = isReservationReservable({
         reservationUnit,
         activeApplicationRounds,
         start: startDate,
         end: endDate,
         skipLengthCheck: false,
-      }) && !isBefore(startDate, startTime)
-        ? n.label
-        : null;
+      });
+
+      return isReservable && !isBefore(startDate, startTime) ? n.label : null;
     })
     .filter((n): n is NonNullable<typeof n> => n != null);
 };
@@ -190,7 +190,9 @@ const isSlotReservable = (
   activeApplicationRounds?: RoundPeriod[],
   skipLengthCheck = false
 ): boolean => {
-  if (!reservationUnit || !activeApplicationRounds) return false;
+  if (!reservationUnit || !activeApplicationRounds) {
+    return false;
+  }
   return isReservationReservable({
     reservationUnit,
     activeApplicationRounds,

apps/ui/components/reservation/EditStep0.tsx

@@ -266,12 +266,10 @@ const EditStep0 = ({
         : undefined;
 
     const bufferTimeBefore =
-      reservationUnit?.bufferTimeBefore != null &&
       reservationUnit.bufferTimeBefore !== 0
         ? reservationUnit.bufferTimeBefore.toString()
         : reservationBufferTimeBefore;
     const bufferTimeAfter =
-      reservationUnit?.bufferTimeAfter != null &&
       reservationUnit.bufferTimeAfter !== 0
         ? reservationUnit.bufferTimeAfter.toString()
         : reservationBufferTimeAfter;

apps/ui/modules/reservation.ts

@@ -217,7 +217,9 @@ export const getNormalizedReservationOrderStatus = (
   return null;
 };
 
-export const isReservationReservable = ({
+/// NOTE don't return [boolean, string] causes issues in TS / JS
+/// instead break this function into cleaner separate functions
+export function isReservationReservable({
   reservationUnit,
   activeApplicationRounds,
   start,
@@ -229,7 +231,7 @@ export const isReservationReservable = ({
   start: Date;
   end: Date;
   skipLengthCheck: boolean;
-}): boolean => {
+}): boolean {
   if (!reservationUnit) {
     return false;
   }
@@ -297,17 +299,27 @@ export const isReservationReservable = ({
   ) {
     return false;
   }
+
   if (
-    (!skipLengthCheck &&
-      !isReservationLongEnough(start, end, minReservationDuration ?? 0)) ||
-    !isReservationShortEnough(start, end, maxReservationDuration ?? 0) ||
-    doReservationsCollide({ start, end }, reservationsArr)
+    !skipLengthCheck &&
+    !isReservationLongEnough(start, end, minReservationDuration ?? 0)
   ) {
     return false;
   }
 
+  if (
+    !skipLengthCheck &&
+    !isReservationShortEnough(start, end, maxReservationDuration ?? 0)
+  ) {
+    return false;
+  }
+
+  if (doReservationsCollide({ start, end }, reservationsArr)) {
+    return false;
+  }
+
   return true;
-};
+}
 
 export const isReservationConfirmed = (reservation: ReservationNode): boolean =>
   reservation.state === "CONFIRMED";
@@ -323,7 +335,10 @@ export type CanReservationBeChangedProps = {
   activeApplicationRounds?: RoundPeriod[];
 };
 
-// TODO disable undefined from reservation and reservationUnit
+/// NOTE [boolean, string] causes issues in TS / JS
+/// ![false] === ![true] === false, with no type errors
+/// either refactor the return value or add lint rules to disable ! operator
+/// TODO disable undefined from reservation and reservationUnit
 export const canReservationTimeBeChanged = ({
   reservation,
   newReservation,
@@ -363,23 +378,25 @@ export const canReservationTimeBeChanged = ({
     return [false, "RESERVATION_MODIFICATION_NOT_ALLOWED"];
   }
 
-  if (reservation && newReservation) {
+  if (newReservation) {
     //  new reservation is free
     if (!isReservationFreeOfCharge(newReservation)) {
       return [false, "RESERVATION_MODIFICATION_NOT_ALLOWED"];
     }
 
+    if (reservationUnit == null) {
+      return [false, "RESERVATION_UNIT_NOT_FOUND"];
+    }
+
     //  new reservation is valid
-    if (
-      reservationUnit != null &&
-      !isReservationReservable({
-        reservationUnit,
-        activeApplicationRounds,
-        start: new Date(newReservation.begin),
-        end: new Date(newReservation.end),
-        skipLengthCheck: false,
-      })
-    ) {
+    const isReservable = isReservationReservable({
+      reservationUnit,
+      activeApplicationRounds,
+      start: new Date(newReservation.begin),
+      end: new Date(newReservation.end),
+      skipLengthCheck: false,
+    });
+    if (!isReservable) {
       return [false, "RESERVATION_TIME_INVALID"];
     }
   }

apps/ui/modules/reservationUnit.ts

@@ -381,16 +381,14 @@ export function getPossibleTimesForDay(
       const [slotH, slotM] = span.split(":").map(Number);
       const slotDate = new Date(date);
       slotDate.setHours(slotH, slotM, 0, 0);
-      return (
-        slotDate >= new Date() &&
-        isReservationReservable({
-          reservationUnit,
-          activeApplicationRounds,
-          start: slotDate,
-          end: addMinutes(slotDate, durationValue),
-          skipLengthCheck: false,
-        })
-      );
+      const isReservable = isReservationReservable({
+        reservationUnit,
+        activeApplicationRounds,
+        start: slotDate,
+        end: addMinutes(slotDate, durationValue),
+        skipLengthCheck: false,
+      });
+      return slotDate >= new Date() && isReservable;
     })
     .map((time) => ({ label: time, value: time }));
 }

apps/ui/pages/reservation-unit/[id].tsx

@@ -468,7 +468,7 @@ const ReservationUnit = ({
       searchUIDate != null && isValidDate(searchUIDate)
         ? searchDate ?? ""
         : defaultDateString,
-    duration: searchDuration ?? minReservationDurationMinutes,
+    duration: Math.max(searchDuration ?? 0, minReservationDurationMinutes),
     time: searchTime ?? getTimeString(defaultDate),
   };
 
@@ -519,16 +519,18 @@ const ReservationUnit = ({
     const [hours, minutes] = timeValue.split(":").map(Number);
     start.setHours(hours, minutes, 0, 0);
     const end = addMinutes(start, durationValue);
+    const isReservable = isReservationReservable({
+      reservationUnit,
+      activeApplicationRounds,
+      start,
+      end,
+      skipLengthCheck: false,
+    });
+
     return {
       start,
       end,
-      isReservable: isReservationReservable({
-        reservationUnit,
-        activeApplicationRounds,
-        start,
-        end,
-        skipLengthCheck: false,
-      }),
+      isReservable,
       durationMinutes: durationValue,
     };
   }, [
@@ -639,23 +641,28 @@ const ReservationUnit = ({
         return false;
       }
 
-      if (
-        !isReservationReservable({
-          reservationUnit,
-          activeApplicationRounds,
-          start,
-          end,
-          skipLengthCheck: false,
-        })
-      ) {
+      // the next check is going to systematically fail unless the times are at least minReservationDuration apart
+      const { minReservationDuration } = reservationUnit;
+      const minEnd = addSeconds(start, minReservationDuration ?? 0);
+      const newEnd = new Date(Math.max(end.getTime(), minEnd.getTime()));
+
+      const isReservable = isReservationReservable({
+        reservationUnit,
+        activeApplicationRounds,
+        start,
+        end: newEnd,
+        skipLengthCheck: false,
+      });
+
+      if (!isReservable) {
         return false;
       }
 
       // Limit the duration to the max reservation duration
       // TODO should be replaced with a utility function that is properly named
       const newReservation = getNewReservation({
         start,
-        end,
+        end: newEnd,
         reservationUnit,
       });
 
@@ -698,15 +705,14 @@ const ReservationUnit = ({
           ? addSeconds(start, reservationUnit?.minReservationDuration ?? 0)
           : new Date(end);
 
-      if (
-        !isReservationReservable({
-          reservationUnit,
-          activeApplicationRounds,
-          start,
-          end: normalizedEnd,
-          skipLengthCheck: false,
-        })
-      ) {
+      const isReservable = isReservationReservable({
+        reservationUnit,
+        activeApplicationRounds,
+        start,
+        end: normalizedEnd,
+        skipLengthCheck: false,
+      });
+      if (!isReservable) {
         return false;
       }
 
@@ -749,16 +755,17 @@ const ReservationUnit = ({
       end: focusSlot?.end,
       state: "INITIAL",
     };
+    const isReservable = isReservationReservable({
+      reservationUnit,
+      activeApplicationRounds,
+      start: focusSlot?.start,
+      end: focusSlot?.end,
+      skipLengthCheck: false,
+    });
+
     const shouldDisplayFocusSlot =
-      focusSlot?.start != null &&
-      focusSlot?.end != null &&
-      isReservationReservable({
-        reservationUnit,
-        activeApplicationRounds,
-        start: focusSlot?.start,
-        end: focusSlot?.end,
-        skipLengthCheck: false,
-      });
+      focusSlot?.start != null && focusSlot?.end != null && isReservable;
+
     return [
       ...existingReservations,
       ...(shouldDisplayFocusSlot ? [focusEvent] : []),