indexx.dev
forked from
chadtmiller.com/slices-teal-relay
Teal.fm frontend powered by slices.network
tealfm-slices.wisp.place
tealfm
slices
1import { graphql, useLazyLoadQuery } from "react-relay";
2import type { TopTracksQuery } from "./__generated__/TopTracksQuery.graphql";
3import TopTrackItem from "./TopTrackItem";
4
5export default function TopTracks() {
6 const data = useLazyLoadQuery<TopTracksQuery>(
7 graphql`
8 query TopTracksQuery {
9 fmTealAlphaFeedPlaysAggregated(
10 groupBy: ["trackName", "releaseMbId", "artists"]
11 orderBy: { count: desc }
12 limit: 50
13 ) {
14 trackName
15 releaseMbId
16 artists
17 count
18 }
19 }
20 `,
21 {}
22 );
23
24 const tracks = data.fmTealAlphaFeedPlaysAggregated || [];
25 const maxCount = tracks.length > 0 ? tracks[0].count : 0;
26
27 return (
28 <div className="space-y-1">
29 {tracks.map((track, index) => (
30 <TopTrackItem
31 key={`${track.trackName}-${index}`}
32 trackName={track.trackName || "Unknown Track"}
33 releaseMbId={track.releaseMbId}
34 artists={track.artists || "Unknown Artist"}
35 count={track.count}
36 rank={index + 1}
37 maxCount={maxCount}
38 />
39 ))}
40 </div>
41 );
42}