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