Set up connection to Spotify api

webdev-prosjekt1/.gitignore

@@ -16,6 +16,7 @@ dist-ssr
 .vscode/*
 !.vscode/extensions.json
 .idea
+.env
 .DS_Store
 *.suo
 *.ntvs*

webdev-prosjekt1/package.json

@@ -29,6 +29,6 @@
     "globals": "^17.11.0",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.67.0",
-    "vite": "^8.2.2"
+    "vite": "^8.3.0"
   }
 }

webdev-prosjekt1/src/App.tsx

@@ -3,6 +3,7 @@ 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 (

webdev-prosjekt1/src/api/spotify.ts

@@ -0,0 +1,107 @@
+import type { Album, Artist, 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;
+
+async function getSpotifyToken() {
+    const response = await fetch("https://accounts.spotify.com/api/token", {
+        method: "POST",
+        body: new URLSearchParams({
+            grant_type: "client_credentials",
+            client_id: CLIENT_ID,
+            client_secret: CLIENT_SECRET,
+        }),
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to get Spotify token: ${response.status}`);
+    }
+
+    return response.json();
+}
+
+async function getValidToken() {
+    if (accessToken && Date.now() < expiresAt) {
+        return accessToken;
+    }
+
+    const tokenData = await getSpotifyToken();
+
+    accessToken = tokenData.access_token;
+    expiresAt = Date.now() + tokenData.expires_in * 1000;
+
+    return accessToken;
+}
+
+
+
+export async function searchArtist(query: string): Promise<Artist[]> {
+    const token = await getValidToken();
+
+    const response = await fetch(`${BASE_URL}/search?q=${encodeURIComponent(query)}&type=artist&limit=${LIMIT}`, {
+        method: "GET",
+        headers: {
+            "Authorization": `Bearer ${token}`
+        }
+    });
+
+    if (!response.ok) {
+        throw new Error(`Spotify api error: ${response.status}`);
+    }
+
+    const json = await response.json();
+    const artists: Artist[] = json.artists.items;
+    console.log(artists);
+
+    return artists;
+}
+
+
+export async function searchTrack(query: string): Promise<Track[]> {
+    const token = await getValidToken();
+
+    const response = await fetch(`${BASE_URL}/search?q=${encodeURIComponent(query)}&type=track&limit=${LIMIT}`, {
+        method: "GET",
+        headers: {
+            "Authorization": `Bearer ${token}`
+        }
+    });
+
+    if (!response.ok) {
+        throw new Error(`Spotify api error: ${response.status}`);
+    }
+
+    const json = await response.json();
+    const tracks: Track[] = json.tracks.items;
+    console.log(tracks);
+
+    return tracks;
+}
+
+
+export async function searchAlbum(query: string): Promise<Album[]> {
+    const token = await getValidToken();
+
+    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}`);
+    }
+
+    const json = await response.json();
+    const albums: Album[] = json.albums.items;
+    console.log(albums);
+
+    return albums;
+}
+

webdev-prosjekt1/src/api/types.ts

@@ -0,0 +1,58 @@
+// This file defines api related data model.
+
+export type Artist = {
+    id: number;
+    name: string;
+    type: string;
+    href: string;
+    uri: string;
+    images: Image[];
+}
+
+
+export type Track = {
+    id: string;
+    name: string;
+    type: string;
+    href: string;
+    artists: {
+        id: number;
+        name: string;
+        type: string;
+        href: string;
+        uri: string;
+    }[];
+    album: Album;
+    duration_ms: number;
+    explicit: boolean;
+    track_number: number;
+    external_ids: {
+        isrc: string;
+    };
+    is_playable: boolean;
+    uri: string;
+}
+
+export type Album = {
+    id: string;
+    name: string;
+    album_type: "album" | "single" | "compilation";
+    artists: {
+        id: number;
+        name: string;
+        type: string;
+        href: string;
+        uri: string;
+    }[];
+    images: Image[];
+    release_date: string;
+    release_date_precision: "year" | "month" | "day";
+    total_tracks: number;
+    uri: string;
+};
+
+export type Image = {
+    url: string;
+    height: number;
+    width: number;
+}