64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { trpc } from "@/lib/trpc/client"
|
|
|
|
import LoadingSpinner from "@/components/LoadingSpinner"
|
|
import Grids from "@/components/TempDesignSystem/Grids"
|
|
|
|
import ListContainer from "../ListContainer"
|
|
import ShowMoreButton from "../ShowMoreButton"
|
|
import StayCard from "../StayCard"
|
|
|
|
import type {
|
|
UpcomingStaysClientProps,
|
|
UpcomingStaysNonNullResponseObject,
|
|
} from "@/types/components/myPages/stays/upcoming"
|
|
|
|
export default function ClientUpcomingStays({
|
|
initialUpcomingStays,
|
|
}: UpcomingStaysClientProps) {
|
|
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
|
|
trpc.user.stays.upcoming.useInfiniteQuery(
|
|
{
|
|
limit: 6,
|
|
},
|
|
{
|
|
getNextPageParam: (lastPage) => {
|
|
return lastPage?.nextCursor
|
|
},
|
|
initialData: {
|
|
pageParams: [undefined, 1],
|
|
pages: [initialUpcomingStays],
|
|
},
|
|
}
|
|
)
|
|
|
|
function loadMoreData() {
|
|
if (hasNextPage) {
|
|
fetchNextPage()
|
|
}
|
|
}
|
|
|
|
// TS having a hard time with the filtered type.
|
|
// This is only temporary as we will not return null
|
|
// later on when we handle errors appropriately.
|
|
const filteredStays = (data?.pages.filter((page) => page && page.data) ??
|
|
[]) as unknown as UpcomingStaysNonNullResponseObject[]
|
|
const stays = filteredStays.flatMap((page) => page.data)
|
|
|
|
return isLoading ? (
|
|
<LoadingSpinner />
|
|
) : stays.length ? (
|
|
<ListContainer>
|
|
<Grids.Stackable>
|
|
{stays.map((stay) => (
|
|
<StayCard key={stay.attributes.confirmationNumber} stay={stay} />
|
|
))}
|
|
</Grids.Stackable>
|
|
{hasNextPage ? (
|
|
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
|
|
) : null}
|
|
</ListContainer>
|
|
) : null
|
|
}
|