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";
4import Layout from "./Layout";
5
6export default function TopTracks() {
7 const data = useLazyLoadQuery<TopTracksQuery>(
8 graphql`
9 query TopTracksQuery {
10 fmTealAlphaFeedPlaysAggregated(
11 groupBy: ["trackName", "releaseMbId", "artists"]
12 orderBy: { count: desc }
13 limit: 50
14 ) {
15 trackName
16 releaseMbId
17 artists
18 count
19 }
20 }
21 `,
22 {}
23 );
24
25 const tracks = data.fmTealAlphaFeedPlaysAggregated || [];
26 const maxCount = tracks.length > 0 ? tracks[0].count : 0;
27
28 return (
29 <Layout>
30 <div className="space-y-1">
31 {tracks.map((track, index) => (
32 <TopTrackItem
33 key={`${track.trackName}-${index}`}
34 trackName={track.trackName || "Unknown Track"}
35 releaseMbId={track.releaseMbId}
36 artists={track.artists || "Unknown Artist"}
37 count={track.count}
38 rank={index + 1}
39 maxCount={maxCount}
40 />
41 ))}
42 </div>
43 </Layout>
44 );
45}