Added InfiniteQuery support to Home & PlaylistGenreView

KRTirtho · Mar 31, 2021 · 912f5a1 · 912f5a1
1 parent 4b513f9
commit 912f5a1
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -6,21 +6,39 @@ 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<SpotifyApi.CategoryObject[]>(
+  const { data: pagedCategories, isError, refetch, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage } = useSpotifyInfiniteQuery<SpotifyApi.PagingObject<SpotifyApi.CategoryObject>>(
     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 (
     <ScrollArea style={`flex-grow: 1; border: none;`}>
       <View style={`flex-direction: 'column'; align-items: 'center'; flex: 1;`}>
         <PlaceholderApplet error={isError} message="Failed to query genres" reload={refetch} helps loading={isLoading} />
         {categories?.map((category, index) => {
           return <CategoryCard key={index + category.id} id={category.id} name={category.name} />;
         })}
+        {hasNextPage &&
+          <Button
+            on={{ clicked: () => fetchNextPage() }}
+            text="Load More"
+            enabled={!isFetchingNextPage}
+          />}
       </View>
     </ScrollArea>
   );

diff --git a/src/components/PlaylistGenreView.tsx b/src/components/PlaylistGenreView.tsx
@@ -3,21 +3,42 @@ import { Button, ScrollArea, Text, View } from "@nodegui/react-nodegui";
 import React from "react";
 import { useLocation, useParams } from "react-router";
 import { QueryCacheKeys } from "../conf";
-import useSpotifyQuery from "../hooks/useSpotifyQuery";
+import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery";
 import BackButton from "./BackButton";
 import PlaceholderApplet from "./shared/PlaceholderApplet";
 import PlaylistCard from "./shared/PlaylistCard";
 
 function PlaylistGenreView() {
   const { id } = useParams<{ id: string }>();
   const location = useLocation<{ name: string }>();
-  const { data: playlists, isError, isLoading, refetch } = useSpotifyQuery<SpotifyApi.PlaylistObjectSimplified[]>(
+  const { data: pagedPlaylists, isError, isLoading, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = useSpotifyInfiniteQuery<SpotifyApi.PagingObject<SpotifyApi.PlaylistObjectSimplified>>(
     [QueryCacheKeys.genrePlaylists, id],
-    (spotifyApi) => spotifyApi.getPlaylistsForCategory(id).then((playlistsRes) => playlistsRes.body.playlists.items),
-    { initialData: [] }
+    (spotifyApi, { pageParam }) => spotifyApi.getPlaylistsForCategory(id, { limit: 20, offset: pageParam }).then((playlistsRes) => playlistsRes.body.playlists),
+    {
+      getNextPageParam(lastPage) {
+        if (lastPage.next) {
+          return lastPage.offset + lastPage.limit;
+        }
+      },
+    }
   );
 
-  return <GenreView isError={isError} isLoading={isLoading} refetch={refetch} heading={location.state.name} playlists={playlists ?? []} />;
+  const playlists = pagedPlaylists?.pages
+    .map((page) => page.items)
+    .filter(Boolean)
+    .flat(1);
+
+  return (
+    <GenreView
+      isError={isError}
+      isLoading={isLoading || isFetchingNextPage}
+      refetch={refetch}
+      heading={location.state.name}
+      playlists={playlists ?? []}
+      loadMore={hasNextPage ? () => fetchNextPage() : undefined}
+      isLoadable={!isFetchingNextPage}
+    />
+  );
 }
 
 export default PlaylistGenreView;