mirror of https://github.com/gabehf/Koito.git
Compare commits
No commits in common. 'fed2c5b95684964481539216fa7aa2ed8f830dba' and 'c77481fd5950f6102ece3d131f99083fdaaa2756' have entirely different histories.
fed2c5b956
...
c77481fd59
@ -1 +0,0 @@
|
|||||||
test_config_dir
|
|
||||||
@ -1,63 +1,42 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query"
|
||||||
import ArtistLinks from "./ArtistLinks";
|
import ArtistLinks from "./ArtistLinks"
|
||||||
import {
|
import { getTopAlbums, getTopTracks, imageUrl, type getItemsArgs } from "api/api"
|
||||||
getTopAlbums,
|
import { Link } from "react-router"
|
||||||
getTopTracks,
|
import TopListSkeleton from "./skeletons/TopListSkeleton"
|
||||||
imageUrl,
|
import TopItemList from "./TopItemList"
|
||||||
type getItemsArgs,
|
|
||||||
} from "api/api";
|
|
||||||
import { Link } from "react-router";
|
|
||||||
import TopListSkeleton from "./skeletons/TopListSkeleton";
|
|
||||||
import TopItemList from "./TopItemList";
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
limit: number;
|
limit: number,
|
||||||
period: string;
|
period: string,
|
||||||
artistId?: Number;
|
artistId?: Number
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function TopAlbums(props: Props) {
|
export default function TopAlbums (props: Props) {
|
||||||
const { isPending, isError, data, error } = useQuery({
|
|
||||||
queryKey: [
|
|
||||||
"top-albums",
|
|
||||||
{
|
|
||||||
limit: props.limit,
|
|
||||||
period: props.period,
|
|
||||||
artistId: props.artistId,
|
|
||||||
page: 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (isPending) {
|
const { isPending, isError, data, error } = useQuery({
|
||||||
return (
|
queryKey: ['top-albums', {limit: props.limit, period: props.period, artistId: props.artistId, page: 0 }],
|
||||||
<div className="w-[300px]">
|
queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
|
||||||
<h2>Top Albums</h2>
|
})
|
||||||
<p>Loading...</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (isError) {
|
|
||||||
return <p className="error">Error:{error.message}</p>;
|
|
||||||
}
|
|
||||||
if (!data.items) return;
|
|
||||||
|
|
||||||
return (
|
if (isPending) {
|
||||||
<div>
|
return (
|
||||||
<h2 className="hover:underline">
|
<div className="w-[300px]">
|
||||||
<Link
|
<h2>Top Albums</h2>
|
||||||
to={`/chart/top-albums?period=${props.period}${
|
<p>Loading...</p>
|
||||||
props.artistId ? `&artist_id=${props.artistId}` : ""
|
</div>
|
||||||
}`}
|
)
|
||||||
>
|
}
|
||||||
Top Albums
|
if (isError) {
|
||||||
</Link>
|
return <p className="error">Error:{error.message}</p>
|
||||||
</h2>
|
}
|
||||||
<div className="max-w-[300px]">
|
|
||||||
<TopItemList type="album" data={data} />
|
return (
|
||||||
{data.items.length < 1 ? "Nothing to show" : ""}
|
<div>
|
||||||
</div>
|
<h2 className="hover:underline"><Link to={`/chart/top-albums?period=${props.period}${props.artistId ? `&artist_id=${props.artistId}` : ''}`}>Top Albums</Link></h2>
|
||||||
</div>
|
<div className="max-w-[300px]">
|
||||||
);
|
<TopItemList type="album" data={data} />
|
||||||
}
|
{data.items.length < 1 ? 'Nothing to show' : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,50 +1,43 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query"
|
||||||
import ArtistLinks from "./ArtistLinks";
|
import ArtistLinks from "./ArtistLinks"
|
||||||
import { getTopArtists, imageUrl, type getItemsArgs } from "api/api";
|
import { getTopArtists, imageUrl, type getItemsArgs } from "api/api"
|
||||||
import { Link } from "react-router";
|
import { Link } from "react-router"
|
||||||
import TopListSkeleton from "./skeletons/TopListSkeleton";
|
import TopListSkeleton from "./skeletons/TopListSkeleton"
|
||||||
import TopItemList from "./TopItemList";
|
import TopItemList from "./TopItemList"
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
limit: number;
|
limit: number,
|
||||||
period: string;
|
period: string,
|
||||||
artistId?: Number;
|
artistId?: Number
|
||||||
albumId?: Number;
|
albumId?: Number
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function TopArtists(props: Props) {
|
export default function TopArtists (props: Props) {
|
||||||
const { isPending, isError, data, error } = useQuery({
|
|
||||||
queryKey: [
|
|
||||||
"top-artists",
|
|
||||||
{ limit: props.limit, period: props.period, page: 0 },
|
|
||||||
],
|
|
||||||
queryFn: ({ queryKey }) => getTopArtists(queryKey[1] as getItemsArgs),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (isPending) {
|
const { isPending, isError, data, error } = useQuery({
|
||||||
return (
|
queryKey: ['top-artists', {limit: props.limit, period: props.period, page: 0 }],
|
||||||
<div className="w-[300px]">
|
queryFn: ({ queryKey }) => getTopArtists(queryKey[1] as getItemsArgs),
|
||||||
<h2>Top Artists</h2>
|
})
|
||||||
<p>Loading...</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (isError) {
|
|
||||||
return <p className="error">Error:{error.message}</p>;
|
|
||||||
}
|
|
||||||
if (!data.items) return;
|
|
||||||
|
|
||||||
return (
|
if (isPending) {
|
||||||
<div>
|
return (
|
||||||
<h2 className="hover:underline">
|
<div className="w-[300px]">
|
||||||
<Link to={`/chart/top-artists?period=${props.period}`}>
|
<h2>Top Artists</h2>
|
||||||
Top Artists
|
<p>Loading...</p>
|
||||||
</Link>
|
</div>
|
||||||
</h2>
|
)
|
||||||
<div className="max-w-[300px]">
|
}
|
||||||
<TopItemList type="artist" data={data} />
|
if (isError) {
|
||||||
{data.items.length < 1 ? "Nothing to show" : ""}
|
return <p className="error">Error:{error.message}</p>
|
||||||
</div>
|
}
|
||||||
</div>
|
|
||||||
);
|
return (
|
||||||
}
|
<div>
|
||||||
|
<h2 className="hover:underline"><Link to={`/chart/top-artists?period=${props.period}`}>Top Artists</Link></h2>
|
||||||
|
<div className="max-w-[300px]">
|
||||||
|
<TopItemList type="artist" data={data} />
|
||||||
|
{data.items.length < 1 ? 'Nothing to show' : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,63 +1,50 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query"
|
||||||
import ArtistLinks from "./ArtistLinks";
|
import ArtistLinks from "./ArtistLinks"
|
||||||
import { getTopTracks, imageUrl, type getItemsArgs } from "api/api";
|
import { getTopTracks, imageUrl, type getItemsArgs } from "api/api"
|
||||||
import { Link } from "react-router";
|
import { Link } from "react-router"
|
||||||
import TopListSkeleton from "./skeletons/TopListSkeleton";
|
import TopListSkeleton from "./skeletons/TopListSkeleton"
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react"
|
||||||
import TopItemList from "./TopItemList";
|
import TopItemList from "./TopItemList"
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
limit: number;
|
limit: number,
|
||||||
period: string;
|
period: string,
|
||||||
artistId?: Number;
|
artistId?: Number
|
||||||
albumId?: Number;
|
albumId?: Number
|
||||||
}
|
}
|
||||||
|
|
||||||
const TopTracks = (props: Props) => {
|
const TopTracks = (props: Props) => {
|
||||||
const { isPending, isError, data, error } = useQuery({
|
|
||||||
queryKey: [
|
|
||||||
"top-tracks",
|
|
||||||
{
|
|
||||||
limit: props.limit,
|
|
||||||
period: props.period,
|
|
||||||
artist_id: props.artistId,
|
|
||||||
album_id: props.albumId,
|
|
||||||
page: 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
queryFn: ({ queryKey }) => getTopTracks(queryKey[1] as getItemsArgs),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (isPending) {
|
const { isPending, isError, data, error } = useQuery({
|
||||||
return (
|
queryKey: ['top-tracks', {limit: props.limit, period: props.period, artist_id: props.artistId, album_id: props.albumId, page: 0}],
|
||||||
<div className="w-[300px]">
|
queryFn: ({ queryKey }) => getTopTracks(queryKey[1] as getItemsArgs),
|
||||||
<h2>Top Tracks</h2>
|
})
|
||||||
<p>Loading...</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (isError) {
|
|
||||||
return <p className="error">Error:{error.message}</p>;
|
|
||||||
}
|
|
||||||
if (!data.items) return;
|
|
||||||
|
|
||||||
let params = "";
|
if (isPending) {
|
||||||
params += props.artistId ? `&artist_id=${props.artistId}` : "";
|
return (
|
||||||
params += props.albumId ? `&album_id=${props.albumId}` : "";
|
<div className="w-[300px]">
|
||||||
|
<h2>Top Tracks</h2>
|
||||||
|
<p>Loading...</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (isError) {
|
||||||
|
return <p className="error">Error:{error.message}</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
let params = ''
|
||||||
|
params += props.artistId ? `&artist_id=${props.artistId}` : ''
|
||||||
|
params += props.albumId ? `&album_id=${props.albumId}` : ''
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h2 className="hover:underline">
|
<h2 className="hover:underline"><Link to={`/chart/top-tracks?period=${props.period}${params}`}>Top Tracks</Link></h2>
|
||||||
<Link to={`/chart/top-tracks?period=${props.period}${params}`}>
|
<div className="max-w-[300px]">
|
||||||
Top Tracks
|
<TopItemList type="track" data={data}/>
|
||||||
</Link>
|
{data.items.length < 1 ? 'Nothing to show' : ''}
|
||||||
</h2>
|
</div>
|
||||||
<div className="max-w-[300px]">
|
</div>
|
||||||
<TopItemList type="track" data={data} />
|
)
|
||||||
{data.items.length < 1 ? "Nothing to show" : ""}
|
}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TopTracks;
|
export default TopTracks
|
||||||
Loading…
Reference in new issue