Added logic for popularity

DalerAsrorov · Oct 30, 2017 · bde3645 · bde3645
1 parent 2100313
commit bde3645
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/components/Track/Info.js b/src/components/Track/Info.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
-import Paper from 'material-ui/Paper';
 import Typography from 'material-ui/Typography';
+import Chip from 'material-ui/Chip';
 
 import './Track.css';
 
@@ -14,7 +14,9 @@ const styles = theme => ({
 
     link: {
         'text-decoration': 'none'
-    }
+    },
+
+    popolarity: {}
 });
 
 const createTypographyLink = (content, type, href) => (
@@ -30,6 +32,14 @@ const createTypographyLink = (content, type, href) => (
 );
 
 const Info = props => {
+    let popularityChip;
+
+    if (props.isPopular) {
+        popularityChip = (
+            <Chip label="Popular" className={props.classes.popularity} />
+        );
+    }
+
     return (
         <div className={props.classes.root}>
             {createTypographyLink(
@@ -39,8 +49,19 @@ const Info = props => {
             )}
             {createTypographyLink(props.artistName, 'body1', props.artistUrl)}
             {createTypographyLink(props.albumName, 'caption', props.albumUrl)}
+            {popularityChip}
         </div>
     );
 };
 
+Info.propTypes = {
+    trackName: PropTypes.string.isRequired,
+    trackUrl: PropTypes.string.isRequired,
+    artistName: PropTypes.string.isRequired,
+    artistUrl: PropTypes.string.isRequired,
+    albumName: PropTypes.string.isRequired,
+    albumUrl: PropTypes.string.isRequired,
+    isPopular: PropTypes.bool.isRequired
+};
+
 export default withStyles(styles)(Info);
diff --git a/src/components/Track/index.js b/src/components/Track/index.js
@@ -48,15 +48,16 @@ class Track extends PureComponent {
             artists,
             name: trackName,
             album: { name: albumName, external_urls: { spotify: albumUrl } },
-            external_urls: { spotify: trackUrl }
+            external_urls: { spotify: trackUrl },
+            popularity
         } = track;
 
         const {
             name: artistName,
             external_urls: { spotify: artistUrl }
         } = head(artists);
 
-        const tempComp = () => <p>Hello</p>;
+        console.log('popularity', popularity);
 
         return (
             <ListItem divider>
@@ -76,6 +77,7 @@ class Track extends PureComponent {
                             artistUrl={artistUrl}
                             albumName={albumName}
                             albumUrl={albumUrl}
+                            isPopular={popularity >= 70}
                         />
                     }
                 />