From 1640045c3def60b303e20238563643064e3502ab Mon Sep 17 00:00:00 2001
From: Vituin <124085647+Vituin@users.noreply.github.com>
Date: Wed, 31 Jul 2024 11:22:37 +0200
Subject: [PATCH] done

---
 app.js                          | 47 ++++++++++++++++++++++++++++++++-
 package.json                    | 10 +++++--
 views/albums.hbs                | 13 +++++++++
 views/artist-search-results.hbs | 10 +++++++
 views/index.hbs                 |  8 ++++++
 views/layaout.hbs               | 16 +++++++++++
 views/tracks.hbs                |  0
 7 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 views/albums.hbs
 create mode 100644 views/artist-search-results.hbs
 create mode 100644 views/index.hbs
 create mode 100644 views/layaout.hbs
 create mode 100644 views/tracks.hbs

diff --git a/app.js b/app.js
index 5ea8eb4db..383e4a738 100644
--- a/app.js
+++ b/app.js
@@ -4,7 +4,7 @@ const express = require('express');
 const hbs = require('hbs');
 
 // require spotify-web-api-node package here:
-
+const SpotifyWebApi = require('spotify-web-api-node');
 const app = express();
 
 app.set('view engine', 'hbs');
@@ -12,7 +12,52 @@ app.set('views', __dirname + '/views');
 app.use(express.static(__dirname + '/public'));
 
 // setting the spotify-api goes here:
+const spotifyApi = new SpotifyWebApi({
+    clientId: process.env.CLIENT_ID,
+    clientSecret: process.env.CLIENT_SECRET
+});
 
+// Retrieve an access token
+spotifyApi
+    .clientCredentialsGrant()
+    .then(data => spotifyApi.setAccessToken(data.body['access_token']))
+    .catch(error => console.log('Something went wrong when retrieving an access token', error));
 // Our routes go here:
 
+app.get(`/`, (req, res) => {
+    res.render(`index`)
+})
+
+app.get(`/artist-search`, (req, res) => {
+    spotifyApi
+        .searchArtists(req.query.artist)
+        .then(data => {
+            console.log(`data of API recived`, data.body.artists.items)
+            res.render(`artist_search_results`, { artists: data.body.artists.items })
+        })
+        .catch((err) => console.log(`error searching`, err))
+})
+
+app.get('/albums/:artistId', (req, res,) => {
+    spotifyApi
+        .gethArtistAlbums(req, params, artistId,)
+        .then((data) => {
+            res.render(`albums`, { albums: data.body.items })
+        })
+        .catch((err) => {
+            console.log(`Error searching artist`, err)
+        })
+});
+
+app.get(`tracks/:albumID`, (req, res) => {
+    spotifyApi
+        .getAlbumTracks(req.params.albumId)
+        .then((data) => {
+            res.render(`tracks`, { tracks: data.body.items })
+        })
+        .catch((err) =>
+            console.log(`Error search tracks`, err)
+        )
+})
+
 app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
diff --git a/package.json b/package.json
index c9f4085ba..d6dcc9fc2 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "app.js",
   "scripts": {
-    "dev": "nodemon app.js",
+    "dev": "nodemon app.js,hbs",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -12,5 +12,11 @@
   "license": "ISC",
   "devDependencies": {
     "nodemon": "^2.0.2"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/views/albums.hbs b/views/albums.hbs
new file mode 100644
index 000000000..9282efe7c
--- /dev/null
+++ b/views/albums.hbs
@@ -0,0 +1,13 @@
+<h2>{{albums.0.artists.0.name}}</h2>
+
+<div>
+    {{#each albums}}
+    <div>
+        {{#if this.images.length}}
+        <img src="{{this.images.0.url}}" alt="">
+        {{/if}}
+        <p>{{this.name}}</p>
+        <button><a href="/tracks/{{this.id}}">Tracks</a></button>
+    </div>
+    {{/each}}
+</div>
\ No newline at end of file
diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs
new file mode 100644
index 000000000..4f31da644
--- /dev/null
+++ b/views/artist-search-results.hbs
@@ -0,0 +1,10 @@
+<h1>Welcome Search Spotify API</h1>
+
+{{#each artist}}
+<div>
+    {{#if this.images.length}}
+    <img src="{{this.images.0.url}}" alt="">
+    {{/if}}
+    <button><a href="/albums/{{this.id}}">View Albums</a></button>
+</div>
+{{/each}}
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
new file mode 100644
index 000000000..21c660636
--- /dev/null
+++ b/views/index.hbs
@@ -0,0 +1,8 @@
+<div>
+    <form action="/artist-search" , method="GET" , class="fñex,flex-col justify-center items-center"></form>
+
+    <input type="text" placeholder="Choose an artist" id="artist" name="artist"
+        class="border-2 border-black rounded p-2">
+
+    <button type="submit" class="bg-black text-white hover:bg-red-700 mt-3 p-3 rounded">Search</button>
+</div>
\ No newline at end of file
diff --git a/views/layaout.hbs b/views/layaout.hbs
new file mode 100644
index 000000000..0f8547967
--- /dev/null
+++ b/views/layaout.hbs
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/public/styles/style.css">
+    <title>Spotify API</title>
+</head>
+
+<body>
+    {{{body}}}
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/tracks.hbs b/views/tracks.hbs
new file mode 100644
index 000000000..e69de29bb