good username handling

src/App.tsx

···
 	createResource,
 	createSignal,
 	For,
+	type JSXElement,
+	type Resource,
 	Show,
 	Suspense,
 } from "solid-js";
···
 
 export default () => {
 	const [settings, setSettings] = createSignal<Settings>({
-		username: "karitham",
+		username: "",
 		range: "this_month",
 		count: 10,
 	});
 	const [artistFetcher] = makeCache(
-		(set: Settings) => artists(set.username, undefined, set.range, set.count),
+		(set: Settings) => {
+			if (set.username)
+				return artists(set.username, undefined, set.range, set.count);
+		},
 		{
 			storage: localStorage,
 			sourceHash(source) {
···
 	);
 	const [artistRes] = createResource(settings, artistFetcher);
 	const [releasesFetcher] = makeCache(
-		(set: Settings) => releases(set.username, undefined, set.range, set.count),
+		(set: Settings) => {
+			if (set.username)
+				return releases(set.username, undefined, set.range, set.count);
+		},
 		{
 			storage: localStorage,
 			sourceHash(source) {
···
 								range: e.target.value as Range,
 							}));
 						}}
-						class="p-4 rounded-lg bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-green-500 w-full sm:w-auto"
+						class="p-4 rounded-lg bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-green-500 w-full sm:w-auto capitalize"
 					>
 						{ranges.map((r) => (
-							<option value={r}>{r}</option>
+							<option value={r} class="capitalize">
+								{r.split("_").join(" ")}
+							</option>
 						))}
 					</select>
 				</div>
 				<Suspense
 					fallback={<p class="text-center text-gray-400">Loading...</p>}
 				>
-					<div>
+					<Show
+						when={artistRes()}
+						fallback={
+							<p class="text-center text-gray-400">
+								Waiting for a valid username...
+							</p>
+						}
+					>
 						<div>
-							<h2 class="text-2xl font-semibold my-6 text-center">
-								Top Artists
-							</h2>
-							<Artists artists={artistRes()?.artists || []} />
+							<div>
+								<h2 class="text-2xl font-semibold my-6 text-center">
+									Top Artists
+								</h2>
+								<Artists artists={artistRes()?.artists || []} />
+							</div>
+							<div>
+								<h2 class="text-2xl font-semibold my-6 text-center">
+									Top Albums
+								</h2>
+								<Releases groups={releasesRes()?.releases || []} />
+							</div>
 						</div>
-						<div>
-							<h2 class="text-2xl font-semibold my-6 text-center">
-								Top Albums
-							</h2>
-							<ReleaseGroups groups={releasesRes()?.releases || []} />
-						</div>
-					</div>
+					</Show>
 				</Suspense>
 			</div>
 		</main>
···
 	return (
 		<div class="flex flex-wrap justify-center gap-4">
 			<For each={props.artists}>
-				{(artist) => <ArtistsItem artist={artist} />}
+				{(artist) => <ArtistsItem item={artist} />}
 			</For>
 		</div>
 	);
 };
 
-const ArtistsItem: Component<{ artist: ArtistStatsArtist }> = (props) => {
+export const ArtistsItem: Component<{ item: ArtistStatsArtist }> = (props) => {
 	const [imageFetcher] = makeCache(
 		async (artist: ArtistStatsArtist) => {
-			if (!artist.artist_mbid) {
-				return null;
-			}
-
+			if (!artist.artist_mbid) return null;
 			return await getWikidataURL(artist.artist_mbid).then((s) =>
 				s ? getWikidataThumbnail(s) : null,
 			);
 		},
-		{
-			storage: localStorage,
-		},
+		{ storage: localStorage },
 	);
-	const [image] = createResource(props.artist, imageFetcher);
+	const [image] = createResource(() => props.item, 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">
-			<Show
-				when={!image.loading}
-				fallback={
-					<div class="relative w-32 h-32 mx-auto rounded-full mb-4 bg-gray-700 animate-pulse"></div>
-				}
-			>
-				<img
-					src={
-						image() ||
-						`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"
-				/>
-			</Show>
-			<p class="text-white text-center font-bold text-base truncate mb-1">
-				<a
-					target="_blank"
-					href={`${MB_API_URL}/artist/${props.artist.artist_mbid}`}
-				>
-					{props.artist.artist_name}
-				</a>
-			</p>
-			<p class="text-gray-500 text-base truncate mb-1">
-				{props.artist.listen_count} listens
-			</p>
-		</div>
+		<CardItem
+			imageUrl={image()}
+			imageFallbackUrl={`https://placehold.co/100x100/000000/ffffff?text=${props.item.artist_name}`}
+			imageLoading={image.loading}
+			title={props.item.artist_name}
+			subtitle={`${props.item.listen_count} listens`}
+			linkUrl={`${MB_API_URL}/artist/${props.item.artist_mbid}`}
+			isCircularImage={true}
+		/>
 	);
 };
 
-const ReleaseGroups: Component<{ groups: Release[] }> = (props) => {
+const Releases: Component<{ groups: Release[] }> = (props) => {
 	return (
 		<div class="flex flex-wrap justify-center gap-4">
 			<For each={props.groups}>
-				{(group) => <ReleaseGroupItem release={group} />}
+				{(release) => <ReleaseItem item={release} />}
 			</For>
 		</div>
 	);
 };
 
-const ReleaseGroupItem: Component<{ release: Release }> = (props) => {
+export const ReleaseItem: Component<{ item: Release }> = (props) => {
 	const [imageFetcher] = makeCache(
 		async (release: Release) => {
-			if (!release.caa_release_mbid) {
-				return null;
-			}
+			if (!release.caa_release_mbid) return null;
 			const result = await getReleaseImageURL(
 				"release",
 				release.caa_release_mbid,
 			);
 			return result[0]?.image.replace("http://", "https://");
 		},
-		{
-			storage: localStorage,
-		},
+		{ storage: localStorage },
+	);
+	const [image] = createResource(() => props.item, imageFetcher);
+
+	return (
+		<CardItem
+			imageUrl={image()}
+			imageFallbackUrl={`https://placehold.co/100x100/000000/ffffff?text=${props.item.release_name}`}
+			imageLoading={image.loading}
+			title={props.item.release_name}
+			subtitle={`${props.item.listen_count} listens`}
+			linkUrl={`${MB_API_URL}/release/${props.item.caa_release_mbid}`}
+		/>
 	);
-	const [image] = createResource(props.release, imageFetcher);
+};
 
+type CardSectionProps<T> = {
+	title: string;
+	resource: Resource<T[] | undefined>;
+	ItemComponent: (props: { item: T }) => JSXElement;
+	fallbackMessage: string;
+};
+
+export const CardSection = <T,>(props: CardSectionProps<T>) => {
+	return (
+		<div>
+			<h2 class="text-2xl font-semibold my-6 text-center">{props.title}</h2>
+			<Show
+				when={(props.resource()?.length || 0) > 0}
+				fallback={
+					<p class="text-center text-gray-400">{props.fallbackMessage}</p>
+				}
+			>
+				<div class="flex flex-wrap justify-center gap-4">
+					<For each={props.resource()}>
+						{(item) => <props.ItemComponent item={item} />}
+					</For>
+				</div>
+			</Show>
+		</div>
+	);
+};
+
+type CardItemProps = {
+	imageUrl: string | null | undefined;
+	imageFallbackUrl: string;
+	imageLoading: boolean;
+	title: string;
+	subtitle: string;
+	linkUrl: string;
+	isCircularImage?: boolean;
+};
+
+export const CardItem: Component<CardItemProps> = (props) => {
 	return (
 		<div class="group relative w-40 p-4 rounded-lg bg-gray-900 transition-all duration-300 hover:bg-gray-800 cursor-pointer">
 			<Show
-				when={!image.loading}
+				when={!props.imageLoading}
 				fallback={
-					<div class="relative w-32 h-32 mx-auto rounded-full mb-4 bg-gray-700 animate-pulse"></div>
+					<div
+						class={`relative w-32 h-32 mx-auto mb-4 bg-gray-700 animate-pulse ${props.isCircularImage ? "rounded-full" : "rounded-lg"}`}
+					></div>
 				}
 			>
 				<img
-					src={
-						image() ||
-						`https://placehold.co/100x100/000000/ffffff?text=${props.release.release_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"
+					src={props.imageUrl || props.imageFallbackUrl}
+					alt={`Thumbnail for ${props.title}`}
+					class={`w-32 h-32 mx-auto object-cover shadow-lg mb-4 transition-all duration-300 group-hover:scale-105 ${props.isCircularImage ? "rounded-full" : "rounded-lg"}`}
 				/>
 			</Show>
 			<p class="text-white text-center font-bold text-base truncate mb-1">
-				<a
-					target="_blank"
-					href={`${MB_API_URL}/release/${props.release.caa_release_mbid}`}
-				>
-					{props.release.release_name}
+				<a target="_blank" href={props.linkUrl}>
+					{props.title}
 				</a>
 			</p>
-			<p class="text-gray-500 text-base truncate mb-1">
-				{props.release.listen_count} listens
-			</p>
+			<p class="text-gray-500 text-base truncate mb-1">{props.subtitle}</p>
 		</div>
 	);
 };