Re-implemented * is all booked today in Slots() component

components/booking/AvailableTimes.tsx

@@ -5,7 +5,7 @@ import Slots from "./Slots";
 const AvailableTimes = ({ date, eventLength, eventTypeId, workingHours, timeFormat }) => {
   const router = useRouter();
   const { user, rescheduleUid } = router.query;
-  const { slots } = Slots({ date, eventLength, workingHours });
+  const { slots, isFullyBooked } = Slots({ date, eventLength, workingHours });
   return (
     <div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3  md:max-h-97 overflow-y-auto">
       <div className="text-gray-600 font-light text-xl mb-4 text-left">
@@ -25,9 +25,12 @@ const AvailableTimes = ({ date, eventLength, eventTypeId, workingHours, timeForm
             </Link>
           </div>
         ))
-      ) : (
-        <div className="loader" />
-      )}
+      ) : isFullyBooked ?
+          <div className="w-full h-full flex flex-col justify-center content-center items-center -mt-4">
+            <h1 className="text-xl font">{user} is all booked today.</h1>
+          </div>
+          : <div className="loader" />
+      }
     </div>
   );
 };

components/booking/Slots.tsx

@@ -1,32 +1,49 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import getSlots from "../../lib/slots";
+import dayjs, {Dayjs} from "dayjs";
+import isBetween from "dayjs/plugin/isBetween";
+dayjs.extend(isBetween);
+
+type Props = {
+  eventLength: number;
+  minimumBookingNotice?: number;
+  date: Dayjs;
+}
+
+const Slots = ({ eventLength, minimumBookingNotice, date, workingHours }: Props) => {
+
+  minimumBookingNotice = minimumBookingNotice || 0;
 
-const Slots = (props) => {
   const router = useRouter();
   const { user } = router.query;
   const [slots, setSlots] = useState([]);
+  const [isFullyBooked, setIsFullyBooked ] = useState(false);
 
   useEffect(() => {
     setSlots([]);
+    setIsFullyBooked(false);
     fetch(
-      `/api/availability/${user}?dateFrom=${props.date.startOf("day").utc().format()}&dateTo=${props.date
+      `/api/availability/${user}?dateFrom=${date.startOf("day").utc().format()}&dateTo=${date
         .endOf("day")
         .utc()
         .format()}`
     )
       .then((res) => res.json())
       .then(handleAvailableSlots);
-  }, [props.date]);
+  }, [date]);
 
   const handleAvailableSlots = (busyTimes: []) => {
+
     const times = getSlots({
-      frequency: props.eventLength,
-      inviteeDate: props.date,
-      workingHours: props.workingHours,
-      minimumBookingNotice: 0,
+      frequency: eventLength,
+      inviteeDate: date,
+      workingHours,
+      minimumBookingNotice,
     });
 
+    const timesLengthBeforeConflicts: number = times.length;
+
     // Check for conflicts
     for (let i = times.length - 1; i >= 0; i -= 1) {
       busyTimes.forEach((busyTime) => {
@@ -44,22 +61,27 @@ const Slots = (props) => {
         }
 
         // Check if slot end time is between start and end time
-        if (dayjs(times[i]).add(props.eventType.length, "minutes").isBetween(startTime, endTime)) {
+        if (dayjs(times[i]).add(eventLength, "minutes").isBetween(startTime, endTime)) {
           times.splice(i, 1);
         }
 
         // Check if startTime is between slot
-        if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, "minutes"))) {
+        if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(eventLength, "minutes"))) {
           times.splice(i, 1);
         }
       });
     }
+
+    if (times.length === 0 && timesLengthBeforeConflicts !== 0) {
+      setIsFullyBooked(true);
+    }
     // Display available times
     setSlots(times);
   };
 
   return {
     slots,
+    isFullyBooked,
   };
 };