diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 539eedb7..1e19d276 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -6,14 +6,26 @@ import { QueryCacheKeys } from "../conf"; import useSpotifyQuery from "../hooks/useSpotifyQuery"; import PlaceholderApplet from "./shared/PlaceholderApplet"; import PlaylistCard from "./shared/PlaylistCard"; +import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery"; function Home() { - const { data: categories, isError, refetch, isLoading } = useSpotifyQuery( + const { data: pagedCategories, isError, refetch, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage } = useSpotifyInfiniteQuery>( QueryCacheKeys.categories, - (spotifyApi) => spotifyApi.getCategories({ country: "US" }).then((categoriesReceived) => categoriesReceived.body.categories.items), - { initialData: [] } + (spotifyApi, { pageParam }) => spotifyApi.getCategories({ country: "US", limit: 10, offset: pageParam }).then((categoriesReceived) => categoriesReceived.body.categories), + { + getNextPageParam(lastPage) { + if (lastPage.next) { + return lastPage.offset + lastPage.limit; + } + }, + } ); + const categories = pagedCategories?.pages + .map((page) => page.items) + .filter(Boolean) + .flat(1); + return ( @@ -21,6 +33,12 @@ function Home() { {categories?.map((category, index) => { return ; })} + {hasNextPage && +