import autoAnimate from "@formkit/auto-animate"; import { useRef, useEffect } from "react"; import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; import { Icon } from "@calcom/ui/Icon"; import Shell from "@calcom/ui/Shell"; import { EmptyScreen, showToast } from "@calcom/ui/v2"; import { withQuery } from "@lib/QueryCell"; import { HttpError } from "@lib/core/http/error"; import SkeletonLoader from "@components/availability/SkeletonLoader"; export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availability.list">) { const { t } = useLocale(); const utils = trpc.useContext(); const animationParentRef = useRef(null); const meQuery = trpc.useQuery(["viewer.me"]); const deleteMutation = trpc.useMutation("viewer.availability.schedule.delete", { onSuccess: async () => { await utils.invalidateQueries(["viewer.availability.list"]); showToast(t("schedule_deleted_successfully"), "success"); }, onError: (err) => { if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } }, }); // Adds smooth delete button - item fades and old item slides into place useEffect(() => { animationParentRef.current && autoAnimate(animationParentRef.current); }, [animationParentRef]); return ( <> {schedules.length === 0 ? (
} />
) : (
)} ); } const WithQuery = withQuery(["viewer.availability.list"]); export default function AvailabilityPage() { const { t } = useLocale(); return (
}> } customLoader={} />
); }