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