Change routes and component structure

src/components/About.js

@@ -1,12 +1,20 @@
-import React from 'react';
+import React, {Component} from 'react';
-//  import { Home } from '.';
 
-export const About = () => (
+export default class About extends Component {
-  <div>
-    <div className="content-wrapper">
-      <h1>About</h1>
-    </div>
-  </div>
-);
 
-export default About;
+  render () {
+    if (this.props.isLoading) {
+      return (
+        <div className="content-wrapper">
+          <h1>Loading</h1>
+        </div>
+      );
+    }
+
+    return (
+      <div className="content-wrapper">
+        { this.props.about.hello }
+      </div>
+    )
+  }
+}

src/components/App.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { Home, About, Portfolio, Resume, NotFoundPage } from '.';
+import { Home, NotFoundPage } from '.';
 import { BlogContainer, PostContainer } from '../containers';
 
 export const App = () => (
   <div>
     <Route component={Home} />
     <Switch>
-      <Route exact path="/about" component={About} />
       <Route exact path="/blog" component={BlogContainer} />
       <Route path="/blog/post/:postname" component={PostContainer} />
-      <Route exact path="/portfolio" component={Portfolio} />
-      <Route exact path="/resume" component={Resume} />
       <Route component={NotFoundPage} />
     </Switch>
   </div>

src/components/Blog.js

@@ -5,7 +5,9 @@ export default class Blog extends Component {
   render() {
     if (this.props.isLoading) {
       return (
-        <h1>Loading</h1>
+        <div className="content-wrapper">
+          <h1>Loading</h1>
+        </div>
       );
     }
 

src/components/Home.js

@@ -37,26 +37,11 @@ export default class Home extends Component {
           </div>
           <div className="menu-links">
             <ul>
-              <li>
-                <Link to="/about">
-                  <i className="fa fa-question" aria-hidden="true" /> About
-                </Link>
-              </li>
               <li>
                 <Link to="/blog">
                   <i className="fa fa-pencil-square-o" aria-hidden="true" /> Blog
                 </Link>
               </li>
-              <li>
-                <Link to="/portfolio">
-                  <i className="fa fa-briefcase" aria-hidden="true" /> Portfolio
-                </Link>
-              </li>
-              <li>
-                <Link to="/resume">
-                  <i className="fa fa-file-text-o" aria-hidden="true" /> Resume
-                </Link>
-              </li>
             </ul>
           </div>
         </div>

src/components/Portfolio.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-export const Portfolio = () => (
-  <div>
-    <div className="content-wrapper">
-      <h1>Portfolio</h1>
-    </div>
-  </div>
-);
-
-export default Portfolio;

src/components/Resume.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-export const Resume = () => (
-  <div>
-    <div className="content-wrapper">
-      <h1>Resume</h1>
-    </div>
-  </div>
-);
-
-export default Resume;

src/components/index.js

@@ -1,8 +1,6 @@
 export { default as Home } from './Home';
-export { default as About } from './About';
 export { default as Blog } from './Blog';
+export { default as About } from './About';
 export { default as Post } from './Post';
-export { default as Portfolio } from './Portfolio';
-export { default as Resume } from './Resume';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as App } from './App';

src/containers/BlogContainer.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import axios from 'axios';
-import {Blog} from '../components';
+import {About, Blog} from '../components';
 
 export default class BlogContainer extends Component {
 
@@ -8,14 +8,22 @@ export default class BlogContainer extends Component {
     super();
 
     this.state = {
-      isLoading: true,
+      isLoadingBlog: true,
+      isLoadingAbout: true,
     }
   }
 
   componentDidMount() {
+    axios.get('/api/about').then((res) => {
+      this.setState({
+        isLoadingAbout: false,
+        about: res.data,
+      });
+    })
+
     axios.get('/api/blog').then((res) => {
       this.setState({
-        isLoading: false,
+        isLoadingBlog: false,
         posts: res.data,
       });
     })
@@ -23,8 +31,12 @@ export default class BlogContainer extends Component {
 
   render() {
     return (
-      <Blog isLoading={this.state.isLoading}
+      <div>
-            posts={this.state.posts}/>
+        <About isLoading={this.state.isLoadingAbout}
+          about={this.state.about}/>
+        <Blog isLoading={this.state.isLoadingBlog}
+          posts={this.state.posts}/>
+      </div>
     )
   }
 }

src/utils/api.js

@@ -7,6 +7,10 @@ api.get('/blog', (req, res) => {
   res.json(data.posts);
 });
 
+api.get('/about', (req, res) => {
+  res.json({"hello": "hello"});
+});
+
 api.get('/post/:postname', (req, res) => {
   const postname = req.params.postname;
   const post = data.posts.find((el) => {

src/utils/compiler.js

@@ -50,9 +50,8 @@ function compile(filepath, data, fileData, callback) {
 
   fs.writeFile(renderedpath, rendered, (err) => {
     if (err) callback(err);
+    else callback(null, post);
   });
-
-  callback(null, post);
 }
 
 function Compiler(data) {