Files
cal.diy/packages/features/schedules/lib/use-schedule/useSchedule.ts
T
e4037be79a feat: Limit the amount of days to load for a schedule (#13282)
* 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>
2024-01-25 14:48:46 -03:00

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