Skip to content

Commit c5942bc

Browse files
hariombalharahariombalhara
authored
Fix nan prefetch in platform (calcom#23913)
1 parent c4547c5 commit c5942bc

3 files changed

Lines changed: 76 additions & 47 deletions

File tree

‎packages/features/bookings/Booker/components/hooks/usePrefetch.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import dayjs from "@calcom/dayjs";
2+
import type { BookerState } from "@calcom/features/bookings/Booker/types";
3+
import { BookerLayouts } from "@calcom/prisma/zod-utils";
4+
5+
interface UsePrefetchParams {
6+
date: string;
7+
month: string | null;
8+
bookerLayout: {
9+
layout: string;
10+
extraDays: number;
11+
columnViewExtraDays: { current: number };
12+
};
13+
bookerState: BookerState;
14+
}
15+
16+
export const usePrefetch = ({ date, month, bookerLayout, bookerState }: UsePrefetchParams) => {
17+
const dateMonth = dayjs(date).month();
18+
const monthAfterAdding1Month = dayjs(date).add(1, "month").month();
19+
const monthAfterAddingExtraDays = dayjs(date).add(bookerLayout.extraDays, "day").month();
20+
const monthAfterAddingExtraDaysColumnView = dayjs(date)
21+
.add(bookerLayout.columnViewExtraDays.current, "day")
22+
.month();
23+
24+
const isValidDate = dayjs(date).isValid();
25+
const twoWeeksAfter = dayjs(month).startOf("month").add(2, "week");
26+
const isSameMonth = dayjs().isSame(dayjs(month), "month");
27+
const isAfter2Weeks = dayjs().isAfter(twoWeeksAfter);
28+
29+
const prefetchNextMonth =
30+
(bookerLayout.layout === BookerLayouts.WEEK_VIEW &&
31+
!!bookerLayout.extraDays &&
32+
!isNaN(dateMonth) &&
33+
!isNaN(monthAfterAddingExtraDays) &&
34+
dateMonth !== monthAfterAddingExtraDays) ||
35+
(bookerLayout.layout === BookerLayouts.COLUMN_VIEW &&
36+
!isNaN(dateMonth) &&
37+
!isNaN(monthAfterAddingExtraDaysColumnView) &&
38+
dateMonth !== monthAfterAddingExtraDaysColumnView) ||
39+
((bookerLayout.layout === BookerLayouts.MONTH_VIEW || bookerLayout.layout === "mobile") &&
40+
(!isValidDate || isSameMonth) &&
41+
isAfter2Weeks);
42+
43+
const monthCount =
44+
((bookerLayout.layout !== BookerLayouts.WEEK_VIEW && bookerState === "selecting_time") ||
45+
bookerLayout.layout === BookerLayouts.COLUMN_VIEW) &&
46+
!isNaN(monthAfterAdding1Month) &&
47+
!isNaN(monthAfterAddingExtraDaysColumnView) &&
48+
monthAfterAdding1Month !== monthAfterAddingExtraDaysColumnView
49+
? 2
50+
: undefined;
51+
52+
return {
53+
prefetchNextMonth,
54+
monthCount,
55+
};
56+
};

‎packages/platform/atoms/booker/BookerPlatformWrapper.tsx‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
import { useBookerLayout } from "@calcom/features/bookings/Booker/components/hooks/useBookerLayout";
1616
import { useBookingForm } from "@calcom/features/bookings/Booker/components/hooks/useBookingForm";
1717
import { useLocalSet } from "@calcom/features/bookings/Booker/components/hooks/useLocalSet";
18+
import { usePrefetch } from "@calcom/features/bookings/Booker/components/hooks/usePrefetch";
1819
import { useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
1920
import { useTimePreferences } from "@calcom/features/bookings/lib";
2021
import { useTimesForSchedule } from "@calcom/features/schedules/lib/use-schedule/useTimesForSchedule";
@@ -92,6 +93,7 @@ const BookerPlatformWrapperComponent = (
9293
);
9394
const prevStateRef = useRef<BookerStoreValues | null>(null);
9495
const bookerStoreContext = useContext(BookerStoreContext);
96+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
9597
const getStateValues = useCallback((state: any): BookerStoreValues => {
9698
return Object.fromEntries(
9799
Object.entries(state).filter(([_, value]) => typeof value !== "function")
@@ -147,10 +149,12 @@ const BookerPlatformWrapperComponent = (
147149

148150
useEffect(() => {
149151
setSelectedDuration(props.duration ?? null);
152+
// eslint-disable-next-line react-hooks/exhaustive-deps
150153
}, [props.duration]);
151154

152155
useEffect(() => {
153156
setOrg(props.entity?.orgSlug ?? null);
157+
// eslint-disable-next-line react-hooks/exhaustive-deps
154158
}, [props.entity?.orgSlug]);
155159

156160
const isDynamic = useMemo(() => {
@@ -223,30 +227,20 @@ const BookerPlatformWrapperComponent = (
223227
name: prefillFormParamName,
224228
guests: defaultGuests ?? [],
225229
};
230+
// eslint-disable-next-line react-hooks/exhaustive-deps
226231
}, [defaultName, defaultGuests]);
227232

228233
const extraOptions = useMemo(() => {
229234
return restFormValues;
230235
}, [restFormValues]);
231236
const date = dayjs(selectedDate).format("YYYY-MM-DD");
232237

233-
const prefetchNextMonth =
234-
(bookerLayout.layout === BookerLayouts.WEEK_VIEW &&
235-
!!bookerLayout.extraDays &&
236-
dayjs(date).month() !== dayjs(date).add(bookerLayout.extraDays, "day").month()) ||
237-
(bookerLayout.layout === BookerLayouts.COLUMN_VIEW &&
238-
dayjs(date).month() !== dayjs(date).add(bookerLayout.columnViewExtraDays.current, "day").month()) ||
239-
((bookerLayout.layout === BookerLayouts.MONTH_VIEW || bookerLayout.layout === "mobile") &&
240-
(!dayjs(date).isValid() || dayjs().isSame(dayjs(month), "month")) &&
241-
dayjs().isAfter(dayjs(month).startOf("month").add(2, "week")));
242-
243-
const monthCount =
244-
((bookerLayout.layout !== BookerLayouts.WEEK_VIEW && bookerState === "selecting_time") ||
245-
bookerLayout.layout === BookerLayouts.COLUMN_VIEW) &&
246-
dayjs(date).add(1, "month").month() !==
247-
dayjs(date).add(bookerLayout.columnViewExtraDays.current, "day").month()
248-
? 2
249-
: undefined;
238+
const { prefetchNextMonth, monthCount } = usePrefetch({
239+
date,
240+
month,
241+
bookerLayout,
242+
bookerState,
243+
});
250244
const { timezone } = useTimePreferences();
251245

252246
const [calculatedStartTime, calculatedEndTime] = useTimesForSchedule({
@@ -470,6 +464,7 @@ const BookerPlatformWrapperComponent = (
470464
);
471465
useEffect(() => {
472466
setSelectedDate({ date: selectedDateProp, omitUpdatingParams: true });
467+
// eslint-disable-next-line react-hooks/exhaustive-deps
473468
}, [selectedDateProp]);
474469

475470
useEffect(() => {

‎packages/platform/atoms/booker/BookerWebWrapper.tsx‎

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { useBookerLayout } from "@calcom/features/bookings/Booker/components/hoo
2121
import { useBookingForm } from "@calcom/features/bookings/Booker/components/hooks/useBookingForm";
2222
import { useBookings } from "@calcom/features/bookings/Booker/components/hooks/useBookings";
2323
import { useCalendars } from "@calcom/features/bookings/Booker/components/hooks/useCalendars";
24+
import { usePrefetch } from "@calcom/features/bookings/Booker/components/hooks/usePrefetch";
2425
import { useSlots } from "@calcom/features/bookings/Booker/components/hooks/useSlots";
2526
import { useVerifyCode } from "@calcom/features/bookings/Booker/components/hooks/useVerifyCode";
2627
import { useVerifyEmail } from "@calcom/features/bookings/Booker/components/hooks/useVerifyEmail";
@@ -31,7 +32,6 @@ import type { getPublicEvent } from "@calcom/features/eventtypes/lib/getPublicEv
3132
import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR, WEBAPP_URL } from "@calcom/lib/constants";
3233
import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
3334
import { localStorage } from "@calcom/lib/webstorage";
34-
import { BookerLayouts } from "@calcom/prisma/zod-utils";
3535

3636
export type BookerWebWrapperAtomProps = BookerProps & {
3737
eventData?: NonNullable<Awaited<ReturnType<typeof getPublicEvent>>>;
@@ -139,35 +139,12 @@ const BookerPlatformWrapperComponent = (props: BookerWebWrapperAtomProps) => {
139139

140140
const isEmbed = useIsEmbed();
141141

142-
const _month = dayjs(date).month();
143-
const _monthAfterAdding1Month = dayjs(date).add(1, "month").month();
144-
const _monthAfterAddingExtraDays = dayjs(date).add(bookerLayout.extraDays, "day").month();
145-
const _monthAfterAddingExtraDaysColumnView = dayjs(date)
146-
.add(bookerLayout.columnViewExtraDays.current, "day")
147-
.month();
148-
149-
const _isValidDate = dayjs(date).isValid();
150-
const _2WeeksAfter = dayjs(month).startOf("month").add(2, "week");
151-
const _isSameMonth = dayjs().isSame(dayjs(month), "month");
152-
const _isAfter2Weeks = dayjs().isAfter(_2WeeksAfter);
153-
154-
const prefetchNextMonth =
155-
(bookerLayout.layout === BookerLayouts.WEEK_VIEW &&
156-
!!bookerLayout.extraDays &&
157-
_month !== _monthAfterAddingExtraDays) ||
158-
(bookerLayout.layout === BookerLayouts.COLUMN_VIEW && _month !== _monthAfterAddingExtraDaysColumnView) ||
159-
((bookerLayout.layout === BookerLayouts.MONTH_VIEW || bookerLayout.layout === "mobile") &&
160-
(!_isValidDate || _isSameMonth) &&
161-
_isAfter2Weeks);
162-
163-
const monthCount =
164-
((bookerLayout.layout !== BookerLayouts.WEEK_VIEW && bookerState === "selecting_time") ||
165-
bookerLayout.layout === BookerLayouts.COLUMN_VIEW) &&
166-
!isNaN(_monthAfterAdding1Month) &&
167-
!isNaN(_monthAfterAddingExtraDaysColumnView) &&
168-
_monthAfterAdding1Month !== _monthAfterAddingExtraDaysColumnView
169-
? 2
170-
: undefined;
142+
const { prefetchNextMonth, monthCount } = usePrefetch({
143+
date,
144+
month,
145+
bookerLayout,
146+
bookerState,
147+
});
171148
/**
172149
* Prioritize dateSchedule load
173150
* Component will render but use data already fetched from here, and no duplicate requests will be made
@@ -239,6 +216,7 @@ const BookerPlatformWrapperComponent = (props: BookerWebWrapperAtomProps) => {
239216

240217
useEffect(() => {
241218
if (hasSession) onOverlaySwitchStateChange(true);
219+
// eslint-disable-next-line react-hooks/exhaustive-deps
242220
}, [hasSession]);
243221

244222
return (

0 commit comments

Comments
 (0)