From 3a74bfcff6228d1acce8ee2093cd30e3656abb27 Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Thu, 7 Nov 2019 21:45:47 +0100
Subject: [PATCH] Split social links to its own component

---
 src/components/Home.js          | 38 ++++--------------------
 src/components/Navbar.js        | 33 ++++-----------------
 src/components/SocialLinks.js   | 52 +++++++++++++++++++++++++++++++++
 src/components/SocialLinks.scss | 32 ++++++++++++++++++++
 src/components/index.js         |  1 +
 5 files changed, 95 insertions(+), 61 deletions(-)
 create mode 100644 src/components/SocialLinks.js
 create mode 100644 src/components/SocialLinks.scss

diff --git a/src/components/Home.js b/src/components/Home.js
index 75b6aab..c48853f 100644
--- a/src/components/Home.js
+++ b/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>
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 935c526..4bc25ba 100644
--- a/src/components/Navbar.js
+++ b/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>
     )
   }
diff --git a/src/components/SocialLinks.js b/src/components/SocialLinks.js
new file mode 100644
index 0000000..0f3f881
--- /dev/null
+++ b/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>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/components/SocialLinks.scss b/src/components/SocialLinks.scss
new file mode 100644
index 0000000..138f359
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index bd0e334..26a5a09 100644
--- a/src/components/index.js
+++ b/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'