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 = (
+
+ );
+ }
+
return (
{createTypographyLink(
@@ -39,8 +49,19 @@ const Info = props => {
)}
{createTypographyLink(props.artistName, 'body1', props.artistUrl)}
{createTypographyLink(props.albumName, 'caption', props.albumUrl)}
+ {popularityChip}
);
};
+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 = () => Hello
;
+ console.log('popularity', popularity);
return (
@@ -76,6 +77,7 @@ class Track extends PureComponent {
artistUrl={artistUrl}
albumName={albumName}
albumUrl={albumUrl}
+ isPopular={popularity >= 70}
/>
}
/>