Blog API and container

package.json

@@ -15,6 +15,7 @@
   "author": "Matúš Námešný",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.17.0",
     "babel-cli": "^6.24.1",
     "babel-polyfill": "^6.7.4",
     "babel-runtime": "^6.6.1",

src/api.js

@@ -0,0 +1,7 @@
+module.exports = function(app) {
+  app.get('/api/blog', ((req, res) => {
+    res.json({
+      "blog": "Blog hello"
+    });
+  }));
+}

src/components/App.js

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

src/components/Blog.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
-export const Blog = () => (
+export const Blog = (props) => (
   <div>
     <div className="content">
-      <h1>Blog</h1>
+      <h1>{ props.data.isLoading ? 'Loading...' : 'Blog' }</h1>
     </div>
   </div>
 );

src/containers/BlogContainer.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+import axios from 'axios';
+import {Blog} from '../components';
+
+export default class BlogContainer extends Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      isLoading: true,
+    }
+  }
+
+  componentDidMount() {
+    axios.get('/api/blog').then((res) => {
+      this.setState({
+        isLoading: false,
+      });
+    })
+  }
+
+  render() {
+    return (
+      <Blog data={this.state}/>
+    )
+  }
+}

src/containers/index.js

@@ -0,0 +1 @@
+export { default as BlogContainer } from './BlogContainer';

src/server.js

@@ -28,8 +28,10 @@ if (process.env.NODE_ENV === 'development') {
 
 app.use(require('express').static('public'))
 
-var serverRender = require('./serverRender')
+var api = require('./api');
+api(app);
 
+var serverRender = require('./serverRender')
 app.get("*", serverRender)
 
 app.listen(port, function(error) {

src/static/stylesheets/main.scss

@@ -19,9 +19,9 @@ $break-large: 1200px;
   left: 0;
   color: $white;
   transition-property: width;
-  transition-duration: 1s;
+  transition-duration: 0.75s;
   -webkit-transition-property: width;
-  -webkit-transition-duration: 1s;
+  -webkit-transition-duration: 0.75s;
 }
 
 #cover-page.cover-page-full{

yarn.lock

@@ -202,6 +202,13 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.17.0.tgz#7da747916db803f761651d6091d708789b953c6a"
+  dependencies:
+    follow-redirects "^1.2.3"
+    is-buffer "^1.1.5"
+
 babel-cli@^6.24.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1"
@@ -1542,7 +1549,7 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@2.6.9, debug@^2.2.0, debug@^2.6.8:
+debug@2.6.9, debug@^2.2.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -1844,6 +1851,12 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+follow-redirects@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.2.5.tgz#ffd3e14cbdd5eaa72f61b6368c1f68516c2a26cc"
+  dependencies:
+    debug "^2.6.9"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"