diff --git a/apps/web/pages/api/availability/[user].ts b/apps/web/pages/api/availability/[user].ts index 1074b7b8d1..7fd6fd95d1 100644 --- a/apps/web/pages/api/availability/[user].ts +++ b/apps/web/pages/api/availability/[user].ts @@ -12,6 +12,10 @@ const availabilitySchema = z.object({ eventTypeId: stringOrNumber.optional(), }); +/** + * @deprecated Use TRCP's viewer.availability.user + */ + async function handler(req: NextApiRequest) { const { user: username, eventTypeId, dateTo, dateFrom } = availabilitySchema.parse(req.query); return getUserAvailability({ diff --git a/apps/web/pages/availability/troubleshoot.tsx b/apps/web/pages/availability/troubleshoot.tsx index f1c1162dad..633d5e5d09 100644 --- a/apps/web/pages/availability/troubleshoot.tsx +++ b/apps/web/pages/availability/troubleshoot.tsx @@ -1,6 +1,6 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; -import dayjs, { Dayjs } from "@calcom/dayjs"; +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"; @@ -13,40 +13,21 @@ 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]); + 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 (