Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 2x 2x 2x 9x 18x 1x 14x | import { IGame } from "../pages/api/lib/interfaces/IGame"
import GameCard from "./GameCard"
import { forwardRef, Ref } from "react"
import { InfiniteData } from "@tanstack/query-core"
interface IGameListProps {
gameList: InfiniteData<IGame[]> | undefined
inputSearchState: string
loadMoreBtnRef: Ref<HTMLButtonElement>
fetchNextPage: ({ pageParam }: { pageParam: number }) => void
hasNextPage: boolean | undefined
isFetchingNextPage: boolean
classes: string
}
const GameList = forwardRef(
(
{
gameList,
inputSearchState,
loadMoreBtnRef,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
classes,
}: IGameListProps,
ref: Ref<HTMLDivElement>
) => {
return (
<div ref={ref} className={classes}>
{gameList?.pages?.map((group: any) =>
group.data?.map((game: IGame) => (
<GameCard
key={game.id}
game={game}
searchString={inputSearchState}
/>
))
)}
<button
ref={loadMoreBtnRef}
onClick={() => fetchNextPage({ pageParam: 10 })}
disabled={!hasNextPage || isFetchingNextPage}
>
{isFetchingNextPage
? "Loading more..."
: hasNextPage
? "Load More"
: null}
</button>
</div>
)
}
)
export default GameList
|