Split social links to its own component

src/components/Home.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
+import { SocialLinks } from '.'
 import '../stylesheets/globals.scss'
 import styles from './Home.scss'
 
@@ -9,51 +10,22 @@ export default class Home extends Component {
     config: PropTypes.object.isRequired
   }
 
-  render () {
-    let key = 0
-    const objKeys = Object.keys(this.props.config.social)
-
-    const socialLinks = objKeys.map((val) => {
-      const link = (
-        <li key={key}>
-          <a href={this.props.config.social[val]} role="link">
-            <i className={`fa fa-${val} fa-3x`} aria-hidden="true" />
-            <span className="sr-only">{val}</span>
-          </a>
-        </li>
-      )
-      key += 1
-      return link
-    })
-
-    socialLinks.push(
-      <li key={key}>
-        <a href={`mailto:${this.props.config.email}`} role="link">
-          <i className="fa fa-envelope-o fa-3x" aria-hidden="true" />
-          <span className="sr-only">e-mail</span>
-        </a>
-      </li>
-    )
-
+  render () {  
     return (
       <div id={styles.coverPage} className={styles.coverPageFull} role="region" aria-label="Home page">
         <div id={styles.coverPageContent}>
           <div role="heading" aria-level="1">
             <h1 id={styles.coverPageName}><Link to="/">{ this.props.config.name }</Link></h1>
           </div>
-          <div className={styles.social} role="list">
-            <ul>
-              {socialLinks}
-            </ul>
-          </div>
+          <SocialLinks config={ this.props.config }/>
           <div className={styles.menuLinks} role="navigation">
             <ul>
-              <li>
+              <li key="about">
                 <a href="#about">
                   About
                 </a>
               </li>
-              <li>
+              <li key="blog">
                 <span>/ <a href="#blog">Blog</a></span>
               </li>
             </ul>

src/components/Navbar.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { SocialLinks } from '.'
 import '../stylesheets/globals.scss'
 import styles from './Navbar.scss'
 
@@ -10,52 +11,28 @@ export default class Navbar extends Component {
   }
 
   render () {
-    let key = 0
-    const objKeys = Object.keys(this.props.config.social)
-
-    const socialLinks = objKeys.map((val) => {
-      const link = (
-        <a key={key} href={this.props.config.social[val]}>
-          <i className={`fa fa-${val}`} aria-hidden="true" />
-          <span className="sr-only">{val}</span>
-        </a>
-      )
-
-      key += 1
-      return link
-    })
-
-    socialLinks.push(
-      <a key={key} href={`mailto:${this.props.config.email}`}>
-        <i className="fa fa-envelope-o" aria-hidden="true" />
-        <span className="sr-only">e-mail</span>
-      </a>
-    )
-
     return (
       <div className={styles.navbar} role="navigation">
         <div className={styles.links}>
           <ul>
-            <li>
+            <li key="index">
               <a href='/'>
                 <span className={styles.nameLink}>{this.props.config.name} |</span>
               </a>
             </li>
-            <li>
+            <li key="about">
               <a href='/#about'>
                 <span>About</span>
               </a>
             </li>
-            <li>
+            <li key="blog">
               <a href='/#blog'>
                 <span>Blog</span>
               </a>
             </li>
           </ul>
         </div>
-        <div className={styles.social}>
-          {socialLinks}
-        </div>
+        <SocialLinks config={ this.props.config } home={ false }/>
       </div>
     )
   }

src/components/SocialLinks.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import '../stylesheets/globals.scss'
+import styles from './SocialLinks.scss'
+
+export default class SocialLinks extends Component {
+  static propTypes = {
+    config: PropTypes.object.isRequired,
+    home: PropTypes.bool
+  }
+
+  static defaultProps = {
+    home: true
+  }
+
+  render () {
+    let key = 0
+    const objKeys = Object.keys(this.props.config.social)
+
+    const socialLinks = objKeys.map((val) => {
+      const link = (
+        <li key={key}>
+          <a href={this.props.config.social[val]} role="link">
+            <i className={`fa fa-${val} ${this.props.home ? 'fa-3x': ''}`} aria-hidden="true" />
+            <span className="sr-only">{val}</span>
+          </a>
+        </li>
+      )
+      key += 1
+      return link
+    })
+
+    socialLinks.push(
+      <li key={key}>
+        <a href={`mailto:${this.props.config.email}`} role="link">
+          <i className={`fa fa-envelope-o ${this.props.home ? 'fa-3x': ''}`} aria-hidden="true" />
+          <span className="sr-only">e-mail</span>
+        </a>
+      </li>
+    )
+
+    const className = this.props.home ? styles['social-home'] : styles['social-navbar']
+
+    return (
+        <div className={className} role="list">
+            <ul>
+            {socialLinks}
+            </ul>
+        </div>
+    )
+  }
+}

src/components/SocialLinks.scss

@@ -0,0 +1,32 @@
+@import "../stylesheets/variables.scss";
+
+.social-home {
+  text-align: center;
+  ul {
+    list-style: none;
+    li {
+      display: inline;
+    }
+  }
+}
+
+.social-navbar {
+  float: right;
+  vertical-align: bottom;
+}
+
+.social-home, .social-navbar {
+  ul {
+    list-style: none;
+    li {
+      display: inline;
+    }
+  }
+  a {
+    color: $white;
+    text-shadow: $black 0px 0px 2px;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    margin: 10px;
+  }
+}

src/components/index.js

@@ -9,3 +9,4 @@ export { default as Header } from './Header'
 export { default as Wrapper } from './Wrapper'
 export { default as Navbar } from './Navbar'
 export { default as App } from './App'
+export { default as SocialLinks } from './SocialLinks'