Combined search and added top 10 and bottom 10 lists to show on front page

webdev-prosjekt1/src/App.tsx

@@ -4,7 +4,6 @@ import { Button } from './components/Button';
 import { Searchbar } from './components/Searchbar';
 import filterIcon from './assets/filter.png';
 import musicWizImage from './assets/musicwiz.png';
-import { searchTrack, searchAlbum, searchArtist } from "./api/spotify"
 import logoImage from './assets/music-wiz-logo.png';
 
 function App() {

webdev-prosjekt1/src/api/spotify.ts

@@ -1,14 +1,40 @@
-import type { Album, Artist, Track } from "./types";
+import type { SearchResult, Track } from "./types";
 
 
 const BASE_URL = "https://api.spotify.com/v1"
 const CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID;
 const CLIENT_SECRET = import.meta.env.VITE_SPOTIFY_CLIENT_SECRET;
-const LIMIT = 10;
 
 let accessToken: string | null = null;
 let expiresAt = 0;
 
+export const TOP_10_IDS = [
+    "0AJ62x1CXjJf3VW25CeZXa", // Stairway To Heaven - Led Zeppelin
+    "5HNCy40Ni5BZJFw1TKzRsC", // Comfortably Numb - Pink Floyd
+    "32mwlJqE38D1qCoFwVjgpZ", // Bohemian Rhapsody - Queen
+    "2WfaOiMkCvy7F5fcp2zZ8L", // Take On Me - a-ha
+    "6TSP9oSbXONHk39GHvOSs3", // Telegraph Road - Dire Straits
+    "6plRwenssWRPbd5WIT1OLO", // Africa - TOTO
+    "5hxy15nCnKjhbe7sVjPtLT", // Viva La Vida - Coldplay
+    "2WWjIGZF6snSCqhRdNTPEj", // Beat It - Michael Jackson
+    "3dYD57lRAUcMHufyqn9GcI", // Take Me To Church - Hozier
+    "3Ttx1ky0ZYaVjXZWdcmwh5", // Blinding Lights - The Weeknd
+];
+
+export const BOTTOM_10_IDS = [
+    "63M8OHzd0lcVT517Pnon81", // Several Species of Small Furry Animals... - Pink Floyd
+    "1musbempyJAw5gfSKZHXP9", // Anxiety - Doechii
+    "4l62h4tiuUwn7eD6hxMlVQ", // It's Everyday Bro - Jake Paul ft. Team 10
+    "1KEdF3FNF9bKRCxN3KUMbx", // Friday - Rebecca Black
+    "5ZULALImTm80tzUbYQYM9d", // Dance Monkey - Tones And I
+    "5RIVoVdkDLEygELLCniZFr", // Watch Me (Whip / Nae Nae) - Silentó
+    "43ZyHQITOjhciSUUNPVRHc", // Gucci Gang - Lil Pump
+    "0VNDOpBbUYtSpCFY7HUA3D", // Baby - Justin Bieber ft. Ludacris
+    "5AUE3qJ6sCsgdUaaVK02uq", // Astronaut In The Ocean - Masked Wolf
+    "4t6iAuF1TDNqTis3S99iQa", // Mil etter mil - Jahn Teigen
+];
+
+
 async function getSpotifyToken() {
     const response = await fetch("https://accounts.spotify.com/api/token", {
         method: "POST",
@@ -40,10 +66,10 @@ async function getValidToken() {
 
 
 
-export async function searchArtist(query: string): Promise<Artist[]> {
+export async function search(query: string): Promise<SearchResult> {
     const token = await getValidToken();
 
-    const response = await fetch(`${BASE_URL}/search?q=${encodeURIComponent(query)}&type=artist&limit=${LIMIT}`, {
+    const response = await fetch(`${BASE_URL}/search?q=${encodeURIComponent(query)}&type=artist,track,album&market=NO&limit=10`, {
         method: "GET",
         headers: {
             "Authorization": `Bearer ${token}`
@@ -55,17 +81,21 @@ export async function searchArtist(query: string): Promise<Artist[]> {
     }
 
     const json = await response.json();
-    const artists: Artist[] = json.artists.items;
-    console.log(artists);
+    const newSearchResult = {
+        artists: json.artists.items,
+        tracks: json.tracks.items,
+        albums: json.albums.items,
+    }
+    const searchResult: SearchResult = newSearchResult;
+    console.log(searchResult);
 
-    return artists;
+    return searchResult;
 }
 
-
-export async function searchTrack(query: string): Promise<Track[]> {
+export async function fetchTrack(id: string): Promise<Track> {
     const token = await getValidToken();
 
-    const response = await fetch(`${BASE_URL}/search?q=${encodeURIComponent(query)}&type=track&limit=${LIMIT}`, {
+    const response = await fetch(`${BASE_URL}/tracks/${id}`, {
         method: "GET",
         headers: {
             "Authorization": `Bearer ${token}`
@@ -77,31 +107,21 @@ export async function searchTrack(query: string): Promise<Track[]> {
     }
 
     const json = await response.json();
-    const tracks: Track[] = json.tracks.items;
-    console.log(tracks);
+    const track: Track = json;
 
-    return tracks;
+    return track;
 }
 
 
-export async function searchAlbum(query: string): Promise<Album[]> {
-    const token = await getValidToken();
+export async function fetchTracks(ids: string[]): Promise<Track[]> {
+    let tracks: Track[] = [];
 
-    const response = await fetch(`${BASE_URL}/search?q=${encodeURIComponent(query)}&type=album&limit=${LIMIT}`, {
-        method: "GET",
-        headers: {
-            "Authorization": `Bearer ${token}`
-        }
-    });
-
-    if (!response.ok) {
-        throw new Error(`Spotify api error: ${response.status}`);
+    for (let index = 0; index < ids.length; index++) {
+        const track = await fetchTrack(ids[index]);
+        tracks.push(track);
     }
 
-    const json = await response.json();
-    const albums: Album[] = json.albums.items;
-    console.log(albums);
+    console.log(tracks);
 
-    return albums;
+    return tracks;
 }
-

webdev-prosjekt1/src/api/types.ts

@@ -1,5 +1,12 @@
 // This file defines api related data model.
 
+export type Image = {
+    url: string;
+    height: number;
+    width: number;
+}
+
+
 export type Artist = {
     id: number;
     name: string;
@@ -51,8 +58,9 @@ export type Album = {
     uri: string;
 };
 
-export type Image = {
-    url: string;
-    height: number;
-    width: number;
+
+export type SearchResult = {
+    artists: Artist[],
+    tracks: Track[],
+    albums: Album[]
 }