gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-19 04:06:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add ranks to top items charts (#122)

Browse source
This commit is contained in:
Gabe Farrell 2026-01-11 00:15:46 -05:00 • committed by GitHub
parent d3faa9728e
commit f51771bc34
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 491 additions and 366 deletions
Download patch file Download diff file Expand all files Collapse all files

33
client/app/routes/Charts/ArtistChart.tsx
View file

@ -6,7 +6,7 @@ import { type Album, type PaginatedResponse } from "api/api";
export async function clientLoader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url);
const page = url.searchParams.get("page") || "0";
url.searchParams.set('page', page)
url.searchParams.set("page", page);
const res = await fetch(
`/apis/web/v1/top-artists?${url.searchParams.toString()}`
@ -20,7 +20,9 @@ export async function clientLoader({ request }: LoaderFunctionArgs) {
}
export default function Artist() {
const { top_artists: initialData } = useLoaderData<{ top_artists: PaginatedResponse<Album> }>();
const { top_artists: initialData } = useLoaderData<{
top_artists: PaginatedResponse<Album>;
}>();
return (
<ChartLayout
@ -29,15 +31,20 @@ export default function Artist() {
endpoint="chart/top-artists"
render={({ data, page, onNext, onPrev }) => (
<div className="flex flex-col gap-5">
<div className="flex gap-15 mx-auto">
<button className="default" onClick={onPrev} disabled={page <= 1}>
Prev
</button>
<button className="default" onClick={onNext} disabled={!data.has_next_page}>
Next
</button>
</div>
<div className="flex gap-15 mx-auto">
<button className="default" onClick={onPrev} disabled={page <= 1}>
Prev
</button>
<button
className="default"
onClick={onNext}
disabled={!data.has_next_page}
>
Next
</button>
</div>
<TopItemList
ranked
separators
data={data}
className="w-[400px] sm:w-[600px]"
@ -47,7 +54,11 @@ export default function Artist() {
<button className="default" onClick={onPrev} disabled={page <= 1}>
Prev
</button>
<button className="default" onClick={onNext} disabled={!data.has_next_page}>
<button
className="default"
onClick={onNext}
disabled={!data.has_next_page}
>
Next
</button>
</div>