Utility function for anchor link creation

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

Hide file tree

Showing 3 changed files with 26 additions and 29 deletions.
diff --git 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
@@ -0,0 +1,2 @@
+.link-default {
+  text-decoration: none; }
diff --git a/src/components/Track/Track.scss b/src/components/Track/Track.scss
@@ -1 +1,3 @@
-
+.link-default {
+    text-decoration: none;
+}