From 30541eab8d3381f3c507763c29e0953c393d6e1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 4 Oct 2026 22:01:34 +0200
Subject: [PATCH] Cache album slider data

---
 app/components/Album/Slider.vue | 48 ++++++++++++++++++++-------------
 app/pages/index.vue             |  3 ++-
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/app/components/Album/Slider.vue b/app/components/Album/Slider.vue
index 90122e8..970c9e1 100644
--- a/app/components/Album/Slider.vue
+++ b/app/components/Album/Slider.vue
@@ -1,27 +1,39 @@
 <script setup lang="ts">
-const { data: genresData } = await useApiFetch<Genre[]>("/genres/random")
+const cacheKey = "album-slider-data"
+const data = ref<{ genre: Genre; albums: Album[] }[]>([])
 
-const data = await Promise.allSettled(
-	(genresData.value ?? []).map(async (genre: Genre) => {
-		const albums = await cfetch<Album[]>(`/genres/albums/${genre._id}`)
-
-		return {
-			genre,
-			albums,
+onMounted(async () => {
+	const cached = sessionStorage.getItem(cacheKey)
+	if (cached) {
+		try {
+			data.value = JSON.parse(cached)
+			return
+		} catch {
+			sessionStorage.removeItem(cacheKey)
 		}
-	}),
-).then((results) =>
-	results
+	}
+
+	const genres = await cfetch<Genre[]>("/genres/random")
+	const results = await Promise.allSettled(
+		(genres ?? []).map(async (genre) => ({
+			genre,
+			albums: await cfetch<Album[]>(`/genres/albums/${genre._id}`),
+		})),
+	)
+
+	data.value = results
 		.filter(
 			(
-				r,
-			): r is PromiseFulfilledResult<{
-				genre: any
-				albums: any[]
-			}> => r.status === "fulfilled",
+				result,
+			): result is PromiseFulfilledResult<{
+					genre: Genre
+					albums: Album[]
+				}> => result.status === "fulfilled",
 		)
-		.map((r) => r.value),
-)
+		.map((result) => result.value)
+
+	sessionStorage.setItem(cacheKey, JSON.stringify(data.value))
+})
 </script>
 
 <template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index bad288b..a47e2d1 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,4 +1,5 @@
-<script setup lang="ts">useHead({ title: "Home" })
+<script setup lang="ts">
+useHead({ title: "Home" })
 </script>
 
 <template>