53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
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 EmptyPreviousStaysBlock from "./EmptyPreviousStays"
|
|
|
|
import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
|
|
import type { Page } from "@/types/components/myPages/stays/page"
|
|
|
|
export default function PreviousStays({
|
|
lang,
|
|
title,
|
|
subtitle,
|
|
link,
|
|
}: AccountPageComponentProps) {
|
|
const { data, isFetching, fetchNextPage, hasNextPage } =
|
|
trpc.user.stays.previous.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>
|
|
) : (
|
|
<EmptyPreviousStaysBlock />
|
|
)}
|
|
</Container>
|
|
)
|
|
}
|