86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import dayjs from "@calcom/dayjs";
|
|
import { Calendar } from "@calcom/features/calendars/weeklyview";
|
|
import Shell from "@calcom/features/shell/Shell";
|
|
import { yyyymmdd } from "@calcom/lib/date-fns";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { RouterOutputs, trpc } from "@calcom/trpc/react";
|
|
import { SkeletonText } from "@calcom/ui";
|
|
|
|
import useRouterQuery from "@lib/hooks/useRouterQuery";
|
|
|
|
type User = RouterOutputs["viewer"]["me"];
|
|
|
|
export interface IBusySlot {
|
|
start: string | Date;
|
|
end: string | Date;
|
|
title?: string;
|
|
source?: string | null;
|
|
}
|
|
|
|
const AvailabilityView = ({ user }: { user: User }) => {
|
|
const { date, setQuery: setSelectedDate } = useRouterQuery("date");
|
|
const selectedDate = dayjs(date);
|
|
const formattedSelectedDate = selectedDate.format("YYYY-MM-DD");
|
|
|
|
const { data } = trpc.viewer.availability.user.useQuery(
|
|
{
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
username: user.username!,
|
|
dateFrom: selectedDate.startOf("day").utc().format(),
|
|
dateTo: selectedDate.endOf("day").utc().format(),
|
|
withSource: true,
|
|
},
|
|
{
|
|
enabled: !!user.username,
|
|
}
|
|
);
|
|
|
|
const overrides =
|
|
data?.dateOverrides.reduce((acc, override) => {
|
|
if (
|
|
formattedSelectedDate !== dayjs(override.start).format("YYYY-MM-DD") &&
|
|
formattedSelectedDate !== dayjs(override.end).format("YYYY-MM-DD")
|
|
)
|
|
return acc;
|
|
acc.push({ ...override, source: "Date override" });
|
|
return acc;
|
|
}, [] as IBusySlot[]) || [];
|
|
|
|
return (
|
|
<div className="max-w-xl overflow-hidden rounded-md border border-gray-200 bg-white">
|
|
<div className="px-4">
|
|
<Calendar
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
events={[...(data?.busy || []), ...overrides]
|
|
.sort((a: IBusySlot, b: IBusySlot) => (a.start > b.start ? -1 : 1))
|
|
.map((slot) => ({
|
|
// TODO: Modify the Calendar view to be better at displaying blocks.
|
|
id: undefined,
|
|
title:
|
|
(slot.title ? `(${slot.title}) - ` : "") + (slot.source ? `(source: ${slot.source})` : ""),
|
|
start: new Date(slot.start),
|
|
end: new Date(slot.end),
|
|
}))}
|
|
onDateChange={(e) => setSelectedDate(yyyymmdd(e))}
|
|
startDate={selectedDate.startOf("day").toDate()}
|
|
endDate={selectedDate.endOf("day").toDate()}
|
|
view="day"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default function Troubleshoot() {
|
|
const { data, isLoading } = trpc.viewer.me.useQuery();
|
|
const { t } = useLocale();
|
|
return (
|
|
<div>
|
|
<Shell heading={t("troubleshoot")} subtitle={t("troubleshoot_description")}>
|
|
{!isLoading && data && <AvailabilityView user={data} />}
|
|
</Shell>
|
|
</div>
|
|
);
|
|
}
|