feature: track selection

src/views/NewDashboard.vue

@@ -21,9 +21,10 @@ import { ref } from 'vue';
 
 
 const query = ref(''); //Holds query string
-const results = ref([]); //Holds search results
-
+const results = ref([]); //Holds results from the search
+const selectedResult = ref(null); //Holds the result selected by the user
 
+const emit = defineEmits(['selectTrack']);
 
 function storeToken(data) {
   // Store expiration time as well, for isTokenExpired()
@@ -62,12 +63,12 @@ async function getSpotifyToken(){
   });
 
   if(!response.ok){
-    console.log("Not ok");
+    console.log("No results found. #TODO: Show message in the UI.");
     return;
   }else{
-    const data = await response.json();
-    storeToken(data); //@jorgeguberte: storeToken() renames data to token_data
-    return data.access_token;
+    const token_data = await response.json();
+    storeToken(token_data); //@jorgeguberte: storeToken() renames data to token_data
+    return token_data.access_token;
   }
   
 }
@@ -104,23 +105,31 @@ async function search(){
   })
 }
 
+function selectTrack(track){
+  console.log('')
+  selectedResult.value = track;
+  //
+} 
+
 </script>
 
 <template>
     <div id="app" class="container mx-auto w-screen h-screen bg-red-200 flex flex-col">
       <header class="sticky top-0 z-10 p-4 bg-blue-200 h-fit text-center"> <h1 class="text-2xl font-bold">Maestro</h1>
         <p class="text-gray-600">Lorem ipsum dolor sit amet...</p> 
+        <p v-if="selectedResult">{{selectedResult.id}}</p>
     </header>
     <div class="sticky top-16 p-4 text-center">
       <input v-model="query" type="text" placeholder="Search for a song on Spotify">
       <button @click="search">Search</button>
     </div>
     <div class=" overflow-y-auto max-h-[calc(100vh-12rem)] bg-orange-300 w-[screen]"><!-- results wrapper-->
-      <div v-for="track in results" :key="track.id" class="w-full p-2 flex items-center gap-4 border cursor-pointer hover:bg-gray-100">
+      <div v-for="track in results" :key="track.id" class="w-full p-2 flex items-center gap-4 border cursor-pointer hover:bg-gray-100" @click="selectTrack(track)">
         <img  :src="track.album.images[2].url" alt="Album cover" class="w-16 h-16">
         <div>
           <h2>{{ track.name }}</h2>
           <p>{{ track.artists[0].name }}</p>
+          <p>{{track.album.name}}</p>
         </div>
       </div>