Challenge and Code: Artist Component

15Dkatz · Oct 20, 2022 · 829e344 · 829e344
1 parent 11e26bc
commit 829e344
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 7 deletions.
diff --git a/music-master/dist/index.975ef6c8.js b/music-master/dist/index.975ef6c8.js
diff --git a/music-master/dist/index.975ef6c8.js.map b/music-master/dist/index.975ef6c8.js.map
diff --git a/music-master/src/components/App.js b/music-master/src/components/App.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Artist from './Artist';
 
 const API_ADDRESS = 'https://spotify-api-wrapper.appspot.com';
 
@@ -46,6 +47,7 @@ class App extends Component {
           placeholder='Search for an artist'
         />
         <button onClick={this.searchArtist}>Search</button>
+        <Artist artist={this.state.artist} />
       </div>
     ); 
   }

diff --git a/music-master/src/components/Artist.js b/music-master/src/components/Artist.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Artist = ({ artist }) => {
+  if (!artist) return null;
+
+  const { images, name, followers, genres } = artist;
+
+  return (
+    <div>
+      <h3>{name}</h3>
+      <p>{followers.total} followers</p>
+      <p>{genres.join(',')}</p>
+      <img
+        src={images[0] && images[0].url}
+        alt='artist-profile'
+        style={{
+          width: 200,
+          height: 200,
+          borderRadius: 100,
+          objectFit: 'cover'
+        }}
+      />
+    </div>
+  );
+}
+
+export default Artist;