Albums page (ongoing)

src/views/Albums.jsx

@@ -1,11 +1,43 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import SpotifyWebApi from 'spotify-web-api-js'
+import Album from '../components/Album'
+import './ArtistSearch.scss'
+
+const spotifyApi = new SpotifyWebApi()
 
 function Albums({ props }) {
+  let [albums, setAlbums] = useState([])
+
+  spotifyApi.setAccessToken(props.token)
+
+  useEffect(() => {
+    spotifyApi.getArtistAlbums(props.id)
+      .then(function(data) {
+        setAlbums(data.items)
+      }, function(err) {
+        console.error(err)
+      })
+  }, [props])
+
+  const detailsCallback = id => {
+    console.log('Navigate to', id)
+  }
+
   return (
     <div className='albums'>
       <h1>Albums</h1>
 
-      <p>{props}</p>
+      {albums && (
+        <div className='albums-list'>
+          <ul className='list'>
+            {albums.map((album, index) => (
+              <li className='list-item' key={index}>
+                <Album props={album} callback={detailsCallback} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
     </div>
   )
 }

src/views/ArtistSearch.jsx

@@ -9,15 +9,19 @@ const spotifyApi = new SpotifyWebApi()
 function ArtistSearch({ props }) {
   let [search, setSearch] = useState(null)
   let [artists, setArtists] = useState(null)
+  let [token, setToken] = useState(null)
 
+  // Retrieve access token from url
   useEffect(() => {
     const search = window.location.search
     const params = new URLSearchParams(search)
     const token = params.get('access_token')
 
+    setToken(token)
     spotifyApi.setAccessToken(token)
   }, [])
 
+  // Search artists
   useEffect(() => {
     if (search && search.length > 4) {
       spotifyApi.searchArtists(search)
@@ -29,15 +33,23 @@ function ArtistSearch({ props }) {
     }
   }, [search])
 
+  // Load search term from props
   useEffect(() => {
     setSearch(props.searchTerm)
   }, [props.searchTerm])
 
+  // Save token in Router state
+  useEffect(() => {
+    props.tokenCb(token)
+  }, [props, token])
+
+  // Save search term
   const handleChange = e => {
     setSearch(e.currentTarget.value)
     props.searchCb(e.currentTarget.value)
   }
 
+  // Save artist id in Router state
   const albumsCallback = id => {
     props.idCb(id)
     history.push('/albums')