Albums page (ongoing)

src/components/Album.jsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react'
+import './Artist.scss'
+
+function Album({ props, callback }) {
+  let [rate, setRate] = useState([])
+
+  const openAlbums = () => {
+    callback(props.id)
+  }
+
+  return (
+    <div className='artist' onClick={openAlbums}>
+      <div className='picture'>
+        {props.images.length > 0 && (
+          <img src={props.images[0].url} />
+        )}
+      </div>
+
+      <div className='details'>
+        <div className='text'>
+          <h2>{props.name}</h2>
+        </div>
+
+      </div>
+
+    </div>
+  )
+}
+
+export default Album

src/components/Artist.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-// import Star from './Star.jsx'
 import './Artist.scss'
 
 const star = (

src/components/Router.jsx

@@ -12,6 +12,9 @@ history.listen(() => {
 export default function Router() {
   let [artistId, setArtistId] = useState(null)
   let [searchTerm, setSearchTerm] = useState(null)
+  let [spotifyToken, setSpotifyToken] = useState(null)
+
+  // Callbacks
   
   let idCallback = id => {
     setArtistId(id)
@@ -21,18 +24,30 @@ export default function Router() {
     setSearchTerm(term)
   }
 
+  let tokenCallback = token => {
+    setSpotifyToken(token)
+  }
+
+  // Objects to be passed as props
+  
   let artistProps = {
     idCb: idCallback,
     searchCb: termCallback,
+    tokenCb: tokenCallback,
     searchTerm: searchTerm
   }
 
+  let albumProps = {
+    id: artistId,
+    token: spotifyToken
+  }
+
   return (
     <ReactRouter history={history}>
       <Switch>
         <Route exact path='/' render={() => <Login />} />
         <Route exact path='/artist-search' render={() => <ArtistSearch props={artistProps} />} />
-        <Route exact path='/albums' render={() => <Albums props={artistId} />} />
+        <Route exact path='/albums' render={() => <Albums props={albumProps} />} />
       </Switch>
     </ReactRouter>
   )

src/components/Star.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-
-function Star() {
-  return (
-    <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
-      <g>
-        <title>Layer 1</title>
-        <polygon stroke="#b6b6b6" points="320.0000457763672,5.9074859619140625 380.8490447998047,180.9623260498047 566.1394195556641,184.73826599121094 418.4558563232422,296.70404052734375 472.12254333496094,474.092529296875 320.0000457763672,368.236328125 167.8775177001953,474.092529296875 221.54429626464844,296.70404052734375 73.860595703125,184.73826599121094 259.15098571777344,180.9623260498047 320.0000457763672,5.9074859619140625 380.8490447998047,180.9623260498047 " strokeWidth="5" strokecolor="#000000" fill="#d7d7d7" orient="point" r2="47.37444" r="118.43611" point="5" shape="star" id="svg_1" cy="137.5" cx="221"/>
-      </g>
-    </svg>
-  )
-}
-
-export default Star

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')