import { useState } from "react"; import dayjs from "@calcom/dayjs"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; import Shell from "@calcom/ui/Shell"; import { SkeletonText } from "@calcom/ui/v2/core/skeleton"; type User = inferQueryOutput<"viewer.me">; export interface IBusySlot { start: string; end: string; title?: string; source?: string | null; } const AvailabilityView = ({ user }: { user: User }) => { const { t } = useLocale(); const [selectedDate, setSelectedDate] = useState(dayjs()); const { data, isLoading } = trpc.useQuery( [ "viewer.availability.user", { username: user.username!, dateFrom: selectedDate.startOf("day").utc().format(), dateTo: selectedDate.endOf("day").utc().format(), withSource: true, }, ], { enabled: !!user.username, } ); return (
{t("overview_of_day")}{" "} { if (e.target.value) setSelectedDate(dayjs(e.target.value)); }} /> {t("hover_over_bold_times_tip")}
{t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
{isLoading ? ( <> ) : data && data.busy.length > 0 ? ( data.busy .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})`}}
)) ) : (
{t("calendar_no_busy_slots")}
)}
{t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
); }; export default function Troubleshoot() { const { data, isLoading } = trpc.useQuery(["viewer.me"]); const { t } = useLocale(); return (
{!isLoading && data && }
); } 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}`; }