├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── components
└── layout.js
├── nodemon.json
├── package.json
├── pages
├── album.js
├── artist.js
├── index.js
└── search.js
├── server.js
├── server
└── routes
│ └── apiRoutes.js
└── static
└── styles.css
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "extends": [
3 | "eslint:recommended",
4 | "plugin:import/errors",
5 | "plugin:import/warnings"
6 | ],
7 | "parserOptions": {
8 | "ecmaVersion": 6,
9 | "sourceType": "module"
10 | },
11 | "env": {
12 | "es6": true,
13 | "browser": true,
14 | "node": true,
15 | "jquery": true
16 | },
17 | "rules": {
18 | "quotes": 0,
19 | "no-console": 1,
20 | "no-debugger": 1,
21 | "no-var": 1,
22 | "semi": [1, "always"],
23 | "no-trailing-spaces": 0,
24 | "eol-last": 0,
25 | "no-unused-vars": 0,
26 | "no-underscore-dangle": 0,
27 | "no-alert": 0,
28 | "no-lone-blocks": 0
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | node_modules
3 |
4 | # logs
5 | npm-debug.log
6 |
7 | # Next build
8 | .next
9 |
10 | # Nuxt generate
11 | dist
12 |
13 | .DS_Store
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Next.js + Express
2 |
3 | > Next.js project using Spotify API ([See demo](https://next-express-klelutfcnm.now.sh/)).
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # Dependencies
9 | $ npm install
10 |
11 | # Serve at at localhost:3000
12 | $ npm run dev
13 | ```
14 |
15 | ## Docs
16 |
17 | * [Next.js](https://zeit.co/blog/next)
18 | * [Now](https://zeit.co/now)
19 | * [React](https://facebook.github.io/react/)
20 | * [Express](http://expressjs.com/)
21 |
--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import Head from 'next/head';
3 |
4 | export default ({ children, title = 'Next.js / Express App' }) => (
5 |
6 |
7 |
{ title }
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
30 |
31 | { children }
32 |
33 |
34 |
37 |
38 |
39 |
40 |
41 |
Chargement...
);
56 | } else {
57 | return (
58 |
59 |
60 | - Recherche
61 | - {artist.name}
62 | - {album.name}
63 |
64 |
65 |
Pistes
66 | {artist.name} - {album.name}
67 |
68 |
69 |
70 |
})
71 |
72 |
73 |
74 | {_.map(album.tracks.items, (track) =>
75 | -
76 | {track.track_number}. {track.name} {this.asDuration(track.duration_ms)}
77 |
78 | )}
79 |
80 |
81 |
82 |
90 | { this.renderTracksList() }
91 |
92 |
93 | );
94 | }
95 | }
96 |
97 | export default AlbumPage;
98 |
--------------------------------------------------------------------------------
/pages/artist.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { If, Then, Else } from 'react-if';
3 | import Link from 'next/link';
4 |
5 | import axios from 'axios';
6 | import _ from 'lodash';
7 |
8 | import Layout from '../components/layout';
9 |
10 | class ArtistPage extends React.Component {
11 | static getInitialProps ({ query: { id } }) {
12 | return { id };
13 | }
14 | constructor(props) {
15 | super(props);
16 | this.state = {
17 | loading: true,
18 | artist: {},
19 | albums: [],
20 | limit: 20,
21 | offset: 0,
22 | total: 0
23 | };
24 | this.fetchData = this.fetchData.bind(this);
25 | }
26 | componentDidMount() {
27 | this.fetchData();
28 | }
29 | fetchData() {
30 | this.setState({loading: true}, () => {
31 | axios.get('/api/artist/' + this.props.id, {
32 | params: {
33 | limit: this.state.limit,
34 | offset: this.state.offset
35 | }
36 | })
37 | .then((response) => {
38 | const { artist, albums } = response.data;
39 | this.setState({
40 | artist: artist,
41 | albums: albums.items,
42 | limit: albums.limit,
43 | offset: albums.offset,
44 | total: albums.total,
45 | loading: false
46 | });
47 | })
48 | .catch((error) => {
49 | this.setState({loading: false});
50 | });
51 | });
52 | }
53 | renderAlbumsList() {
54 | const { loading, artist, albums, limit, total } = this.state;
55 | if (loading) {
56 | return (Chargement...
);
57 | } else {
58 | return (
59 |
60 |
61 | - Recherche
62 | - {artist.name}
63 |
64 |
65 |
Albums
66 | {artist.name}
67 |
68 |
69 |
70 | {_.map(albums, (album) =>
71 |
72 |
73 |
74 |
75 |
76 |
77 |
{album.name}
78 |
79 |
80 |
81 | )}
82 |
83 |
84 |
92 | { this.renderAlbumsList() }
93 |
94 |
95 | );
96 | }
97 | }
98 |
99 | export default ArtistPage;
100 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Link from 'next/link';
3 |
4 | import Layout from '../components/layout';
5 |
6 | export default () => {
7 | return (
8 |
9 |
10 |
11 |
Next.js + Express
12 |
A simple app using Spotify API
13 |
14 | Use it !
15 |
16 |
17 |
Recherche en cours...
);
86 | } else if (empty) {
87 | alert = (Aucun résultat correspondant à votre recherche { query }.
);
88 | }
89 | return (
90 |
91 | { alert }
92 |
93 | );
94 | }
95 | let pagination = '';
96 | const list = _.map(artists, (artist) => {
97 | return (
98 |
99 |
100 |
101 |
})
102 |
103 |
104 |
111 |
131 | { list }
132 | { pagination }
133 |
134 | );
135 | }
136 | render() {
137 | return (
138 |
139 |
140 |
141 |
Artistes
142 |
143 |
144 |
Rechercher un artiste Spotify
145 |
159 |
160 |