Rework API

src/components/Post.js

@@ -3,7 +3,11 @@ import React, {Component} from 'react';
 export default class Post extends Component {
   render() {
     return (
-      <div>Hello</div>
+      <div>
+        <div className="content">
+          <h1>Post</h1>
+        </div>
+      </div>
     )
   }
 }

src/containers/PostContainer.js

@@ -11,10 +11,22 @@ export default class PostContainer extends Component {
     };
   }
 
+  componentDidMount() {
+    const url = '/api/post/' + this.props.match.params.postname;
+
+    axios.get(url).then((res) => {
+      console.log(res.data);
+      this.setState({
+        isLoading: false,
+        post: res.data,
+      });
+    })
+  }
+
   render() {
     return (
       <Post isLoading={this.state.isLoading}
             post={this.state.post} />
-    )
+    );
   }
 }

src/server.js

@@ -31,20 +31,19 @@ if (process.env.NODE_ENV === 'development') {
   app.use(hotDevMiddleware(compiler))
 }
 
-app.use(require('express').static('public'))
+app.use(require('express').static('public'));
-
-var api = require('./utils/api');
-api(app);
-
 require('./utils/scanner')();
 
-var serverRender = require('./utils/serverRender')
+var api = require('./utils/api');
-app.get("*", serverRender)
+app.use("/api", api);
+
+var serverRender = require('./utils/serverRender');
+app.get("*", serverRender);
 
 app.listen(port, function(error) {
   if (error) {
-    console.error(error)
+    console.error(error);
   } else {
-    console.info("[Server] Listening on port %s", port)
+    console.info("[Server] Listening on port %s", port);
   }
 })

src/utils/api.js

@@ -1,25 +1,23 @@
 const data = require('./data.json');
+const api = require('express').Router();
 
-module.exports = function(app) {
+api.get('/blog', (req, res) => {
-  app.get('/api/blog', (req, res) => {
+  res.json(data.posts);
-    res.json(data.posts);
+});
+
+api.get('/post/:postname', (req, res) => {
+  const post = data.posts.find((el) => {
+    el.filename === req.params.postname
   });
 
-  app.get('api/post/:postname', (req, res) => {
+  if (post) {
-    const post = data.posts.find((el) => {
+    res.json(post);
-      el.filename === req.params.postname
+  } else {
+    res.json({
+      error: 404
     });
+  }
+});
 
-    if (post) {
-      res.json(post);
-    } else {
-      res.json({
-        error: 404
-      });
-    }
-  })
-}
 
-function (postname) {
+module.exports = api;
-  data.posts
-}

src/utils/serverRender.js

@@ -4,9 +4,6 @@ import { renderToString } from 'react-dom/server'
 import { StaticRouter as Router } from 'react-router-dom'
 import { App } from '../components/App'
 
-
-
-
 function serverRender(req, res) {
   let markup = '';
   let status = 200;
@@ -40,4 +37,4 @@ function renderFullPage(html) {
     `
 }
 
-module.exports = serverRender
+module.exports = serverRender;