65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { trpc } from "@/lib/trpc/client"
|
|
|
|
import LoadingSpinner from "@/components/LoadingSpinner"
|
|
import Grids from "@/components/TempDesignSystem/Grids"
|
|
|
|
import Header from "../../Header"
|
|
import Container from "../Container"
|
|
import ListContainer from "../ListContainer"
|
|
import ShowMoreButton from "../ShowMoreButton"
|
|
import StayCard from "../StayCard"
|
|
import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
|
|
|
|
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
|
|
|
|
export default function UpcomingStays({
|
|
lang,
|
|
title,
|
|
subtitle,
|
|
link,
|
|
}: AccountPageComponentProps) {
|
|
const { data, hasNextPage, isFetching, fetchNextPage, isLoading } =
|
|
trpc.user.stays.upcoming.useInfiniteQuery(
|
|
{ limit: 6 },
|
|
{
|
|
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
|
}
|
|
)
|
|
|
|
function loadMoreData() {
|
|
if (hasNextPage) {
|
|
fetchNextPage()
|
|
}
|
|
}
|
|
|
|
const stays = data?.pages.flatMap((page) => page.data) ?? []
|
|
|
|
return (
|
|
<Container>
|
|
<Header title={title} subtitle={subtitle} link={link} />
|
|
{isLoading ? (
|
|
<LoadingSpinner />
|
|
) : stays.length ? (
|
|
<ListContainer>
|
|
<Grids.Stackable>
|
|
{stays.map((stay) => (
|
|
<StayCard
|
|
key={stay.attributes.confirmationNumber}
|
|
lang={lang}
|
|
stay={stay}
|
|
/>
|
|
))}
|
|
</Grids.Stackable>
|
|
{hasNextPage ? (
|
|
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
|
|
) : null}
|
|
</ListContainer>
|
|
) : (
|
|
<EmptyUpcomingStaysBlock />
|
|
)}
|
|
</Container>
|
|
)
|
|
}
|