migrate api/availability/[user] to viewer.availability.user in trpc (#3591)

Co-authored-by: Alex van Andel <me@alexvanandel.com>

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({

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 (
     <div className="max-w-xl overflow-hidden rounded-sm bg-white shadow">
@@ -67,10 +48,10 @@ const AvailabilityView = ({ user }: { user: User }) => {
               {t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
             </div>
           </div>
-          {loading ? (
+          {isLoading ? (
             <Loader />
-          ) : availability.length > 0 ? (
-            availability.map((slot) => (
+          ) : data && data.busy.length > 0 ? (
+            data.busy.map((slot) => (
               <div key={slot.start} className="overflow-hidden rounded-sm bg-neutral-100">
                 <div className="px-4 py-5 text-black sm:p-6">
                   {t("calendar_shows_busy_between")}{" "}
@@ -115,3 +96,11 @@ export default function Troubleshoot() {
     </div>
   );
 }
+
+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}`;
+}

packages/trpc/server/routers/viewer/availability.tsx

@@ -1,7 +1,9 @@
 import { Prisma } from "@prisma/client";
 import { z } from "zod";
 
+import { getUserAvailability } from "@calcom/core/getUserAvailability";
 import { getAvailabilityFromSchedule } from "@calcom/lib/availability";
+import { stringOrNumber } from "@calcom/prisma/zod-utils";
 import { Schedule } from "@calcom/types/schedule";
 
 import { TRPCError } from "@trpc/server";
@@ -93,6 +95,23 @@ export const availabilityRouter = createProtectedRouter()
       };
     },
   })
+  .query("user", {
+    input: z.object({
+      username: z.string(),
+      dateFrom: z.string(),
+      dateTo: z.string(),
+      eventTypeId: stringOrNumber.optional(),
+    }),
+    async resolve({ input }) {
+      const { username, eventTypeId, dateTo, dateFrom } = input;
+      return getUserAvailability({
+        username,
+        dateFrom,
+        dateTo,
+        eventTypeId,
+      });
+    },
+  })
   .mutation("schedule.create", {
     input: z.object({
       name: z.string(),