import { useAutoAnimate } from "@formkit/auto-animate/react"; import { useRouter } from "next/router"; import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules"; import Shell from "@calcom/features/shell/Shell"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { HttpError } from "@calcom/lib/http-error"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import { EmptyScreen, showToast } from "@calcom/ui"; import { Clock } from "@calcom/ui/components/icon"; import { withQuery } from "@lib/QueryCell"; import PageWrapper from "@components/PageWrapper"; import SkeletonLoader from "@components/availability/SkeletonLoader"; export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availability"]["list"]) { const { t } = useLocale(); const utils = trpc.useContext(); const meQuery = trpc.viewer.me.useQuery(); const router = useRouter(); const deleteMutation = trpc.viewer.availability.schedule.delete.useMutation({ onMutate: async ({ scheduleId }) => { await utils.viewer.availability.list.cancel(); const previousValue = utils.viewer.availability.list.getData(); if (previousValue) { const filteredValue = previousValue.schedules.filter(({ id }) => id !== scheduleId); utils.viewer.availability.list.setData(undefined, { ...previousValue, schedules: filteredValue }); } return { previousValue }; }, onError: (err, variables, context) => { if (context?.previousValue) { utils.viewer.availability.list.setData(undefined, context.previousValue); } if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } }, onSettled: () => { utils.viewer.availability.list.invalidate(); }, onSuccess: () => { showToast(t("schedule_deleted_successfully"), "success"); }, }); const updateMutation = trpc.viewer.availability.schedule.update.useMutation({ onSuccess: async ({ schedule }) => { await utils.viewer.availability.list.invalidate(); showToast( t("availability_updated_successfully", { scheduleName: schedule.name, }), "success" ); }, onError: (err) => { if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } }, }); const duplicateMutation = trpc.viewer.availability.schedule.duplicate.useMutation({ onSuccess: async ({ schedule }) => { await router.push(`/availability/${schedule.id}`); showToast(t("schedule_created_successfully", { scheduleName: schedule.name }), "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 const [animationParentRef] = useAutoAnimate(); return ( <> {schedules.length === 0 ? (
} />
) : (
)} ); } // eslint-disable-next-line @typescript-eslint/no-explicit-any const WithQuery = withQuery(trpc.viewer.availability.list as any); export default function AvailabilityPage() { const { t } = useLocale(); return (
}> } customLoader={} />
); } AvailabilityPage.PageWrapper = PageWrapper;