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,7 +12,10 @@ 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