From a0755e32e777624dccafad68babd8ba1d9f958cc Mon Sep 17 00:00:00 2001 From: Kristoffer Fredrik Dahle Melen Date: Sun, 13 Sep 2026 14:03:20 +0200 Subject: [PATCH] Combined search and added top 10 and bottom 10 lists to show on front page. Co-authored-by: martiasu --- webdev-prosjekt1/src/App.tsx | 2 +- webdev-prosjekt1/src/api/spotify.ts | 78 ++++++++++++++++++----------- webdev-prosjekt1/src/api/types.ts | 16 ++++-- 3 files changed, 62 insertions(+), 34 deletions(-) diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx index 2493cb3..295ea2b 100644 --- a/webdev-prosjekt1/src/App.tsx +++ b/webdev-prosjekt1/src/App.tsx @@ -3,11 +3,11 @@ 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" function App() { return ( <> + {/* {console.log(fetchTracks(BOTTOM_10_IDS))} */}
diff --git a/webdev-prosjekt1/src/api/spotify.ts b/webdev-prosjekt1/src/api/spotify.ts index a85d102..580b7ee 100644 --- a/webdev-prosjekt1/src/api/spotify.ts +++ b/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 { +export async function search(query: string): Promise { 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 { } 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 { +export async function fetchTrack(id: string): Promise { 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 { } 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 { - const token = await getValidToken(); +export async function fetchTracks(ids: string[]): Promise { + 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; } - diff --git a/webdev-prosjekt1/src/api/types.ts b/webdev-prosjekt1/src/api/types.ts index e2cad8a..816cb1c 100644 --- a/webdev-prosjekt1/src/api/types.ts +++ b/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[] } \ No newline at end of file