import { useAutoAnimate } from "@formkit/auto-animate/react"; import type { GetServerSidePropsContext } from "next"; import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules"; import Shell from "@calcom/features/shell/Shell"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import { EmptyScreen, showToast } from "@calcom/ui"; import { FiClock } from "@calcom/ui/components/icon"; import { withQuery } from "@lib/QueryCell"; import { HttpError } from "@lib/core/http/error"; import SkeletonLoader from "@components/availability/SkeletonLoader"; import { ssrInit } from "@server/lib/ssr"; export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availability"]["list"]) { const { t } = useLocale(); const utils = trpc.useContext(); const meQuery = trpc.viewer.me.useQuery(); 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"); } }, }); // Adds smooth delete button - item fades and old item slides into place const [animationParentRef] = useAutoAnimate(); return ( <> {schedules.length === 0 ? (
} />
) : (
)} ); } const WithQuery = withQuery(trpc.viewer.availability.list); export default function AvailabilityPage() { const { t } = useLocale(); return (
}> } customLoader={} />
); } export const getServerSideProps = async (context: GetServerSidePropsContext) => { const ssr = await ssrInit(context); return { props: { trpcState: ssr.dehydrate(), }, }; };