66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
|
|
import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
|
|
import { trpc } from "@scandic-hotels/trpc/client"
|
|
|
|
import Grids from "@/components/TempDesignSystem/Grids"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import ListContainer from "../ListContainer"
|
|
import OldStayCard from "../OldStayCard"
|
|
|
|
import type {
|
|
UpcomingStaysClientProps,
|
|
UpcomingStaysNonNullResponseObject,
|
|
} from "@/types/components/myPages/stays/upcoming"
|
|
|
|
export default function ClientUpcomingStays({
|
|
initialUpcomingStays,
|
|
}: UpcomingStaysClientProps) {
|
|
const lang = useLang()
|
|
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
|
|
trpc.user.stays.upcoming.useInfiniteQuery(
|
|
{
|
|
limit: 6,
|
|
lang,
|
|
},
|
|
{
|
|
getNextPageParam: (lastPage) => {
|
|
return lastPage?.nextCursor
|
|
},
|
|
initialData: {
|
|
pageParams: [undefined, 1],
|
|
pages: [initialUpcomingStays],
|
|
},
|
|
}
|
|
)
|
|
|
|
if (isLoading) {
|
|
return <LoadingSpinner />
|
|
}
|
|
|
|
function loadMoreData() {
|
|
if (hasNextPage) {
|
|
fetchNextPage()
|
|
}
|
|
}
|
|
|
|
const stays = data.pages
|
|
.filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
|
|
.flatMap((page) => page.data)
|
|
|
|
return stays.length ? (
|
|
<ListContainer>
|
|
<Grids.Stackable>
|
|
{stays.map((stay) => (
|
|
<OldStayCard key={stay.attributes.confirmationNumber} stay={stay} />
|
|
))}
|
|
</Grids.Stackable>
|
|
{hasNextPage ? (
|
|
<ShowMoreButton isPending={isFetching} loadMoreData={loadMoreData} />
|
|
) : null}
|
|
</ListContainer>
|
|
) : null
|
|
}
|