Created an Info component for track info

src/components/Track/Info.js

@@ -0,0 +1,53 @@
+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';
+
+const styles = theme => ({
+    root: theme.mixins.gutters({
+        paddingTop: 6,
+        paddingBottom: 6
+    }),
+
+    link: {
+        'text-decoration': 'none'
+    }
+});
+
+const Info = props => {
+    return (
+        <div className={props.classes.root}>
+            <Typography
+                type="subheading"
+                component="a"
+                href={props.trackUrl}
+                target="__blank"
+                className={props.classes.link}
+            >
+                {props.trackName}
+            </Typography>
+            <Typography
+                type="body1"
+                component="a"
+                href={props.artistUrl}
+                target="__blank"
+                className={props.classes.link}
+            >
+                {props.artistName}
+            </Typography>
+            <Typography
+                type="caption"
+                component="a"
+                href={props.albumUrl}
+                target="__blank"
+                className={props.classes.link}
+                noWrap
+            >
+                {props.albumName}
+            </Typography>
+        </div>
+    );
+};
+
+export default withStyles(styles)(Info);

src/components/Track/index.js

@@ -9,20 +9,13 @@ import MaterialList, {
 import { withStyles } from 'material-ui/styles';
 import { head } from 'ramda';
 
-const styles = theme => {
-    console.log('theme props', theme);
+import Info from './Info';
 
-    return {
-        checkmark: {
-            color: theme.palette.grey[600]
-        }
-    };
-};
-// const styles = theme => ({
-//     checkmark: {
-//         color: 'red'
-//     }
-// });
+const styles = theme => ({
+    checkmark: {
+        color: theme.palette.grey[600]
+    }
+});
 
 class Track extends PureComponent {
     static propType = {
@@ -50,19 +43,42 @@ class Track extends PureComponent {
         const { isAdded } = this.state;
         const { track, classes } = this.props;
 
-        const { id: trackID, artists, album, name: trackName } = track;
-        const { name: artistName, href: artistUrl } = head(artists);
+        const {
+            id: trackID,
+            artists,
+            name: trackName,
+            album: { name: albumName, external_urls: { spotify: albumUrl } },
+            external_urls: { spotify: trackUrl }
+        } = track;
+
+        const {
+            name: artistName,
+            external_urls: { spotify: artistUrl }
+        } = head(artists);
+
+        const tempComp = () => <p>Hello</p>;
 
         return (
-            <ListItem>
+            <ListItem divider>
                 <ListItemIcon>
                     <Checkbox
                         className={classes.checkmark}
                         onClick={this._handleChecked}
                         checked={isAdded}
                     />
                 </ListItemIcon>
-                <ListItemText inset primary={artistName} />
+                <ListItemText
+                    primary={
+                        <Info
+                            trackName={trackName}
+                            trackUrl={trackUrl}
+                            artistName={artistName}
+                            artistUrl={artistUrl}
+                            albumName={albumName}
+                            albumUrl={albumUrl}
+                        />
+                    }
+                />
             </ListItem>
         );
     }