Ale / BCN / FT

app.js

@@ -1,13 +1,17 @@
+'use strict';
+
 const createError = require('http-errors');
 const express = require('express');
 const path = require('path');
 const cookieParser = require('cookie-parser');
 const logger = require('morgan');
-const hbs = require('hbs');
 
-// require spotify-web-api-node package here:
+ const hbs = require('hbs');
 
-const indexRouter = require('./routes/index');
+ const indexRouter = require('./routes/index');
+ const artistRouter = require('./routes/artist');
+ const albumsRouter = require('./routes/albums');
+ const tracksRouter = require('./routes/tracks');
 
  const app = express();
 
@@ -22,21 +26,27 @@ app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 
  app.use('/', indexRouter);
+ app.use('/artist', artistRouter);
+ app.use('/albums', albumsRouter);
+ app.use('/tracks', tracksRouter);
 
  // catch 404 and forward to error handler
+// NOTE: requires a views/not-found.ejs template
 app.use((req, res, next) => {
-  next(createError(404));
+  res.status(404);
+  res.render('not-found');
 });
 
- // error handler
+// NOTE: requires a views/error.ejs template
 app.use((err, req, res, next) => {
-  // set locals, only providing error in development
-  res.locals.message = err.message;
-  res.locals.error = req.app.get('env') === 'development' ? err : {};
-
-   // render the error page
-  res.status(err.status || 500);
-  res.render('error');
+  // always log the error
+  console.error('ERROR', req.method, req.path, err);
+
+  // only render if the error ocurred before sending the response
+  if (!res.headersSent) {
+    res.status(500);
+    res.render('error');
+  }
 });
 
- module.exports = app;
+module.exports = app;

helpers/spotify.js

@@ -0,0 +1,19 @@
+const SpotifyWebApi = require('spotify-web-api-node');
+
+ const clientId = '5db9edca966a4673b5d8ce982ee4df1f';
+const clientSecret = '4c01abef01bd4c29b12a80d5557639f1';
+
+ const spotifyApi = new SpotifyWebApi({
+  clientId: clientId,
+  clientSecret: clientSecret
+});
+
+ spotifyApi.clientCredentialsGrant()
+  .then(data => {
+    spotifyApi.setAccessToken(data.body['access_token']);
+  })
+  .catch(error => {
+    console.log('Something went wrong when retrieving an access token', error);
+  });
+
+ module.exports = spotifyApi; 

public/stylesheets/style.css

@@ -24,6 +24,7 @@
  h1{
   color: var(--primary-color);
   text-align: center;
+  font-size: 50px;
 }
 
  a {
@@ -87,4 +88,55 @@
   display: flex;
   flex-direction: column;
   padding: 1rem 0.75rem;
-}
+  align-items: stretch;
+ }
+
+ .song-name{
+   grid-area: song;
+   text-align: start;
+ }
+
+ .audio-control{
+   grid-area: audio;
+ }
+
+ .grid-wrapper{
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: 
+    "song audio";
+    justify-items: center;
+    background-color: rgb(241, 242, 243);
+
+ }
+
+ .article-tracks{
+   margin: 0 10px; 
+   padding: 0;
+ }
+
+.grey-bg{
+  background-color: gray;
+  text-align: center;
+  color: white;
+}
+
+.grey-bg p,.button{
+  margin: 0;
+}
+
+a.button{
+  appearance: button;
+  color: white;
+  padding: 0.2rem 1rem;
+  font-weight: 600;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+  border-radius: 700px;
+  cursor: pointer;
+  background: var(--primary-color);
+  font-size: 10px;
+  text-decoration: none;
+}

routes/albums.js

@@ -0,0 +1,17 @@
+const express = require('express');
+const router = express.Router();
+
+ const spotifyApi = require('../helpers/spotify');
+
+ router.get('/:artistId', async (req, res, next) => {
+    const { artistId } = req.params;
+  try {
+   const albumsArray = await spotifyApi.getArtistAlbums(artistId);
+   console.log(albumsArray.body.items);
+   res.render('albums', { albums: albumsArray.body.items });
+ } catch (error) {
+   next(error);
+ }
+});
+
+module.exports = router; 

routes/artist.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const express = require('express');
+const router = express.Router();
+
+ const spotifyApi = require('../helpers/spotify');
+
+ //como pilla la instancia del fichero helper???
+
+ router.get('/', async (req, res, next) => {
+   const { artist } = req.query;
+  try {
+   const artistArray = await spotifyApi.searchArtists(artist);
+   res.render('artist', { artist: artistArray.body.artists.items });
+ } catch (error) {
+   next(error);
+ }
+});
+
+module.exports = router; 

routes/index.js

@@ -1,8 +1,10 @@
+'use strict';
+
 const express = require('express');
 const router = express.Router();
 
  router.get('/', (req, res, next) =>{
-  res.render('index', {title: 'Express'});
+  res.render('index');
 });
 
- module.exports = router;
+ module.exports = router; 

routes/tracks.js

@@ -0,0 +1,17 @@
+const express = require('express');
+const router = express.Router();
+
+ const spotifyApi = require('../helpers/spotify');
+
+ router.get('/:albumId', async (req, res, next) => {
+    const { albumId } = req.params;
+  try {
+   const tracksArray = await spotifyApi.getAlbumTracks(albumId);
+   console.log(tracksArray.body.items);
+   res.render('tracks', { tracks: tracksArray.body.items });
+ } catch (error) {
+   next(error);
+ }
+});
+
+module.exports = router; 

views/albums.hbs

@@ -0,0 +1,17 @@
+<section>
+  <h1>Albums</h1>
+  <ul class="cards">
+    {{#each albums}}
+      <article>
+        <li class="card">
+          {{!-- 'images.1' acces array images, index 1 --}}
+          <img src="{{this.images.1.url}}" alt="{{this.name}}">
+          <div class="grey-bg">
+            <p class="text-truncate">{{this.name}}</p>
+            <a class = "button" href="/tracks/{{this.id}}">View Tracks</a>
+          </div>
+        </li>
+      </article>
+    {{/each}}
+  </ul>
+</section> 

views/artist.hbs

@@ -0,0 +1,17 @@
+<section>
+  <h1>Artist</h1>
+  <ul class="cards">
+    {{#each artist}}
+      <article>
+        <li class="card">
+          {{!-- 'images.1' acces array images, index 1 --}}
+          <img src="{{this.images.1.url}}" alt="{{this.name}}" />
+          <div class="grey-bg">
+            <p class="text-truncate">{{this.name}}</p>
+            <a class = "button" href="/albums/{{this.id}}">View Albums</a>
+          </div>
+        </li>
+      </article>
+    {{/each}}
+  </ul>
+</section> 

views/index.hbs

@@ -1 +1,10 @@
-<h1>Welcome to {{title}}</h1>
+<section>
+  <h1>Spotify</h1>
+  {{!-- El atributo 'action' define el lugar donde los datos se envian --}}
+  <article>
+    <form class="search-box" action="/artist" method="GET">
+      <input class= "search-input" type="text" name="artist" placeholder="Artist">
+      <button class ="btn" type="submit">Search</button>
+    </form>
+  </article>
+</section> 

views/layout.hbs

@@ -5,6 +5,7 @@
     <link rel='stylesheet' href='/stylesheets/style.css' />
   </head>
   <body>
+    <div class="bg-image"></div>
     <main class="container">
       {{{body}}}
     </main>

views/not-found.hbs

@@ -0,0 +1 @@
+<h1>500 Server Error</h1>

views/tracks.hbs

@@ -0,0 +1,16 @@
+
+<section>
+  <h1>Tracks</h1>
+  <ul>
+    {{#each tracks}}
+    <article class="article-tracks">
+      <li>
+        <div class="grid-wrapper">
+            <p class = "song-name">{{this.name}}</p>
+            <audio class = "audio-controls" src="{{this.preview_url}}" controls></audio>
+        </div>
+      </li>
+    </article>
+    {{/each}}
+  </ul>
+</section>