Artist component (ongoing)

package.json

@@ -9,12 +9,14 @@
     "cookie-parser": "^1.4.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "node-sass": "^4.13.0",
     "querystring": "^0.2.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
-    "request": "^2.88.0"
+    "request": "^2.88.0",
+    "spotify-web-api-js": "^1.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Artist.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+function Artist({ props }) {
+  return (
+    <div className='artist'>
+      {props.images.length > 0 && (
+        <img src={props.images[0].url} style={{height:150}} />
+      )}
+      <p>{props.name}</p>
+      <p>Popularity: {Math.floor(props.popularity/20)}</p>
+      <p>Followers: {props.followers.total}</p>
+      <p>Id: {props.id}</p>
+    </div>
+  )
+}
+
+export default Artist

src/views/ArtistSearch.jsx

@@ -1,17 +1,31 @@
 import React, { useState, useEffect } from 'react'
+import SpotifyWebApi from 'spotify-web-api-js'
+import Artist from '../components/Artist'
+import './ArtistSearch.scss'
+
+const spotifyApi = new SpotifyWebApi()
 
 function ArtistSearch() {
-  let [token, setToken] = useState(null)
   let [search, setSearch] = useState(null)
+  let [artists, setArtists] = useState(null)
 
   useEffect(() => {
     const search = window.location.search
     const params = new URLSearchParams(search)
-    setToken(params.get('access_token'))
+    const token = params.get('access_token')
+
+    spotifyApi.setAccessToken(token)
   }, [])
 
   useEffect(() => {
-    console.log(search)
+    if (search && search.length > 4) {
+      spotifyApi.searchArtists(search)
+        .then(function(data) {
+          setArtists(data.artists.items)
+        }, function(err) {
+          console.error(err);
+        })
+    }
   }, [search])
 
   const handleChange = e => {
@@ -23,6 +37,19 @@ function ArtistSearch() {
       <h1>Artist search</h1>
 
       <input placeholder='Search for an artist' onChange={handleChange} />
+
+      {artists && (
+        <div className='artists'>
+          <ul className='list'>
+            {artists.map((artist, index) => (
+              <li className='list-item' key={index}>
+                <Artist props={artist} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
     </div>
   )
 }

src/views/ArtistSearch.scss

@@ -0,0 +1,16 @@
+.artist-search {
+  h1 {
+    text-align: center;
+  }
+
+  ul {
+		list-style-type: none;
+		max-width: 60em;
+		margin: auto;
+		padding: 0;
+
+		li {
+			display: inline-block;
+		}
+	}
+}