import dayjs from "@calcom/dayjs"; import Shell from "@calcom/features/shell/Shell"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import { SkeletonText } from "@calcom/ui"; import useRouterQuery from "@lib/hooks/useRouterQuery"; import PageWrapper from "@components/PageWrapper"; 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 { t } = useLocale(); const { date, setQuery: setSelectedDate } = useRouterQuery("date"); const selectedDate = dayjs(date); const formattedSelectedDate = selectedDate.format("YYYY-MM-DD"); const { data, isLoading } = trpc.viewer.availability.user.useQuery( { 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 (
{t("overview_of_day")}{" "} { if (e.target.value) setSelectedDate(e.target.value); }} /> {t("hover_over_bold_times_tip")}
{t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
{(() => { if (isLoading) return ( <> ); if (data && (data.busy.length > 0 || overrides.length > 0)) return [...data.busy, ...overrides] .sort((a: IBusySlot, b: IBusySlot) => (a.start > b.start ? -1 : 1)) .map((slot: IBusySlot) => (
{t("calendar_shows_busy_between")}{" "} {dayjs(slot.start).format("HH:mm")} {" "} {t("and")}{" "} {dayjs(slot.end).format("HH:mm")} {" "} {t("on")} {dayjs(slot.start).format("D")}{" "} {t(dayjs(slot.start).format("MMMM").toLowerCase())} {dayjs(slot.start).format("YYYY")} {slot.title && ` - (${slot.title})`} {slot.source && {` - (source: ${slot.source})`}}
)); return (
{t("calendar_no_busy_slots")}
); })()}
{t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
); }; export default function Troubleshoot() { const { data, isLoading } = trpc.viewer.me.useQuery(); const { t } = useLocale(); return (
{!isLoading && data && }
); } Troubleshoot.PageWrapper = PageWrapper; function convertMinsToHrsMins(mins: number) { const h = Math.floor(mins / 60); const m = mins % 60; const hs = h < 10 ? "0" + h : h; const ms = m < 10 ? "0" + m : m; return `${hs}:${ms}`; }