calcom/lib/hooks/useSlots.ts
Alex van Andel 6ab741b927
Feature/round robin (#613)
* Heavy WIP

* More WIP

* Playing with backwards compat

* Moar wip

* wip

* Email changes for group feature

* Committing in redundant migrations for reference

* Combine all WIP migrations into a single feature migration

* Make backup of current version of radio area pending refactor

* Improved accessibility through keyboard

* Cleanup in seperate commit so I can cherrypick later

* Added RadioArea component

* wip

* Ignore .yarn file

* Kinda stable

* Getting closer...

* Hide header when there are only personal events

* Added uid to event create, updated EventTypeDescription

* Delete redundant migration

* Committing new team related migrations

* Optimising & implemented backwards compatibility

* Removed now redundant pages

* Undid prototyping to calendarClient I did not end up using

* Properly typed Select & fixed lint throughout

* How'd that get here, removed.

* TODO: investigate why userData is not compatible with passed type

* This likely matches the event type that is created for a user

* Few bugfixes

* Adding datepicker optimisations

* Fixed new event type spacing, initial profile should always be there

* Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution

* Updated EventTypeDescription to account for long titles, added logo to team page.

* Added logo to team query

* Added cancel Cypress test because an upcoming merge contains changes

* Fix for when the event type description is long

* Turned Theme into the useTheme hook, and made it fully compatible with teams pages

* Built AvatarGroup ui component + moved Avatar to ui

* Give the avatar some space fom the description

* Fixed timeZone selector

* Disabled tooltip +1-...

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 09:45:28 +01:00

138 lines
4 KiB
TypeScript

import { useState, useEffect } from "react";
import getSlots from "@lib/slots";
import { User, SchedulingType } from "@prisma/client";
import dayjs, { Dayjs } from "dayjs";
import isBetween from "dayjs/plugin/isBetween";
import utc from "dayjs/plugin/utc";
dayjs.extend(isBetween);
dayjs.extend(utc);
type Slot = {
time: Dayjs;
users?: string[];
};
type UseSlotsProps = {
eventLength: number;
minimumBookingNotice?: number;
date: Dayjs;
workingHours: [];
users: User[];
schedulingType: SchedulingType;
};
export const useSlots = (props: UseSlotsProps) => {
const { eventLength, minimumBookingNotice = 0, date, users } = props;
const [slots, setSlots] = useState<Slot[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
setSlots([]);
setLoading(true);
setError(null);
const dateFrom = encodeURIComponent(date.startOf("day").format());
const dateTo = encodeURIComponent(date.endOf("day").format());
Promise.all(
users.map((user: User) =>
fetch(`/api/availability/${user.username}?dateFrom=${dateFrom}&dateTo=${dateTo}`)
.then(handleAvailableSlots)
.catch((e) => {
console.error(e);
setError(e);
})
)
).then((results) => {
let loadedSlots: Slot[] = results[0];
if (results.length === 1) {
setSlots(loadedSlots);
setLoading(false);
return;
}
let poolingMethod;
switch (props.schedulingType) {
// intersect by time, does not take into account eventLength (yet)
case SchedulingType.COLLECTIVE:
poolingMethod = (slots, compareWith) =>
slots.filter((slot) => compareWith.some((compare) => compare.time.isSame(slot.time)));
break;
case SchedulingType.ROUND_ROBIN:
// TODO: Create a Reservation (lock this slot for X minutes)
// this will make the following code redundant
poolingMethod = (slots, compareWith) => {
compareWith.forEach((compare) => {
const match = slots.findIndex((slot) => slot.time.isSame(compare.time));
if (match !== -1) {
slots[match].users.push(compare.users[0]);
} else {
slots.push(compare);
}
});
return slots;
};
break;
}
for (let i = 1; i < results.length; i++) {
loadedSlots = poolingMethod(loadedSlots, results[i]);
}
setSlots(loadedSlots);
setLoading(false);
});
}, [date]);
const handleAvailableSlots = async (res) => {
const responseBody = await res.json();
responseBody.workingHours.days = responseBody.workingHours.daysOfWeek;
const times = getSlots({
frequency: eventLength,
inviteeDate: date,
workingHours: [responseBody.workingHours],
minimumBookingNotice,
organizerTimeZone: responseBody.workingHours.timeZone,
});
// Check for conflicts
for (let i = times.length - 1; i >= 0; i -= 1) {
responseBody.busy.every((busyTime): boolean => {
const startTime = dayjs(busyTime.start);
const endTime = dayjs(busyTime.end);
// Check if start times are the same
if (times[i].isBetween(startTime, endTime, null, "[)")) {
times.splice(i, 1);
}
// Check if slot end time is between start and end time
else if (times[i].add(eventLength, "minutes").isBetween(startTime, endTime)) {
times.splice(i, 1);
}
// Check if startTime is between slot
else if (startTime.isBetween(times[i], times[i].add(eventLength, "minutes"))) {
times.splice(i, 1);
} else {
return true;
}
return false;
});
}
// temporary
const user = res.url.substring(res.url.lastIndexOf("/") + 1, res.url.indexOf("?"));
return times.map((time) => ({
time,
users: [user],
}));
};
return {
slots,
loading,
error,
};
};
export default useSlots;