kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 07:55:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added InfiniteQuery support to Home & PlaylistGenreView

Browse Source
This commit is contained in:
KRTirtho 2021-03-31 12:11:49 +06:00
parent 4b513f91d8
commit 912f5a16ba
2 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Home.tsx
View File

@ -6,14 +6,26 @@ import { QueryCacheKeys } from "../conf";
import useSpotifyQuery from "../hooks/useSpotifyQuery"; import useSpotifyQuery from "../hooks/useSpotifyQuery";
import PlaceholderApplet from "./shared/PlaceholderApplet"; import PlaceholderApplet from "./shared/PlaceholderApplet";
import PlaylistCard from "./shared/PlaylistCard"; import PlaylistCard from "./shared/PlaylistCard";
import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery";
function Home() { 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, QueryCacheKeys.categories,
(spotifyApi) => spotifyApi.getCategories({ country: "US" }).then((categoriesReceived) => categoriesReceived.body.categories.items), (spotifyApi, { pageParam }) => spotifyApi.getCategories({ country: "US", limit: 10, offset: pageParam }).then((categoriesReceived) => categoriesReceived.body.categories),
{ initialData: [] } {
getNextPageParam(lastPage) {
if (lastPage.next) {
return lastPage.offset + lastPage.limit;
}
},
}
); );
const categories = pagedCategories?.pages
.map((page) => page.items)
.filter(Boolean)
.flat(1);
return ( return (
<ScrollArea style={`flex-grow: 1; border: none;`}> <ScrollArea style={`flex-grow: 1; border: none;`}>
<View style={`flex-direction: 'column'; align-items: 'center'; flex: 1;`}> <View style={`flex-direction: 'column'; align-items: 'center'; flex: 1;`}>
@ -21,6 +33,12 @@ function Home() {
{categories?.map((category, index) => { {categories?.map((category, index) => {
return <CategoryCard key={index + category.id} id={category.id} name={category.name} />; return <CategoryCard key={index + category.id} id={category.id} name={category.name} />;
})} })}
{hasNextPage &&
<Button
on={{ clicked: () => fetchNextPage() }}
text="Load More"
enabled={!isFetchingNextPage}
/>}
</View> </View>
</ScrollArea> </ScrollArea>
); );

31
src/components/PlaylistGenreView.tsx
View File

@ -3,7 +3,7 @@ import { Button, ScrollArea, Text, View } from "@nodegui/react-nodegui";
import React from "react"; import React from "react";
import { useLocation, useParams } from "react-router"; import { useLocation, useParams } from "react-router";
import { QueryCacheKeys } from "../conf"; import { QueryCacheKeys } from "../conf";
import useSpotifyQuery from "../hooks/useSpotifyQuery"; import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery";
import BackButton from "./BackButton"; import BackButton from "./BackButton";
import PlaceholderApplet from "./shared/PlaceholderApplet"; import PlaceholderApplet from "./shared/PlaceholderApplet";
import PlaylistCard from "./shared/PlaylistCard"; import PlaylistCard from "./shared/PlaylistCard";
@ -11,13 +11,34 @@ import PlaylistCard from "./shared/PlaylistCard";
function PlaylistGenreView() { function PlaylistGenreView() {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const location = useLocation<{ name: 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], [QueryCacheKeys.genrePlaylists, id],
(spotifyApi) => spotifyApi.getPlaylistsForCategory(id).then((playlistsRes) => playlistsRes.body.playlists.items), (spotifyApi, { pageParam }) => spotifyApi.getPlaylistsForCategory(id, { limit: 20, offset: pageParam }).then((playlistsRes) => playlistsRes.body.playlists),
{ initialData: [] } {
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; export default PlaylistGenreView;