Blog API and container

This commit is contained in:
LordMathis 2017-10-25 19:45:20 +02:00
parent 8d4e9b5be6
commit d7df24b1f3
9 changed files with 61 additions and 8 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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}/>
)
}
}

1
src/containers/index.js Normal file
View File

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

View File

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

View File

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

View File

@ -202,6 +202,13 @@ aws4@^1.2.1, aws4@^1.6.0:
version "1.6.0" version "1.6.0"
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" 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: babel-cli@^6.24.1:
version "6.26.0" version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1" 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" version "0.1.4"
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b" 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" version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
dependencies: dependencies:
@ -1844,6 +1851,12 @@ flatten@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" 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: for-in@^0.1.3:
version "0.1.8" version "0.1.8"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1" resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"