From 379acf400c2cca5af9da2578463e80f9a520fd03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 6 Oct 2026 02:46:01 +0200
Subject: [PATCH] Handle optional API data in pages

---
 app/pages/admin/albums.vue       |  6 +++---
 app/pages/admin/artists.vue      |  2 +-
 app/pages/admin/genre.vue        |  2 +-
 app/pages/admin/songs.vue        |  8 ++++----
 app/pages/album/[id].vue         |  9 +++++----
 app/pages/artist/[id]/index.vue  | 11 ++++++-----
 app/pages/artist/[id]/tracks.vue |  5 +++--
 7 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/pages/admin/albums.vue b/app/pages/admin/albums.vue
index cafb35a..fc8fb34 100644
--- a/app/pages/admin/albums.vue
+++ b/app/pages/admin/albums.vue
@@ -32,7 +32,7 @@ import { type Option } from "~/ui/SearchSelect.vue"
 
 const { data: artistData } = useApiFetch<Artist[]>("/all/artists")
 const artistFetchOptions = async (q?: string): Promise<Option[]> => {
-	return artistData.value.map<Option>((g) => ({
+	return (artistData.value ?? []).map<Option>((g) => ({
 		label: g.name,
 		value: g._id,
 	}))
@@ -40,7 +40,7 @@ const artistFetchOptions = async (q?: string): Promise<Option[]> => {
 
 const { data: genreData } = useApiFetch<Genre[]>("/all/genres")
 const genreFetchOptions = async (q?: string): Promise<Option[]> => {
-	return genreData.value.map<Option>((g) => ({
+	return (genreData.value ?? []).map<Option>((g) => ({
 		label: g.name,
 		value: g._id,
 	}))
@@ -113,7 +113,7 @@ const show = (id?: string) => {
 		return
 	}
 
-	const curItem: any = data.value.filter((i) => i._id == id)[0]
+	const curItem: any = (data.value ?? []).filter((i) => i._id == id)[0]
 
 	if (!curItem) return
 
diff --git a/app/pages/admin/artists.vue b/app/pages/admin/artists.vue
index 5f94ac2..4328a0c 100644
--- a/app/pages/admin/artists.vue
+++ b/app/pages/admin/artists.vue
@@ -79,7 +79,7 @@ const show = (id?: string) => {
 		return
 	}
 
-	const curItem: any = data.value.filter((i) => i._id == id)[0]
+	const curItem: any = (data.value ?? []).filter((i) => i._id == id)[0]
 
 	if (!curItem) return
 
diff --git a/app/pages/admin/genre.vue b/app/pages/admin/genre.vue
index 26f4275..b34c14f 100644
--- a/app/pages/admin/genre.vue
+++ b/app/pages/admin/genre.vue
@@ -71,7 +71,7 @@ const show = (id?: string) => {
 		return
 	}
 
-	const curItem: any = data.value.filter((i) => i._id == id)[0]
+	const curItem: any = (data.value ?? []).filter((i) => i._id == id)[0]
 
 	if (!curItem) return
 
diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
index db6ce07..1bee8df 100644
--- a/app/pages/admin/songs.vue
+++ b/app/pages/admin/songs.vue
@@ -32,7 +32,7 @@ import { type Option } from "~/ui/SearchSelect.vue"
 
 const { data: artistData } = useApiFetch<Artist[]>("/all/artists")
 const artistFetchOptions = async (q?: string): Promise<Option[]> => {
-	return artistData.value.map<Option>((g) => ({
+	return (artistData.value ?? []).map<Option>((g) => ({
 		label: g.name,
 		value: g._id,
 	}))
@@ -40,7 +40,7 @@ const artistFetchOptions = async (q?: string): Promise<Option[]> => {
 
 const { data: albumData } = useApiFetch<Album[]>("/all/albums")
 const albumFetchOptions = async (q?: string): Promise<Option[]> => {
-	return albumData.value.map<Option>((g) => ({
+	return (albumData.value ?? []).map<Option>((g) => ({
 		label: g.name,
 		value: g._id,
 	}))
@@ -48,7 +48,7 @@ const albumFetchOptions = async (q?: string): Promise<Option[]> => {
 
 const { data: genreData } = useApiFetch<Genre[]>("/all/genres")
 const genreFetchOptions = async (): Promise<Option[]> => {
-	return genreData.value.map<Option>((genre) => ({
+	return (genreData.value ?? []).map<Option>((genre) => ({
 		label: genre.name,
 		value: genre._id,
 	}))
@@ -201,7 +201,7 @@ const show = (id?: string) => {
 		return
 	}
 
-	const curItem: any = data.value.filter((i) => i._id == id)[0]
+	const curItem: any = (data.value ?? []).filter((i) => i._id == id)[0]
 
 	if (!curItem) return
 
diff --git a/app/pages/album/[id].vue b/app/pages/album/[id].vue
index b868618..5b8175c 100644
--- a/app/pages/album/[id].vue
+++ b/app/pages/album/[id].vue
@@ -9,6 +9,7 @@ const { data: albumData } = await useApiFetch<Album>(`/albums/${id.value}`)
 const { data: tracksData } = await useApiFetch<Track[]>(
 	`/albums/${id.value}/tracks`,
 )
+const tracks = computed(() => tracksData.value ?? [])
 
 const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
 useHead({ title: computed(() => albumData.value ? `${albumData.value.name} - Album` : "Album") })
@@ -30,12 +31,12 @@ useHead({ title: computed(() => albumData.value ? `${albumData.value.name} - Alb
 			<div class="buttons">
 				<Button
 					icon-name="lucide:play"
-					@click="() => playAlbum(tracksData)"
+					@click="() => playAlbum(tracks)"
 					>Play</Button
 				>
 				<Button
 					icon-name="lucide:shuffle"
-					@click="() => playShuffledAlbum(tracksData)"
+					@click="() => playShuffledAlbum(tracks)"
 					>Shuffle</Button
 				>
 			</div>
@@ -44,11 +45,11 @@ useHead({ title: computed(() => albumData.value ? `${albumData.value.name} - Alb
 
 	<section class="tracks">
 		<TrackRow
-			v-for="(track, i) in tracksData"
+			v-for="(track, i) in tracks"
 			:key="track._id"
 			:track="track"
 			:index="i"
-			@play-album-at-index="() => playAlbumAtIndex(tracksData, i)"
+			@play-album-at-index="() => playAlbumAtIndex(tracks, i)"
 		/>
 	</section>
 </template>
diff --git a/app/pages/artist/[id]/index.vue b/app/pages/artist/[id]/index.vue
index 80f06a0..9026875 100644
--- a/app/pages/artist/[id]/index.vue
+++ b/app/pages/artist/[id]/index.vue
@@ -13,13 +13,14 @@ const { data: albumsData } = await useApiFetch<Album[]>(
 const { data: tracksData } = await useApiFetch<Track[]>(
 	`/artists/${id.value}/tracks`,
 )
+const tracks = computed(() => tracksData.value ?? [])
 
 const chunkedTracks = computed(() => {
 	const SIZE = 3
 	const chunks = []
 
-	for (let i = 0; i < tracksData.value.length; i += SIZE) {
-		chunks.push(tracksData.value.slice(i, i + SIZE))
+	for (let i = 0; i < tracks.value.length; i += SIZE) {
+		chunks.push(tracks.value.slice(i, i + SIZE))
 	}
 
 	return chunks
@@ -56,12 +57,12 @@ useHead({ title: computed(() => artistData.value ? `${artistData.value.name} - A
 			<div class="buttons">
 				<Button
 					icon-name="lucide:play"
-					@click="() => playAlbum(tracksData)"
+					@click="() => playAlbum(tracks)"
 					>Play</Button
 				>
 				<Button
 					icon-name="lucide:shuffle"
-					@click="() => playShuffledAlbum(tracksData)"
+					@click="() => playShuffledAlbum(tracks)"
 					>Shuffle</Button
 				>
 			</div>
@@ -82,7 +83,7 @@ useHead({ title: computed(() => artistData.value ? `${artistData.value.name} - A
 				:track="track"
 				:index="i + pI * 3"
 				@play-album-at-index="
-					() => playAlbumAtIndex(tracksData, i + pI * 3)
+					() => playAlbumAtIndex(tracks, i + pI * 3)
 				"
 			/>
 		</section>
diff --git a/app/pages/artist/[id]/tracks.vue b/app/pages/artist/[id]/tracks.vue
index 0579b26..294f50f 100644
--- a/app/pages/artist/[id]/tracks.vue
+++ b/app/pages/artist/[id]/tracks.vue
@@ -5,6 +5,7 @@ const id = computed(() => route.params.id)
 const { data: tracksData } = await useApiFetch<Track[]>(
 	`/artists/${id.value}/tracks`,
 )
+const tracks = computed(() => tracksData.value ?? [])
 
 const { playAlbumAtIndex } = usePlayer()
 useHead({ title: "Artist Songs" })
@@ -15,12 +16,12 @@ useHead({ title: "Artist Songs" })
 		<h1 class="title">Songs</h1>
 
 		<TrackRow
-			v-for="(track, i) in tracksData"
+			v-for="(track, i) in tracks"
 			:key="track._id"
 			:track="track"
 			:index="i"
 			show-image
-			@play-album-at-index="() => playAlbumAtIndex(tracksData, i)"
+			@play-album-at-index="() => playAlbumAtIndex(tracks, i)"
 		/>
 	</section>
 </template>