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 { QueryCell } from "@lib/QueryCell"; import Loader from "@components/Loader"; type User = inferQueryOutput<"viewer.me">; 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(), }, ], { 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.map((slot) => (
{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})`}
)) ) : (
{t("calendar_no_busy_slots")}
)}
{t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
); }; export default function Troubleshoot() { const query = trpc.useQuery(["viewer.me"]); const { t } = useLocale(); return (
} />
); } 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}`; }