From 21003138bf777c216cece7af3750ef6596cabb38 Mon Sep 17 00:00:00 2001
From: Daler Asrorov <asrorids@gmail.com>
Date: Sun, 29 Oct 2017 23:02:53 -0700
Subject: [PATCH] Utility function for anchor link creation

---
 src/components/Track/Info.js    | 49 ++++++++++++++-------------------
 src/components/Track/Track.css  |  2 ++
 src/components/Track/Track.scss |  4 ++-
 3 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/components/Track/Info.js b/src/components/Track/Info.js
index d4d6222..9d65909 100644
--- a/src/components/Track/Info.js
+++ b/src/components/Track/Info.js
@@ -4,6 +4,8 @@ import { withStyles } from 'material-ui/styles';
 import Paper from 'material-ui/Paper';
 import Typography from 'material-ui/Typography';
 
+import './Track.css';
+
 const styles = theme => ({
     root: theme.mixins.gutters({
         paddingTop: 6,
@@ -15,37 +17,28 @@ const styles = theme => ({
     }
 });
 
+const createTypographyLink = (content, type, href) => (
+    <Typography
+        className="link-default"
+        type={type}
+        component="a"
+        href={href}
+        target="__blank"
+    >
+        {content}
+    </Typography>
+);
+
 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>
+            {createTypographyLink(
+                props.trackName,
+                'subheading',
+                props.trackUrl
+            )}
+            {createTypographyLink(props.artistName, 'body1', props.artistUrl)}
+            {createTypographyLink(props.albumName, 'caption', props.albumUrl)}
         </div>
     );
 };
diff --git a/src/components/Track/Track.css b/src/components/Track/Track.css
index e69de29..eb0b96b 100644
--- a/src/components/Track/Track.css
+++ b/src/components/Track/Track.css
@@ -0,0 +1,2 @@
+.link-default {
+  text-decoration: none; }
diff --git a/src/components/Track/Track.scss b/src/components/Track/Track.scss
index 8b13789..89db204 100644
--- a/src/components/Track/Track.scss
+++ b/src/components/Track/Track.scss
@@ -1 +1,3 @@
-
+.link-default {
+    text-decoration: none;
+}