From 23ffc871680522888637e24a8962fdb0caf258f1 Mon Sep 17 00:00:00 2001 From: LordMathis Date: Mon, 18 Feb 2019 21:18:55 +0100 Subject: [PATCH] Fix data.json loading --- config.json | 1 + package.json | 1 + src/components/Post.js | 21 +++++++++++++-------- src/containers/MainContainer.js | 22 +++++++++++++++------- src/containers/PostContainer.js | 2 -- src/server.js | 9 ++------- src/utils/api.js | 19 ++++++++++++++----- src/utils/compiler.js | 4 ++-- src/utils/scanner.js | 11 +++++++++-- src/utils/serverRender.js | 10 ++++------ webpack.config.js | 13 +++++++++++-- yarn.lock | 20 ++++++++++++++++++-- 12 files changed, 90 insertions(+), 43 deletions(-) diff --git a/config.json b/config.json index d8b4c83..70f9560 100644 --- a/config.json +++ b/config.json @@ -10,6 +10,7 @@ }, "contentPath": "./content", "renderPath": "./renders", + "dataPath": "./src/utils/data.json", "files": [ "about.md", "resume.md" ] diff --git a/package.json b/package.json index bc8a42b..a31e33e 100644 --- a/package.json +++ b/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", diff --git a/src/components/Post.js b/src/components/Post.js index ff4364b..f3f925c 100644 --- a/src/components/Post.js +++ b/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 (
- ); + ) } return ( @@ -24,7 +29,7 @@ export default class Post extends Component {

{this.props.post.published}

-
+
diff --git a/src/containers/MainContainer.js b/src/containers/MainContainer.js index 10b71cd..7c20399 100644 --- a/src/containers/MainContainer.js +++ b/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) - this.state = { - isLoadingBlog: true, - isLoadingAbout: true + let data + if (__isBrowser__) { + data = window.__INITIAL_DATA__ + delete window.__INITIAL_DATA__ + } else { + data = props.staticContext.data } - console.log(this.props.data) + this.state = { + isLoadingBlog: !data.posts, + isLoadingAbout: !data.about, + about: data.about, + posts: data.posts + } } render () { diff --git a/src/containers/PostContainer.js b/src/containers/PostContainer.js index 26f49f8..eca6be0 100644 --- a/src/containers/PostContainer.js +++ b/src/containers/PostContainer.js @@ -14,8 +14,6 @@ export default class PostContainer extends Component { isLoading: true, error: false } - - console.log(this.props.data) } render () { diff --git a/src/server.js b/src/server.js index 4f92493..52143dc 100644 --- a/src/server.js +++ b/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) => { diff --git a/src/utils/api.js b/src/utils/api.js index a112a24..a33fc31 100644 --- a/src/utils/api.js +++ b/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) + }) + }) +} diff --git a/src/utils/compiler.js b/src/utils/compiler.js index 64e6894..4aab93c 100644 --- a/src/utils/compiler.js +++ b/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 diff --git a/src/utils/scanner.js b/src/utils/scanner.js index 7f584be..cb2c381 100644 --- a/src/utils/scanner.js +++ b/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,7 +32,13 @@ module.exports = function () { */ function compileFile (file, callback) { const filePath = path.join(process.cwd(), config.contentPath, file) - compiler.addFile(filePath, false, callback) + + // 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) + } } /** diff --git a/src/utils/serverRender.js b/src/utils/serverRender.js index 9cfd811..06bf2a9 100644 --- a/src/utils/serverRender.js +++ b/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( - - + + ) @@ -38,11 +35,12 @@ function renderFullPage (html, data) { + +
${html}
- ` diff --git a/webpack.config.js b/webpack.config.js index 77e83bc..8696b4e 100644 --- a/webpack.config.js +++ b/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': [] + }) + }) ] } diff --git a/yarn.lock b/yarn.lock index 83347c9..1b556a4 100644 --- a/yarn.lock +++ b/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==