* feat: Disallow next month prefetching in booker * renamed to include NEXT_PUBLIC * fixed boolean expression * Now using a variable length of days to load * Type fixes * Now opening all dates to be clickable * Added turbo.json var and updated example env * Fixed issue with selectedDate being null when first loading the page * Updated description of variable * Made constant for the booking days * Type fix * Setting the days to load for weekly view to 7 * feat: add ui and ability to fetch more on click * feat: add ui and ability to fetch more on click * fix: loader * fix: banner detection * Update packages/features/bookings/Booker/Booker.tsx * fix: types * Not showing HavingTroubleFindingTime component when the schedule is loading * Only enabled on monthly view * Correctly load initial date * Type fix * Fixed bugs around triggering multiple requests * Added case for when there is no selectedDate but the month has been specified * Types * More types * Check for undefined * More typing * More typing --------- Co-authored-by: sean-brydon <sean@cal.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import dayjs from "@calcom/dayjs";
|
|
import { getUsernameList } from "@calcom/lib/defaultEvents";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
|
|
type UseScheduleWithCacheArgs = {
|
|
username?: string | null;
|
|
eventSlug?: string | null;
|
|
eventId?: number | null;
|
|
month?: string | null;
|
|
timezone?: string | null;
|
|
selectedDate?: string | null;
|
|
prefetchNextMonth?: boolean;
|
|
duration?: number | null;
|
|
monthCount?: number | null;
|
|
dayCount?: number | null;
|
|
rescheduleUid?: string | null;
|
|
isTeamEvent?: boolean;
|
|
};
|
|
|
|
export const useSchedule = ({
|
|
month,
|
|
timezone,
|
|
username,
|
|
eventSlug,
|
|
eventId,
|
|
selectedDate,
|
|
prefetchNextMonth,
|
|
duration,
|
|
monthCount,
|
|
dayCount,
|
|
rescheduleUid,
|
|
isTeamEvent,
|
|
}: UseScheduleWithCacheArgs) => {
|
|
const now = dayjs();
|
|
const monthDayjs = month ? dayjs(month) : now;
|
|
const nextMonthDayjs = monthDayjs.add(monthCount ? monthCount : 1, "month");
|
|
// Why the non-null assertions? All of these arguments are checked in the enabled condition,
|
|
// and the query will not run if they are null. However, the check in `enabled` does
|
|
// no satisfy typescript.
|
|
let startTime;
|
|
let endTime;
|
|
|
|
if (!!dayCount && dayCount > 0) {
|
|
if (selectedDate) {
|
|
startTime = dayjs(selectedDate).toISOString();
|
|
endTime = dayjs(selectedDate).add(dayCount, "day").toISOString();
|
|
} else if (monthDayjs.month() === now.month()) {
|
|
startTime = now.startOf("day").toISOString();
|
|
endTime = now.startOf("day").add(dayCount, "day").toISOString();
|
|
} else {
|
|
startTime = monthDayjs.startOf("month").toISOString();
|
|
endTime = monthDayjs.startOf("month").add(dayCount, "day").toISOString();
|
|
}
|
|
} else {
|
|
startTime = monthDayjs.startOf("month").toISOString();
|
|
endTime = (prefetchNextMonth ? nextMonthDayjs : monthDayjs).endOf("month").toISOString();
|
|
}
|
|
|
|
return trpc.viewer.public.slots.getSchedule.useQuery(
|
|
{
|
|
isTeamEvent,
|
|
usernameList: getUsernameList(username ?? ""),
|
|
// Prioritize slug over id, since slug is the first value we get available.
|
|
// If we have a slug, we don't need to fetch the id.
|
|
// TODO: are queries using eventTypeId faster? Even tho we lost time fetching the id with the slug.
|
|
...(eventSlug ? { eventTypeSlug: eventSlug } : { eventTypeId: eventId ?? 0 }),
|
|
// @TODO: Old code fetched 2 days ago if we were fetching the current month.
|
|
// Do we want / need to keep that behavior?
|
|
startTime,
|
|
// if `prefetchNextMonth` is true, two months are fetched at once.
|
|
endTime,
|
|
timeZone: timezone!,
|
|
duration: duration ? `${duration}` : undefined,
|
|
rescheduleUid,
|
|
},
|
|
{
|
|
trpc: {
|
|
context: {
|
|
skipBatch: true,
|
|
},
|
|
},
|
|
refetchOnWindowFocus: false,
|
|
enabled:
|
|
Boolean(username) &&
|
|
Boolean(month) &&
|
|
Boolean(timezone) &&
|
|
// Should only wait for one or the other, not both.
|
|
(Boolean(eventSlug) || Boolean(eventId) || eventId === 0),
|
|
}
|
|
);
|
|
};
|