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 { TopAlbumsQuery } from "./__generated__/TopAlbumsQuery.graphql";
4import AlbumItem from "./AlbumItem";
5import Layout from "./Layout";
6import { useDateRangeFilter } from "./useDateRangeFilter";
7
8export default function TopAlbums() {
9 const { period } = useParams<{ period?: string }>();
10 const queryVariables = useDateRangeFilter(period);
11
12 const data = useLazyLoadQuery<TopAlbumsQuery>(
13 graphql`
14 query TopAlbumsQuery($where: FmTealAlphaFeedPlayWhereInput) {
15 fmTealAlphaFeedPlaysAggregated(
16 groupBy: [{ field: releaseMbId }, { field: releaseName }, { field: artists }]
17 orderBy: { count: desc }
18 limit: 100
19 where: $where
20 ) {
21 releaseMbId
22 releaseName
23 artists
24 count
25 }
26 }
27 `,
28 queryVariables,
29 { fetchKey: period || "all", fetchPolicy: "store-or-network" }
30 );
31
32 const albums = [...(data.fmTealAlphaFeedPlaysAggregated || [])];
33
34 // Deduplicate by release name, keeping the one with highest count
35 // Prefer entries with artist data
36 const seenNames = new Set<string>();
37 const dedupedAlbums = albums
38 .sort((a, b) => {
39 // First sort by count (already sorted from query)
40 if (b.count !== a.count) return b.count - a.count;
41 // Then prefer entries with artists data
42 if (a.artists && !b.artists) return -1;
43 if (!a.artists && b.artists) return 1;
44 return 0;
45 })
46 .filter((album) => {
47 const name = album.releaseName || "Unknown Album";
48 if (seenNames.has(name)) {
49 return false;
50 }
51 seenNames.add(name);
52 return true;
53 })
54 .slice(0, 50);
55
56 const maxCount = dedupedAlbums.length > 0 ? dedupedAlbums[0].count : 0;
57
58 return (
59 <Layout>
60 <div className="space-y-1">
61 {dedupedAlbums.map((album, index) => (
62 <AlbumItem
63 key={album.releaseMbId || index}
64 releaseName={album.releaseName || "Unknown Album"}
65 releaseMbId={album.releaseMbId}
66 artists={album.artists}
67 count={album.count}
68 rank={index + 1}
69 maxCount={maxCount}
70 />
71 ))}
72 </div>
73 </Layout>
74 );
75}