gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-07 21:48:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Rewind (#116)

Browse source 
* wip

* chore: update counts to allow unix timeframe

* feat: add db functions for counting new items

* wip: endpoint working

* wip

* wip: initial ui done

* add header, adjust ui

* add time listened toggle

* fix layout, year param

* param fixes
This commit is contained in:
Gabe Farrell 2025-12-31 18:44:55 -05:00 • committed by GitHub
parent c0a8c64243
commit d4ac96f780
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
64 changed files with 2252 additions and 1055 deletions
Download patch file Download diff file Expand all files Collapse all files

67
client/app/components/TopThreeAlbums.tsx
View file

@ -1,38 +1,43 @@
import { useQuery } from "@tanstack/react-query"
import { getTopAlbums, type getItemsArgs } from "api/api"
import AlbumDisplay from "./AlbumDisplay"
import { useQuery } from "@tanstack/react-query";
import { getTopAlbums, type getItemsArgs } from "api/api";
import AlbumDisplay from "./AlbumDisplay";
interface Props {
period: string
artistId?: Number
vert?: boolean
hideTitle?: boolean
period: string;
artistId?: Number;
vert?: boolean;
hideTitle?: boolean;
}
export default function TopThreeAlbums(props: Props) {
const { isPending, isError, data, error } = useQuery({
queryKey: [
"top-albums",
{ limit: 3, period: props.period, artist_id: props.artistId, page: 0 },
],
queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
});
const { isPending, isError, data, error } = useQuery({
queryKey: ['top-albums', {limit: 3, period: props.period, artist_id: props.artistId, page: 0}],
queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
})
if (isPending) {
return <p>Loading...</p>;
}
if (isError) {
return <p className="error">Error:{error.message}</p>;
}
if (isPending) {
return <p>Loading...</p>
}
if (isError) {
return <p className="error">Error:{error.message}</p>
}
console.log(data);
console.log(data)
return (
<div>
{!props.hideTitle && <h2>Top Three Albums</h2>}
<div className={`flex ${props.vert ? 'flex-col' : ''}`} style={{gap: 15}}>
{data.items.map((item, index) => (
<AlbumDisplay album={item} size={index === 0 ? 190 : 130} />
))}
</div>
</div>
)
}
return (
<div>
{!props.hideTitle && <h3>Top Three Albums</h3>}
<div
className={`flex ${props.vert ? "flex-col" : ""}`}
style={{ gap: 15 }}
>
{data.items.map((item, index) => (
<AlbumDisplay album={item} size={index === 0 ? 190 : 130} />
))}
</div>
</div>
);
}