Skip to content

Commit 38b43f7

Browse files
Ryukemeisterdevin-ai-integration[bot]
Ryukemeister
and
devin-ai-integration[bot]
authored
refactor: remove circular dependencies from CalendarView atom (calcom#27850)
* fix: decouple large calendar from features * fix: move calendar to features since this is the better approach * chore: move OOO slots to features * feat: add DefaultOutOfOfficeSlot fallback for calendar OOO rendering Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * chore: cleanup unused LargeCalendar component --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
1 parent 9603831 commit 38b43f7

26 files changed

Lines changed: 155 additions & 58 deletions

File tree

‎apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useState } from "react";
44

55
import dayjs from "@calcom/dayjs";
6-
import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
6+
import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
77
import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events";
88
import type { CalendarComponentProps, Hours } from "@calcom/features/calendars/weeklyview/types/state";
99

‎apps/web/modules/bookings/components/BookingCalendarView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import dayjs from "@calcom/dayjs";
44
import { useTimePreferences } from "@calcom/features/bookings/lib";
55
import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events";
66
import { useGetTheme } from "@calcom/lib/hooks/useTheme";
7-
import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
7+
import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
88
import { useBanners } from "@calcom/web/modules/shell/banners/useBanners";
99
import { useEffect, useMemo } from "react";
1010
import { useBookingDetailsSheetStore } from "../store/bookingDetailsSheetStore";

‎apps/web/modules/bookings/components/LargeCalendar.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
import { useMemo, useEffect } from "react";
1+
import { useEffect, useMemo } from "react";
22

33
import dayjs from "@calcom/dayjs";
44
import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
5+
import { useOverlayCalendarStore } from "@calcom/features/bookings/Booker/components/OverlayCalendar/store";
56
import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/hooks/useAvailableTimeSlots";
67
import { useBookerTime } from "@calcom/features/bookings/Booker/hooks/useBookerTime";
8+
import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
79
import type { BookerEvent } from "@calcom/features/bookings/types";
8-
import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
10+
import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
911
import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events";
1012
import { localStorage } from "@calcom/lib/webstorage";
1113

1214
import type { useScheduleForEventReturnType } from "@calcom/web/modules/schedules/hooks/useEvent";
13-
import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
14-
import { useOverlayCalendarStore } from "@calcom/features/bookings/Booker/components/OverlayCalendar/store";
15+
16+
import { OutOfOfficeInSlots } from "./OutOfOfficeInSlots";
1517

1618
export const LargeCalendar = ({
1719
extraDays,
@@ -78,6 +80,7 @@ export const LargeCalendar = ({
7880
hoverEventDuration={eventDuration}
7981
hideHeader
8082
timezone={timezone}
83+
renderOutOfOffice={(props) => <OutOfOfficeInSlots {...props} />}
8184
/>
8285
</div>
8386
);

‎apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
55
import { useMemo } from "react";
66

77
import dayjs from "@calcom/dayjs";
8-
import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
8+
import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
99
import type { CalendarComponentProps, Hours } from "@calcom/features/calendars/weeklyview/types/state";
1010
import { weekdayDates } from "@calcom/features/calendars/weeklyview/utils";
1111
import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";

‎apps/web/modules/troubleshooter/components/LargeCalendar.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1+
import { useSession } from "next-auth/react";
2+
import { useMemo } from "react";
3+
14
import dayjs from "@calcom/dayjs";
25
import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/hooks/useAvailableTimeSlots";
36
import { useTimePreferences } from "@calcom/features/bookings/lib/timePreferences";
4-
import { useSchedule } from "~/schedules/hooks/useSchedule";
7+
import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar";
58
import { useTroubleshooterStore } from "@calcom/features/troubleshooter/store";
69
import { BookingStatus } from "@calcom/prisma/enums";
710
import { trpc } from "@calcom/trpc/react";
8-
import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar";
9-
import { useSession } from "next-auth/react";
10-
import { useMemo } from "react";
11+
12+
import { useSchedule } from "~/schedules/hooks/useSchedule";
13+
14+
import { OutOfOfficeInSlots } from "../../bookings/components/OutOfOfficeInSlots";
1115

1216
export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
1317
const { timezone } = useTimePreferences();
@@ -125,6 +129,7 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
125129
hoverEventDuration={30}
126130
hideHeader
127131
timezone={timezone}
132+
renderOutOfOffice={(props) => <OutOfOfficeInSlots {...props} />}
128133
/>
129134
</div>
130135
);

apps/web/modules/calendars/weeklyview/components/Calendar.tsx renamed to packages/features/calendars/weeklyview/components/Calendar.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ function CalendarInner(props: CalendarComponentProps) {
3939
const borderColor = useCalendarStore((state) => state.borderColor ?? "default");
4040
const scrollToCurrentTime = useCalendarStore((state) => state.scrollToCurrentTime ?? true);
4141
const updateCurrentTimeOnFocus = useCalendarStore((state) => state.updateCurrentTimeOnFocus ?? false);
42+
const renderOutOfOffice = useCalendarStore((state) => state.renderOutOfOffice);
4243

4344
const days = useMemo(() => getDaysBetweenDates(startDate, endDate), [startDate, endDate]);
4445

@@ -148,6 +149,7 @@ function CalendarInner(props: CalendarComponentProps) {
148149
day={days[i]}
149150
startHour={startHour}
150151
availableSlots={availableTimeslots}
152+
renderOutOfOffice={renderOutOfOffice}
151153
/>
152154
) : (
153155
<>

apps/web/modules/calendars/weeklyview/components/DateValues/index.tsx renamed to packages/features/calendars/weeklyview/components/DateValues/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import React from "react";
2-
31
import dayjs from "@calcom/dayjs";
4-
import { useLocale } from "@calcom/lib/hooks/useLocale";
5-
import classNames from "@calcom/ui/classNames";
6-
72
import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store";
83
import type { BorderColor } from "@calcom/features/calendars/weeklyview/types/common";
4+
import { useLocale } from "@calcom/lib/hooks/useLocale";
5+
import classNames from "@calcom/ui/classNames";
6+
import type React from "react";
97

108
type Props = {
119
showBorder: boolean;

‎packages/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import type { OutOfOfficeRenderProps } from "@calcom/features/calendars/weeklyview/types/state";
2+
import ServerTrans from "@calcom/lib/components/ServerTrans";
3+
import { useLocale } from "@calcom/lib/hooks/useLocale";
4+
import classNames from "@calcom/ui/classNames";
5+
6+
export function DefaultOutOfOfficeSlot(props: OutOfOfficeRenderProps) {
7+
const { t } = useLocale();
8+
const {
9+
fromUser,
10+
toUser,
11+
emoji = "\u{1F3DD}\uFE0F",
12+
reason,
13+
borderDashed = true,
14+
className,
15+
notes,
16+
showNotePublicly,
17+
} = props;
18+
19+
const isHoliday = !fromUser && reason;
20+
21+
if (!isHoliday && !fromUser) return null;
22+
23+
return (
24+
<div className={classNames("relative h-full pb-5", className)}>
25+
<div
26+
className={classNames(
27+
"flex h-full flex-col items-center justify-start rounded-md border bg-white px-4 py-4 font-normal dark:bg-transparent",
28+
borderDashed && "border-dashed"
29+
)}>
30+
<div className="bg-emphasis flex h-14 w-14 flex-col items-center justify-center rounded-full">
31+
<span className="m-auto text-center text-lg">{emoji}</span>
32+
</div>
33+
<div className="stack-y-2 max-h-[300px] w-full overflow-y-auto text-center">
34+
{isHoliday ? (
35+
<>
36+
<p className="mt-2 text-base font-bold">{reason}</p>
37+
<p className="text-subtle text-center text-sm">{t("holiday_no_availability")}</p>
38+
</>
39+
) : (
40+
<>
41+
<p className="mt-2 text-base font-bold">
42+
{t("ooo_user_is_ooo", { displayName: fromUser?.displayName })}
43+
</p>
44+
45+
{notes && showNotePublicly && (
46+
<p className="text-subtle mt-2 max-h-[120px] overflow-y-auto break-words px-2 text-center text-sm italic">
47+
{notes}
48+
</p>
49+
)}
50+
51+
{fromUser?.displayName && toUser?.displayName && (
52+
<p className="text-center text-sm">
53+
<ServerTrans
54+
t={t}
55+
i18nKey="ooo_slots_returning"
56+
values={{ displayName: toUser.displayName }}
57+
components={[<strong key="username">username</strong>]}
58+
/>
59+
</p>
60+
)}
61+
</>
62+
)}
63+
</div>
64+
</div>
65+
</div>
66+
);
67+
}

apps/web/modules/calendars/weeklyview/components/blocking/BlockedList.tsx renamed to packages/features/calendars/weeklyview/components/blocking/BlockedList.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { useMemo } from "react";
2-
import { shallow } from "zustand/shallow";
3-
41
import dayjs from "@calcom/dayjs";
5-
62
import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store";
3+
import { useMemo } from "react";
4+
import { shallow } from "zustand/shallow";
75
import { BlockedTimeCell } from "./BlockedTimeCell";
86

97
type Props = {

apps/web/modules/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx renamed to packages/features/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx

File renamed without changes.

0 commit comments

Comments
 (0)