Add song data fetching

pages/review/[id].vue

@@ -4,12 +4,12 @@ const { id } = useRoute().params
 interface Artist {
     id: number
     year: number
-    country: string
+    country_fi: string
     artist: string
     title: string
-    runningOrder: number
-    lyricsOriginal: string
-    lyricsTranslationFI: string
+    running_order: number
+    lyrics_original: string
+    lyrics_translation_fi: string
     tags: string[]
     img: string
     flag: string
@@ -17,6 +17,15 @@ interface Artist {
 
 const { data: artist } = await useFetch<Artist>(`/api/artist?id=${id}`)
 
+if (!artist.value) {
+    throw createError({
+        statusCode: 404,
+        statusMessage: 'Artist not found'
+    })
+}
+
+
+
 // State for toggling lyrics visibility
 const showOriginalLyrics = ref(false)
 const toggleOriginalLyrics = () => {
@@ -76,9 +85,9 @@ const submitReview = () => {
                     {{ showOriginalLyrics ? '▼' : '►' }}
                 </span>
             </h2>
-            <pre v-show="showOriginalLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyricsOriginal }}</pre>
+            <pre v-show="showOriginalLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyrics_original }}</pre>
         </div>
-        <div v-if="artist.lyricsTranslationFI">
+        <div v-if="artist.lyrics_translation_fi">
             <h2 
                 @click="toggleTranslationLyrics" 
                 class="cursor-pointer hover:text-blue-600 flex items-center"
@@ -88,9 +97,9 @@ const submitReview = () => {
                     {{ showTranslationLyrics ? '▼' : '►' }}
                 </span>
             </h2>
-            <pre v-show="showTranslationLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyricsTranslationFI }}</pre>
+            <pre v-show="showTranslationLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyrics_translation_fi }}</pre>
         </div>
-        <ul>
+        <ul class="flex flex-wrap justify-center list-none gap-2 p-0 m-0">
             <li class="tag" v-for="tag in artist.tags" :key="tag">{{ tag }}</li>
         </ul>
         <form @submit.prevent="submitReview">

server/api/artist.get.ts

@@ -1,15 +1,18 @@
-export default defineEventHandler((event) => {
-    return {
-        id: 1,
-        year: 2025,
-        country: "Suomi",
-        artist: "Käärijä",
-        title: "Cha Cha Cha",
-        runningOrder: 1,
-        lyricsOriginal: "[Säkeistö 1]\nRankka viikko ja paljon pitkii päiviä takan\nMielenkiintona piña colada ja rata\nIlta on vielä nuori ja aikaa kumota\nTää jäinen ulkokuori on aika tuhota\n\n[Kertosäe]\nPidän kaksin käsin kiinni juomista niinku\n(Cha, cha, cha, cha, cha, cha, cha)\nEi, en mieti huomista ku tartun tuopista niinku\n(Cha, cha, cha, cha, cha, cha, cha)\nEi, haluun olla sekasin ja vapaa huolista niinku\n(Cha, cha, cha, cha, cha, cha, cha)\nEi, ja mä jatkan kunnes en enää pysy tuolissa niinku\n\n[Säkeistö 2]\nMuutama piña colada on jo takana\nSilti mul on vielä naamataulu vakava (Yeah, yeah, ye, ye, yeah)\nIlta on vielä nuori ja aikaa kumota\nTää jäinen ulkokuori on aika tuhota\nParketti kutsuu mua ku en oo enää lukossa\nNiinku cha-cha-cha, mä oon tulossa\n\n[Kertosäe]\nPidän kaksin käsin kiinni juomista niinku\n(Cha, cha, cha, cha, cha, cha, cha)\nEi, en mieti huomista ku tartun tuopista niinku\n(Cha, cha, cha, cha, cha, cha, cha)\nEi, haluun olla sekasin ja vapaa huolista niinku\n(Cha, cha, cha, cha, cha, cha, cha)\nEi, ja mä jatkan kunnes en enää pysy tuolissa niinku vou\nSee upcoming rock shows\nGet tickets for your favorite artists\nYou might also like\n\u200bmietin sua pahalla\n\u200bpehmoaino\nLet 3 - Mama ŠČ! (English Translation)\nGenius English Translations\nViimeinen tanssi\nBEHM & Olavi Uusivirta\n[Jälkikertosäe]\nNyt lähden tanssimaan\nNiinku cha-cha-cha\nEnkä pelkääkään tätä maailmaa\nNiinku cha-cha-cha\nKun mä kaadan päälleni samppanjaa\n\n[Väliosa]\n(Cha) Cha-cha-cha\nToinen silmä jo karsastaa\nJa puhe sammaltaa\nKu tää toinen puoli must vallan saa\n(Cha) Cha-cha-cha\nEn oo arkena tää mies laisinkaan\nEn oo mut tänään oon se mies\nTänään oon se mies (Ei)\n\n[Jälkikertosäe]\nNyt lähden tanssimaan\nNiinku cha-cha-cha\nEnkä pelkääkään tätä maailmaa\nNiinku cha-cha-cha\nKun mä kaadan päälleni samppanjaa\nNiinku cha-cha-cha\nCha, cha, cha, cha, cha, cha, cha, aa-aah\nNiinku cha-cha-cha\nCha, cha, cha, cha, cha, cha, cha\n[Outro]\nCha, cha, cha, cha, cha, cha, cha",
-        lyricsTranslationFI: null,
-        tags: ["Juhlat", "Alkoholi", "Sosiaalinen paine"],
-        img: "https://placehold.co/150",
-        flag: "fin"
+import { getQuery } from 'h3';
+
+export default defineEventHandler(async (event) => {
+    const query = getQuery(event)
+    const { id } = query as { id: number }
+    const config = useRuntimeConfig(event)
+    const apiBase = config.public.apiBase
+
+    const response = await $fetch(`${apiBase}/songs/${id}`)
+        
+    if (!response) {
+        throw createError({
+            statusCode: 404,
+            statusMessage: 'Artist not found'
+        })
     }
+    return response
 })