From bde364552127b8164caa05af40be94f73e0292d1 Mon Sep 17 00:00:00 2001
From: Daler Asrorov <asrorids@gmail.com>
Date: Sun, 29 Oct 2017 23:25:19 -0700
Subject: [PATCH] Added logic for popularity

---
 src/components/Track/Info.js  | 25 +++++++++++++++++++++++--
 src/components/Track/index.js |  6 ++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/Track/Info.js b/src/components/Track/Info.js
index 9d65909..8cee3d3 100644
--- 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
index f7e6f77..f90fda6 100644
--- a/src/components/Track/index.js
+++ b/src/components/Track/index.js
@@ -48,7 +48,8 @@ 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 {
@@ -56,7 +57,7 @@ class Track extends PureComponent {
             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}
                         />
                     }
                 />