diff --git a/app.js b/app.js index 95f5da10c..6190e7683 100644 --- a/app.js +++ b/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; \ No newline at end of file +module.exports = app; \ No newline at end of file diff --git a/helpers/spotify.js b/helpers/spotify.js new file mode 100644 index 000000000..3d613a605 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/public/images/11.jpg b/public/images/11.jpg new file mode 100644 index 000000000..efcc77085 Binary files /dev/null and b/public/images/11.jpg differ diff --git a/public/images/photo-1552772279-24fa4a454544.jpeg b/public/images/photo-1552772279-24fa4a454544.jpeg new file mode 100644 index 000000000..541b9599f Binary files /dev/null and b/public/images/photo-1552772279-24fa4a454544.jpeg differ diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index d0c398ec3..fc3e3dc5e 100644 --- a/public/stylesheets/style.css +++ b/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; -} \ No newline at end of file + 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; +} diff --git a/routes/albums.js b/routes/albums.js new file mode 100644 index 000000000..a505cb1c0 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/routes/artist.js b/routes/artist.js new file mode 100644 index 000000000..07ede6d89 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/routes/index.js b/routes/index.js index 01aa75e43..090bc8f13 100644 --- a/routes/index.js +++ b/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; \ No newline at end of file + module.exports = router; \ No newline at end of file diff --git a/routes/tracks.js b/routes/tracks.js new file mode 100644 index 000000000..adec9a304 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/views/albums.hbs b/views/albums.hbs new file mode 100644 index 000000000..c652f5b57 --- /dev/null +++ b/views/albums.hbs @@ -0,0 +1,17 @@ +
+

Albums

+ +
\ No newline at end of file diff --git a/views/artist.hbs b/views/artist.hbs new file mode 100644 index 000000000..712c6fcbd --- /dev/null +++ b/views/artist.hbs @@ -0,0 +1,17 @@ +
+

Artist

+ +
\ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index 632605f03..4468b4238 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -1 +1,10 @@ -

Welcome to {{title}}

\ No newline at end of file +
+

Spotify

+ {{!-- El atributo 'action' define el lugar donde los datos se envian --}} +
+
+ + +
+
+
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs index 4315f2c3b..1baac3fb2 100644 --- a/views/layout.hbs +++ b/views/layout.hbs @@ -5,6 +5,7 @@ +
{{{body}}}
diff --git a/views/not-found.hbs b/views/not-found.hbs new file mode 100644 index 000000000..4144f40ce --- /dev/null +++ b/views/not-found.hbs @@ -0,0 +1 @@ +

500 Server Error

\ No newline at end of file diff --git a/views/tracks.hbs b/views/tracks.hbs new file mode 100644 index 000000000..fbea2bc99 --- /dev/null +++ b/views/tracks.hbs @@ -0,0 +1,16 @@ + +
+

Tracks

+ +
\ No newline at end of file