import { CalendarIcon } from "@heroicons/react/outline"; import { useRouter } from "next/router"; import { Fragment } from "react"; import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Alert } from "@calcom/ui/Alert"; import Button from "@calcom/ui/Button"; import { useInViewObserver } from "@lib/hooks/useInViewObserver"; import { inferQueryInput, inferQueryOutput, trpc } from "@lib/trpc"; import BookingsShell from "@components/BookingsShell"; import EmptyScreen from "@components/EmptyScreen"; import Shell from "@components/Shell"; import BookingListItem from "@components/booking/BookingListItem"; import SkeletonLoader from "@components/booking/SkeletonLoader"; type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"]; type BookingOutput = inferQueryOutput<"viewer.bookings">["bookings"][0]; type BookingPage = inferQueryOutput<"viewer.bookings">; export default function Bookings() { const router = useRouter(); const status = router.query?.status as BookingListingStatus; const { t } = useLocale(); const descriptionByStatus: Record = { upcoming: t("upcoming_bookings"), recurring: t("recurring_bookings"), past: t("past_bookings"), cancelled: t("cancelled_bookings"), }; const query = trpc.useInfiniteQuery(["viewer.bookings", { status, limit: 10 }], { // first render has status `undefined` enabled: !!status, getNextPageParam: (lastPage) => lastPage.nextCursor, }); const buttonInView = useInViewObserver(() => { if (!query.isFetching && query.hasNextPage && query.status === "success") { query.fetchNextPage(); } }); const isEmpty = !query.data?.pages[0]?.bookings.length; // Get the recurrentCount value from the grouped recurring bookings // created with the same recurringEventId const defineRecurrentCount = (booking: BookingOutput, page: BookingPage) => { let recurringCount = undefined; if (booking.recurringEventId !== null) { recurringCount = page.groupedRecurringBookings.filter( (group) => group.recurringEventId === booking.recurringEventId )[0]._count; // If found, only one object exists, just assing the needed _count value } return { recurringCount }; }; return ( }>
{query.status === "error" && ( )} {(query.status === "loading" || query.status === "idle") && } {query.status === "success" && !isEmpty && ( <>
{query.data.pages.map((page, index) => ( {page.bookings.map((booking) => ( ))} ))}
)} {query.status === "success" && isEmpty && ( )}
); }