55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { Lang } from "@/constants/languages"
|
|
import { _ } from "@/lib/translation"
|
|
import { trpc } from "@/lib/trpc/client"
|
|
|
|
import Container from "../Container"
|
|
import Header from "../Header"
|
|
import ListContainer from "../ListContainer"
|
|
import ShowMoreButton from "../ShowMoreButton"
|
|
import StayList from "../StayList"
|
|
import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
|
|
|
|
import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
|
|
import type { Page } from "@/types/components/myPages/myStays/page"
|
|
|
|
export default function UpcomingStays({
|
|
lang,
|
|
title,
|
|
subtitle,
|
|
link,
|
|
}: AccountPageComponentProps) {
|
|
const { data, hasNextPage, isFetching, fetchNextPage } =
|
|
trpc.user.stays.upcoming.useInfiniteQuery(
|
|
{},
|
|
{
|
|
getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
|
|
}
|
|
)
|
|
|
|
function loadMoreData() {
|
|
fetchNextPage()
|
|
}
|
|
|
|
return (
|
|
<Container>
|
|
<Header title={title} subtitle={subtitle} link={link} />
|
|
|
|
{data?.pages.length ? (
|
|
<ListContainer>
|
|
<StayList
|
|
lang={lang}
|
|
stays={data?.pages.flatMap((page) => page.data) ?? []}
|
|
/>
|
|
{hasNextPage ? (
|
|
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
|
|
) : null}
|
|
</ListContainer>
|
|
) : (
|
|
<EmptyUpcomingStaysBlock />
|
|
)}
|
|
</Container>
|
|
)
|
|
}
|