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