Pass config as prop

src/components/Home.js

@@ -1,17 +1,21 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
-import config from '../../config/config.json'
+import PropTypes from 'prop-types'
 import '../stylesheets/globals.scss'
 import styles from './Home.scss'
 
 export default class Home extends Component {
+  static propTypes = {
+    config: PropTypes.object.isRequired
+  }
+
   render () {
     let key = 0
-    const objKeys = Object.keys(config.social)
+    const objKeys = Object.keys(this.props.config.social)
 
     const socialLinks = objKeys.map((val) => {
       const link = (
-        <a key={key} href={config.social[val]}>
+        <a key={key} href={this.props.config.social[val]}>
           <i className={`fa fa-${val} fa-3x`} aria-hidden="true" />
           <span className="sr-only">{val}</span>
         </a>
@@ -21,7 +25,7 @@ export default class Home extends Component {
     })
 
     socialLinks.push(
-      <a key={key} href={`mailto:${config.email}`}>
+      <a key={key} href={`mailto:${this.props.config.email}`}>
         <i className="fa fa-envelope-o fa-3x" aria-hidden="true" />
         <span className="sr-only">e-mail</span>
       </a>
@@ -31,7 +35,7 @@ export default class Home extends Component {
       <div id={styles.coverPage} className={styles.coverPageFull}>
         <div id={styles.coverPageContent}>
           <div>
-            <h1 id={styles.coverPageName}><Link to="/">{ config.name }</Link></h1>
+            <h1 id={styles.coverPageName}><Link to="/">{ this.props.config.name }</Link></h1>
           </div>
           <div className={styles.social}>
             {socialLinks}

src/components/Navbar.js

@@ -1,16 +1,21 @@
 import React, { Component } from 'react'
-import config from '../../config/config.json'
+import PropTypes from 'prop-types'
 import '../stylesheets/globals.scss'
 import styles from './Navbar.scss'
 
 export default class Navbar extends Component {
+
+  static propTypes = {
+    config: PropTypes.object.isRequired
+  }
+
   render () {
     let key = 0
-    const objKeys = Object.keys(config.social)
+    const objKeys = Object.keys(this.props.config.social)
 
     const socialLinks = objKeys.map((val) => {
       const link = (
-        <a key={key} href={config.social[val]}>
+        <a key={key} href={this.props.config.social[val]}>
           <i className={`fa fa-${val}`} aria-hidden="true" />
           <span className="sr-only">{val}</span>
         </a>
@@ -21,7 +26,7 @@ export default class Navbar extends Component {
     })
 
     socialLinks.push(
-      <a key={key} href={`mailto:${config.email}`}>
+      <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>
@@ -33,7 +38,7 @@ export default class Navbar extends Component {
           <ul>
             <li>
               <a href='/'>
-                <span className={styles.nameLink}>{config.name} |</span>
+                <span className={styles.nameLink}>{this.props.config.name} |</span>
               </a>
             </li>
             <li>

src/components/NotFoundPage.js

@@ -3,7 +3,7 @@ import { Navbar, Header } from '.'
 import '../stylesheets/globals.scss'
 import contentStyle from '../stylesheets/content.scss'
 
-export const NotFoundPage = (props) => {
+export const NotFoundPage = () => {
   return (
     <div>
       <Navbar />

src/components/Post.js

@@ -11,7 +11,8 @@ import moment from 'moment'
 export default class Post extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
-    post: PropTypes.object.isRequired
+    post: PropTypes.object.isRequired,
+    config: PropTypes.object.isRequired
   }
 
   render () {
@@ -31,7 +32,7 @@ export default class Post extends Component {
 
     return (
       <div>
-        <Navbar />
+        <Navbar config={this.props.config} />
         <div className={contentStyle.contentWrapper}>
           <Header header={title} />
           <div className={contentStyle.content}>

src/containers/MainContainer.js

@@ -22,15 +22,16 @@ export default class MainContainer extends Component {
     this.state = {
       isLoadingBlog: !data.posts,
       isLoadingAbout: !data.other.about,
-      about: data.other.about,
+      about: data[0].other.about,
-      posts: data.posts
+      posts: data[0].posts,
+      config: data[1]
     }
   }
 
   render () {
     return (
       <div>
-        <Home/>
+        <Home config={this.state.config} />
         <Wrapper flex={true}>
           <About isLoading={this.state.isLoadingAbout}
             about={this.state.about}/>

src/containers/PostContainer.js

@@ -10,19 +10,20 @@ export default class PostContainer extends Component {
   constructor (props) {
     super(props)
 
-    let post
+    let data
     // eslint-disable-next-line no-undef
     if (__isBrowser__) {
-      post = window.__INITIAL_DATA__
+      data = window.__INITIAL_DATA__      
       delete window.__INITIAL_DATA__
     } else {
-      post = props.staticContext.data
+      data = props.staticContext.data
     }
 
     this.state = {
       isLoading: !post,
       error: false,
-      post: post
+      post: data[0],
+      config: data[1]
     }
   }
 
@@ -36,7 +37,7 @@ export default class PostContainer extends Component {
     return (
       <Wrapper>
         <Post isLoading={this.state.isLoading}
-          post={this.state.post} />
+          post={this.state.post} config={this.state.config} />
       </Wrapper>
     )
   }