From 0b31bf3446a8e4b45641854928b3edf8e686552a Mon Sep 17 00:00:00 2001
From: karitham <kar@karitham.dev>
Date: Fri, 12 Sep 2025 21:02:00 +0000
Subject: [PATCH] use releases instead of release groups

---
 src/App.tsx | 73 ++++++++++++++++++++++++++---------------------------
 1 file changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8d61f9a..1eab7b1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -34,9 +34,8 @@ export default () => {
 		},
 	);
 	const [artistRes] = createResource(settings, artistFetcher);
-	const [groupsFetcher] = makeCache(
-		(set: Settings) =>
-			releaseGroups(set.username, undefined, set.range, set.count),
+	const [releasesFetcher] = makeCache(
+		(set: Settings) => releases(set.username, undefined, set.range, set.count),
 		{
 			storage: localStorage,
 			sourceHash(source) {
@@ -44,7 +43,7 @@ export default () => {
 			},
 		},
 	);
-	const [groupsRes] = createResource(settings, groupsFetcher);
+	const [releasesRes] = createResource(settings, releasesFetcher);
 
 	return (
 		<main class="bg-black min-h-screen text-white p-8">
@@ -94,7 +93,7 @@ export default () => {
 							<h2 class="text-2xl font-semibold my-6 text-center">
 								Top Albums
 							</h2>
-							<ReleaseGroups groups={groupsRes()?.release_groups || []} />
+							<ReleaseGroups groups={releasesRes()?.releases || []} />
 						</div>
 					</div>
 				</Suspense>
@@ -141,7 +140,7 @@ const ArtistsItem: Component<{ artist: ArtistStatsArtist }> = (props) => {
 				<img
 					src={
 						image() ||
-						`https://placehold.co/1000x1000/000000/ffffff?text=${props.artist.artist_name}`
+						`https://placehold.co/100x100/000000/ffffff?text=${props.artist.artist_name}`
 					}
 					alt={`Thumbnail for ${props.artist.artist_name}`}
 					class="w-32 h-32 mx-auto object-cover rounded-full shadow-lg mb-4 transition-all duration-300 group-hover:scale-105"
@@ -162,25 +161,25 @@ const ArtistsItem: Component<{ artist: ArtistStatsArtist }> = (props) => {
 	);
 };
 
-const ReleaseGroups: Component<{ groups: ReleaseGroupsGroup[] }> = (props) => {
+const ReleaseGroups: Component<{ groups: Release[] }> = (props) => {
 	return (
 		<div class="flex flex-wrap justify-center gap-4">
 			<For each={props.groups}>
-				{(group) => <ReleaseGroupItem group={group} />}
+				{(group) => <ReleaseGroupItem release={group} />}
 			</For>
 		</div>
 	);
 };
 
-const ReleaseGroupItem: Component<{ group: ReleaseGroupsGroup }> = (props) => {
+const ReleaseGroupItem: Component<{ release: Release }> = (props) => {
 	const [imageFetcher] = makeCache(
-		async (group: ReleaseGroupsGroup) => {
-			if (!group.caa_release_mbid) {
+		async (release: Release) => {
+			if (!release.caa_release_mbid) {
 				return null;
 			}
 			const result = await getReleaseImageURL(
 				"release",
-				group.caa_release_mbid,
+				release.caa_release_mbid,
 			);
 			return result[0]?.image.replace("http://", "https://");
 		},
@@ -188,7 +187,7 @@ const ReleaseGroupItem: Component<{ group: ReleaseGroupsGroup }> = (props) => {
 			storage: localStorage,
 		},
 	);
-	const [image] = createResource(props.group, imageFetcher);
+	const [image] = createResource(props.release, imageFetcher);
 
 	return (
 		<div class="group relative w-40 p-4 rounded-lg bg-gray-900 transition-all duration-300 hover:bg-gray-800 cursor-pointer">
@@ -201,22 +200,22 @@ const ReleaseGroupItem: Component<{ group: ReleaseGroupsGroup }> = (props) => {
 				<img
 					src={
 						image() ||
-						`https://placehold.co/1000x1000/000000/ffffff?text=${props.group.release_group_name}`
+						`https://placehold.co/100x100/000000/ffffff?text=${props.release.release_name}`
 					}
-					alt={`Cover for ${props.group.release_group_name}`}
+					alt={`Cover for ${props.release.release_name}`}
 					class="w-32 h-32 mx-auto object-cover rounded-full shadow-lg mb-4 transition-all duration-300 group-hover:scale-105"
 				/>
 			</Show>
 			<p class="text-white text-center font-bold text-base truncate mb-1">
 				<a
 					target="_blank"
-					href={`${MB_API_URL}/release/${props.group.caa_release_mbid}`}
+					href={`${MB_API_URL}/release/${props.release.caa_release_mbid}`}
 				>
-					{props.group.release_group_name}
+					{props.release.release_name}
 				</a>
 			</p>
 			<p class="text-gray-500 text-base truncate mb-1">
-				{props.group.listen_count} listens
+				{props.release.listen_count} listens
 			</p>
 		</div>
 	);
@@ -243,34 +242,34 @@ type ArtistStatsArtist = {
 	listen_count: number;
 };
 
-export type ReleaseGroupsStats = {
+export type ReleasesStats = {
 	count: number;
 	from_ts: number;
 	last_updated: number;
 	offset: number;
 	range: string;
-	release_groups: ReleaseGroupsGroup[];
+	releases: Release[];
 	to_ts: number;
-	total_release_group_count: number;
+	total_release_count: number;
 	user_id: string;
 };
 
-type ReleaseGroupsGroup = {
+export interface Release {
 	artist_mbids: string[];
 	artist_name: string;
-	artists:
-		| {
-				artist_credit_name: string;
-				artist_mbid: string;
-				join_phrase: string;
-		  }[]
-		| null;
-	caa_id: number | null;
-	caa_release_mbid: string | null;
+	artists?: Artist[];
+	caa_id?: number;
+	caa_release_mbid?: string;
 	listen_count: number;
-	release_group_mbid: string | null;
-	release_group_name: string;
-};
+	release_mbid: string;
+	release_name: string;
+}
+
+export interface Artist {
+	artist_credit_name: string;
+	artist_mbid: string;
+	join_phrase: string;
+}
 
 async function artists(
 	user: string,
@@ -287,13 +286,13 @@ async function artists(
 	return getPayload(url);
 }
 
-async function releaseGroups(
+async function releases(
 	user: string,
 	offset: number = 0,
 	range: Range = "this_week",
 	count: number = 5,
-): Promise<ReleaseGroupsStats> {
-	const url = new URL(`${LB_API_URL}/1/stats/user/${user}/release-groups`);
+): Promise<ReleasesStats> {
+	const url = new URL(`${LB_API_URL}/1/stats/user/${user}/releases`);
 
 	url.searchParams.set("offset", offset.toString());
 	url.searchParams.set("range", range);
-- 
2.51.2