Fix data.json loading

config.json

@@ -10,6 +10,7 @@
   },
   "contentPath": "./content",
   "renderPath": "./renders",
+  "dataPath": "./src/utils/data.json",
   "files": [
     "about.md", "resume.md"
   ]

package.json

@@ -40,6 +40,7 @@
     "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^0.1.19",
     "compression-webpack-plugin": "^1.1.11",
+    "create-file-webpack": "^1.0.2",
     "css-loader": "^0.28.11",
     "css-modules-require-hook": "^4.2.3",
     "eslint": "^5.14.0",

src/components/Post.js

@@ -1,18 +1,23 @@
-import React, {Component} from 'react';
-import {Spinner, Header, Navbar} from '.';
-import '../static/stylesheets/globals.scss';
-import contentStyle from '../static/stylesheets/content.scss';
-import styles from './Post.scss';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Spinner, Header, Navbar } from '.'
+import '../static/stylesheets/globals.scss'
+import contentStyle from '../static/stylesheets/content.scss'
+import styles from './Post.scss'
 
 export default class Post extends Component {
-  render() {
+  static propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+    post: PropTypes.object.isRequired
+  }
 
+  render () {
     if (this.props.isLoading) {
       return (
         <div className={contentStyle.contentWrapper}>
           <Spinner/>
         </div>
-      );
+      )
     }
 
     return (
@@ -24,7 +29,7 @@ export default class Post extends Component {
             <div className={styles.postDate}>
               <h3>{this.props.post.published}</h3>
             </div>
-            <div className={styles.postContent} dangerouslySetInnerHTML={{__html: this.props.post.body}}>
+            <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: this.props.post.body }}>
             </div>
           </div>
         </div>

src/containers/MainContainer.js

@@ -4,18 +4,26 @@ import { About, Blog, Home, Wrapper } from '../components'
 
 export default class MainContainer extends Component {
   static propTypes = {
-    data: PropTypes.object.isRequired
+    staticContext: PropTypes.object
   }
 
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
+
+    let data
+    if (__isBrowser__) {
+      data = window.__INITIAL_DATA__
+      delete window.__INITIAL_DATA__
+    } else {
+      data = props.staticContext.data
+    }
 
     this.state = {
-      isLoadingBlog: true,
-      isLoadingAbout: true
+      isLoadingBlog: !data.posts,
+      isLoadingAbout: !data.about,
+      about: data.about,
+      posts: data.posts
     }
-
-    console.log(this.props.data)
   }
 
   render () {

src/containers/PostContainer.js

@@ -14,8 +14,6 @@ export default class PostContainer extends Component {
       isLoading: true,
       error: false
     }
-
-    console.log(this.props.data)
   }
 
   render () {

src/server.js

@@ -1,15 +1,10 @@
 import express from 'express'
-import fs from 'fs'
 import { serverRender } from './utils/serverRender'
+require('./utils/scanner')()
+
 const port = process.env.PORT || 3000
 const app = express()
 
-const filename = './src/utils/data.json'
-const dataStub = { 'posts': [], 'other': [] }
-fs.writeFileSync(filename, JSON.stringify(dataStub))
-
-require('./utils/scanner')()
-
 app.use('/static', express.static('public/static'))
 
 app.get('/favicon.ico', (req, res) => {

src/utils/api.js

@@ -1,11 +1,12 @@
 import fs from 'fs'
-import data from './data.json'
+import jsonfile from 'jsonfile'
+import config from '../../config.json'
 
-export function getData (path = '') {
-  if (path === '') {
-    return Promise.resolve(data)
+export function getData (reqPath = '') {
+  if (reqPath === '') {
+    return readData(config.dataPath)
   } else {
-    const fileName = '../../content/' + path
+    const fileName = '../../renders/' + reqPath + '.html'
     return readFile(fileName)
   }
 };
@@ -17,3 +18,11 @@ function readFile (fileName, type) {
     })
   })
 }
+
+function readData (dataPath) {
+  return new Promise(function (resolve, reject) {
+    jsonfile.readFile(dataPath, (err, data) => {
+      err ? reject(err) : resolve(data)
+    })
+  })
+}

src/utils/compiler.js

@@ -128,8 +128,8 @@ Compiler.prototype.addFile = function (filepath, isPost, callback) {
  * Writes updated data to the data file
  */
 Compiler.prototype.writeData = function (callback) {
-  const dataPath = path.join(process.cwd(), 'src/utils/data.json')
-  jsonfile.writeFile(dataPath, this.data, callback)
+  // console.log(this.data)
+  jsonfile.writeFile(config.dataPath, this.data, callback)
 }
 
 module.exports = Compiler

src/utils/scanner.js

@@ -3,9 +3,10 @@ const path = require('path')
 const async = require('async')
 const Compiler = require('./compiler')
 const config = require('../../config.json')
-const data = require('./data.json')
+const jsonfile = require('jsonfile')
 
 module.exports = function () {
+  const data = jsonfile.readFileSync(config.dataPath)
   var compiler = new Compiler(data)
 
   /**
@@ -31,8 +32,14 @@ module.exports = function () {
    */
   function compileFile (file, callback) {
     const filePath = path.join(process.cwd(), config.contentPath, file)
+
+    // config.files contains list of file names which are not considered blog posts
+    if (config.files.indexOf(file) === -1) {
+      compiler.addFile(filePath, true, callback)
+    } else {
       compiler.addFile(filePath, false, callback)
     }
+  }
 
   /**
    * Writes updated data into the data file

src/utils/serverRender.js

@@ -1,4 +1,3 @@
-// import 'babel-polyfill'
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import { StaticRouter as Router, matchPath } from 'react-router-dom'
@@ -14,11 +13,9 @@ export function serverRender (req, res, next) {
     : Promise.resolve()
 
   promise.then((data) => {
-    console.log(data)
-
     const markup = renderToString(
-      <Router location={req.url} context={{}}>
-        <App data={data}/>
+      <Router location={req.url} context={{ data }}>
+        <App/>
       </Router>
     )
 
@@ -38,11 +35,12 @@ function renderFullPage (html, data) {
           <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" rel="preload" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
           <!-- Stylesheet -->
           <link href="static/bundle.css" rel="stylesheet" rel="preload">
+          <!-- Initial Data -->
+          <script>window.__INITIAL_DATA__ = ${serialize(data)}</script>
       </head>
       <body>
         <div id="root">${html}</div>
         <script src="static/bundle.js" async></script>
-        <script>window.__INITIAL_DATA__ = ${serialize(data)}</script>
       </body>
     </html>
     `

webpack.config.js

@@ -7,6 +7,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const nodeExternals = require('webpack-node-externals')
+const CreateFileWebpack = require('create-file-webpack')
 
 const browserConfig = {
   mode: 'production',
@@ -21,7 +22,7 @@ const browserConfig = {
     // filename: '[name].[contenthash].js',
     publicPath: '/static/'
   },
-  // devtool: 'eval-source-map',
+  devtool: 'eval-source-map',
   module: {
     rules: [
       {
@@ -124,7 +125,15 @@ const serverConfig = {
     new webpack.DefinePlugin({
       __isBrowser__: 'false'
     }),
-    new MiniCssExtractPlugin()
+    new MiniCssExtractPlugin(),
+    new CreateFileWebpack({
+      path: './src/utils/',
+      fileName: 'data.json',
+      content: JSON.stringify({
+        'posts': [],
+        'other': []
+      })
+    })
   ]
 }
 

yarn.lock

@@ -2313,6 +2313,14 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
+create-file-webpack@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/create-file-webpack/-/create-file-webpack-1.0.2.tgz#c206474fe15a6aab12e2a278a7798d244befff0b"
+  integrity sha512-+J6kQTE+Wcobc6gHP8E2zmoeIC+J+p6IXqjFrzoxCl1VYlimWoincPUABAhODuXAJGrZcNZ/Up0PTqq1ISiwvA==
+  dependencies:
+    path "^0.12.7"
+    write "^1.0.3"
+
 create-hash@^1.1.0, create-hash@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -5842,6 +5850,14 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 pbkdf2@^3.0.3:
   version "3.0.16"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.16.tgz#7404208ec6b01b62d85bf83853a8064f8d9c2a5c"
@@ -6216,7 +6232,7 @@ process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
 
-process@^0.11.10:
+process@^0.11.1, process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
@@ -8069,7 +8085,7 @@ write-file-atomic@^1.2.0:
     imurmurhash "^0.1.4"
     slide "^1.1.5"
 
-write@1.0.3:
+write@1.0.3, write@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
   integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==