import { CalendarIcon } from "@heroicons/react/outline"; import { useRouter } from "next/router"; import { Fragment } from "react"; import { Alert } from "@calcom/ui/Alert"; import Button from "@calcom/ui/Button"; import { useInViewObserver } from "@lib/hooks/useInViewObserver"; import { useLocale } from "@lib/hooks/useLocale"; import { inferQueryInput, trpc } from "@lib/trpc"; import BookingsShell from "@components/BookingsShell"; import EmptyScreen from "@components/EmptyScreen"; import Loader from "@components/Loader"; import Shell from "@components/Shell"; import BookingListItem from "@components/booking/BookingListItem"; type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"]; export default function Bookings() { const router = useRouter(); const status = router.query?.status as BookingListingStatus; const { t } = useLocale(); const descriptionByStatus: Record = { upcoming: t("upcoming_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; 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 && ( )}
); }