mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

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

Browse source
This commit is contained in:
Alex van Andel 2021-06-27 22:02:27 +00:00
parent 7030851efb
commit 698c64e657
2 changed files with 38 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/booking/AvailableTimes.tsx
View file

@ -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>
);
};

40
components/booking/Slots.tsx
View file

@ -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,
};
};