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