From 3e341140e6b7ea37ab049c2f0882ab4b1f80e5ff Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 14 Apr 2019 20:14:40 +0200
Subject: [PATCH] remove icon duplication

---
 src/components/atoms/LinkIcon.jsx      |  9 +++++++
 src/components/atoms/LinkIcon.test.jsx |  9 +++++++
 src/components/molecules/Networks.jsx  | 33 ++------------------------
 3 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/components/atoms/LinkIcon.jsx b/src/components/atoms/LinkIcon.jsx
index af1c407..9acfad8 100644
--- a/src/components/atoms/LinkIcon.jsx
+++ b/src/components/atoms/LinkIcon.jsx
@@ -7,6 +7,9 @@ import { ReactComponent as Info } from '../../images/info.svg'
 import { ReactComponent as Styleguide } from '../../images/styleguide.svg'
 import { ReactComponent as GitHub } from '../../images/github.svg'
 import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
+import { ReactComponent as Email } from '../../images/email.svg'
+import { ReactComponent as Blog } from '../../images/blog.svg'
+import { ReactComponent as Twitter } from '../../images/twitter.svg'
 
 const LinkIcon = ({ title, type, ...props }) => {
   let typeOrTitle = type ? type : title
@@ -30,6 +33,12 @@ const LinkIcon = ({ title, type, ...props }) => {
     case 'styleguide':
     case 'Styleguide':
       return <Styleguide {...props} />
+    case 'Email':
+      return <Email {...props} />
+    case 'Blog':
+      return <Blog {...props} />
+    case 'Twitter':
+      return <Twitter {...props} />
     default:
       return null
   }
diff --git a/src/components/atoms/LinkIcon.test.jsx b/src/components/atoms/LinkIcon.test.jsx
index 5d33c62..1971160 100644
--- a/src/components/atoms/LinkIcon.test.jsx
+++ b/src/components/atoms/LinkIcon.test.jsx
@@ -24,6 +24,15 @@ describe('LinkIcon', () => {
 
     rerender(<LinkIcon type={'styleguide'} />)
     expect(container.firstChild.nodeName).toBe('svg')
+
+    rerender(<LinkIcon title={'Email'} />)
+    expect(container.firstChild.nodeName).toBe('svg')
+
+    rerender(<LinkIcon title={'Blog'} />)
+    expect(container.firstChild.nodeName).toBe('svg')
+
+    rerender(<LinkIcon title={'Twitter'} />)
+    expect(container.firstChild.nodeName).toBe('svg')
   })
 
   it('does not render with unknown type', () => {
diff --git a/src/components/molecules/Networks.jsx b/src/components/molecules/Networks.jsx
index f08325e..cfa6332 100644
--- a/src/components/molecules/Networks.jsx
+++ b/src/components/molecules/Networks.jsx
@@ -4,13 +4,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import posed from 'react-pose'
 import classNames from 'classnames'
 import { moveInTop } from '../atoms/Transitions'
-
-import { ReactComponent as Email } from '../../images/email.svg'
-import { ReactComponent as Blog } from '../../images/blog.svg'
-import { ReactComponent as Twitter } from '../../images/twitter.svg'
-import { ReactComponent as GitHub } from '../../images/github.svg'
-import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
-
+import LinkIcon from '../atoms/LinkIcon'
 import icons from '../atoms/Icons.module.scss'
 import styles from './Networks.module.scss'
 
@@ -28,29 +22,6 @@ const query = graphql`
   }
 `
 
-class NetworkIcon extends PureComponent {
-  static propTypes = {
-    title: PropTypes.string
-  }
-
-  render() {
-    switch (this.props.title) {
-      case 'Email':
-        return <Email {...this.props} />
-      case 'Blog':
-        return <Blog {...this.props} />
-      case 'Twitter':
-        return <Twitter {...this.props} />
-      case 'GitHub':
-        return <GitHub {...this.props} />
-      case 'Dribbble':
-        return <Dribbble {...this.props} />
-      default:
-        return null
-    }
-  }
-}
-
 export default class Networks extends PureComponent {
   static propTypes = {
     minimal: PropTypes.bool,
@@ -86,7 +57,7 @@ export default class Networks extends PureComponent {
                     href={meta.social[key]}
                     key={i}
                   >
-                    <NetworkIcon title={key} className={icons.icon} />
+                    <LinkIcon title={key} className={icons.icon} />
                     <span className={styles.title}>{key}</span>
                   </a>
                 ))}