Post API is fully working

src/components/Blog.js

@@ -31,15 +31,13 @@ export default class Blog extends Component {
     )
 
     return (
-      <div>
+      <div className="content">
-        <div className="content">
+        <h1>Blog</h1>
-          <h1>Blog</h1>
-
-          <div className="blog-posts">
-            {posts}
-          </div>
 
+        <div className="blog-posts">
+          {posts}
         </div>
+
       </div>
     );
   }

src/components/Post.js

@@ -2,10 +2,18 @@ import React, {Component} from 'react';
 
 export default class Post extends Component {
   render() {
+
+    if (this.props.isLoading) {
+      return (
+        <h1>Loading</h1>
+      );
+    }
+
     return (
-      <div>
+      <div className="content">
-        <div className="content">
+        <h1>{this.props.post.title}</h1>
-          <h1>Post</h1>
+        <h4>{this.props.post.published}</h4>
+        <div dangerouslySetInnerHTML={{__html: this.props.post.body}}>
         </div>
       </div>
     )

src/utils/api.js

@@ -1,22 +1,32 @@
 const data = require('./data.json');
 const api = require('express').Router();
+const fs = require('fs');
+const path = require('path');
 
 api.get('/blog', (req, res) => {
   res.json(data.posts);
 });
 
 api.get('/post/:postname', (req, res) => {
+  const postname = req.params.postname;
   const post = data.posts.find((el) => {
-    el.filename === req.params.postname
+    return el.filename === postname
   });
 
-  if (post) {
+  const renderPath = path.join(process.cwd(), '/renders', postname + '.html');
-    res.json(post);
+  fs.readFile(renderPath, 'utf8', (err, data) => {
-  } else {
+    if (err) {
-    res.json({
+      res.json({
-      error: 404
+        error: 404
-    });
+      });
-  }
+    } else {
+      res.json({
+        published: post.published,
+        title: post.title,
+        body: data,
+      });
+    }
+  });
 });