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

Co-authored-by: Alex van Andel <me@alexvanandel.com>
pull/3687/head
mohammed hussam 2022-08-12 22:46:55 +05:30 committed by GitHub
parent 62c168176d
commit 935491c70f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 37 deletions

View File

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

View File

@ -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}`;
}

View File

@ -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(),