import { useEffect, useState } from "react"; import dayjs, { 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 [loading, setLoading] = useState(true); const [availability, setAvailability] = useState<{ end: string; start: string; title?: string }[]>([]); const [selectedDate, setSelectedDate] = useState(dayjs()); 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}`; } useEffect(() => { const fetchAvailability = (date: Dayjs) => { const dateFrom = date.startOf("day").utc().format(); const dateTo = date.endOf("day").utc().format(); setLoading(true); fetch(`/api/availability/${user.username}?dateFrom=${dateFrom}&dateTo=${dateTo}`) .then((res) => { return res.json(); }) .then((availableIntervals) => { setAvailability(availableIntervals.busy); }) .catch((e) => { console.error(e); }) .finally(() => { setLoading(false); }); }; fetchAvailability(selectedDate); }, [user.username, selectedDate]); 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)}
{loading ? ( ) : availability.length > 0 ? ( availability.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 (
} />
); }