Fixed server-side data pre-loading and added tooling for tree-shaking

.travis.yml

@@ -1,6 +1,5 @@
 language: node_js
 node_js:
   - '5'
-  - '4'
 before_install:
 - 'npm install -g npm@latest'

README.md

@@ -1,5 +1,3 @@
-![](http://res.cloudinary.com/hashnode/image/upload/w_200/v1455647564/static_imgs/PERN/imgs/favicon-PERN.png)
-
 # pern-starter :rocket:
 
 PERN is a scaffolding tool which makes it easy to build isomorphic apps using Mongo, Express, React and NodeJS. It minimizes the setup time and gets you up to speed using proven technologies.

package.json

@@ -16,13 +16,10 @@
   },
   "author": "Logan Saunders <[email protected]>",
   "dependencies": {
-    "babel-core": "^6.4.5",
+    "babel-core": "^6.6.5",
     "babel-plugin-react-transform": "^2.0.0",
     "babel-polyfill": "^6.6.1",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-react-hmre": "^1.1.0",
-    "babel-register": "^6.6.0",
+    "bluebird": "^3.3.3",
     "body-parser": "^1.14.2",
     "compression": "^1.6.1",
     "cross-env": "^1.0.7",
@@ -39,6 +36,7 @@
     "react-dom": "^0.14.7",
     "react-redux": "^4.1.2",
     "react-router": "^2.0.0-rc5",
+    "react-time": "^4.0.0",
     "redux": "^3.1.5",
     "redux-thunk": "^1.0.3",
     "sanitize-html": "^1.11.3",
@@ -48,6 +46,11 @@
   },
   "devDependencies": {
     "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015-webpack": "^6.3.15",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-react-hmre": "^1.1.0",
+    "babel-preset-stage-2": "^6.5.0",
     "bootstrap": "^3.3.6",
     "clean-css": "^3.4.9",
     "css-loader": "^0.23.1",
@@ -64,9 +67,8 @@
     "style-loader": "^0.13.0",
     "supertest": "^1.1.0",
     "tape-jsx-equals": "^1.0.0",
-    "tape-redux": "0.0.3",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.12",
+    "webpack": "^2.1.0-beta.4",
     "webpack-dev-middleware": "^1.5.1",
     "webpack-hot-middleware": "^2.6.4"
   },
@@ -97,7 +99,9 @@
   "babel": {
     "presets": [
       "react",
-      "es2015"
+      "es2015",
+      "stage-2",
+      "async-to-bluebird"
     ]
   }
 }

server/controllers/post.controller.js

@@ -1,7 +1,6 @@
 import Post from '../models/post';
 import slug from 'slug';
 import cuid from 'cuid';
-import moment from 'moment';
 import sanitizeHtml from 'sanitize-html';
 
 export function getPosts(req, res) {
@@ -29,7 +28,7 @@ export function addPost(req, res) {
 
   newPost.slug = slug(newPost.title.toLowerCase(), { lowercase: true });
   newPost.cuid = cuid();
-  newPost.dateadded = moment().format('YYYY-MM-DD HH:mm:ssZ');
+  newPost.dateadded = new Date();
   newPost.updateddate = null;
   Post.query().insert(newPost).then((saved) => {
     res.json({ post: saved });
@@ -43,7 +42,7 @@ export function getPost(req, res) {
   const newSlug = req.query.slug.split('-');
   const newCuid = newSlug[newSlug.length - 1];
   Post.query().where('cuid', newCuid).then((post) => {
-    res.json({ post });
+    res.json({ post: post[0] });
   })
   .catch((err) => {
     res.status(500).send(err);

server/util/fetchData.js

@@ -1,5 +1,4 @@
 /* This was inspired from https://github.com/caljrimmer/isomorphic-redux-app/blob/73e6e7d43ccd41e2eb557a70be79cebc494ee54b/src/common/api/fetchComponentDataBeforeRender.js */
-
 export function fetchComponentData(dispatch, components, params) {
   const needs = components.reduce((prev, current) => {
     return (current.need || [])

shared/container/PostDetailView/PostDetailView.jsx

@@ -1,7 +1,7 @@
-/* eslint no-unused-vars: 0 */
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import * as Actions from '../../redux/actions/actions';
+import Time from 'react-time';
 import Header from '../../components/Header/Header';
 import Footer from '../../components/Footer/Footer';
 
@@ -31,7 +31,7 @@ class PostDetailView extends Component {
           <div className="single-post post-detail">
             <h3 className="post-title">{this.props.post.title}</h3>
             <p className="author-name">By {this.props.post.name}</p>
-            <p className="post-date">On: {this.props.post.dateadded}</p>
+            <Time value={this.props.post.dateadded} titleFormat="YYYY/MM/DD HH:mm" relative />
             <p className="post-desc">{this.props.post.content}</p>
           </div>
         </div>

shared/container/PostListView/PostListView.jsx

@@ -10,15 +10,15 @@ function PostListView(props, context) {
       {
         props.posts.map((post, i, arr) => (
           <PostListItem post={post} key={i}
-            onClick={function handleClick() {
-              props.dispatch(Actions.addSelectedPost(post));
-            }}
-            onDelete={function handleDelete() {
-              if (confirm('Do you want to delete this post')) { // eslint-disable-line
-                props.dispatch(Actions.deletePostRequest(post));
-              }
-            }}
-          />
+          onClick={function handleClick() {
+            props.dispatch(Actions.addSelectedPost(post));
+          }}
+          onDelete={function handleDelete() {
+            if (confirm('Do you want to delete this post')) { // eslint-disable-line
+              props.dispatch(Actions.deletePostRequest(post));
+            }
+          }}
+        />
         ))
       }
     </div>

shared/redux/actions/actions.js

@@ -7,11 +7,11 @@ const baseURL = typeof window === 'undefined' ? process.env.BASE_URL || (`http:/
 export function addPost(post) {
   return {
     type: ActionTypes.ADD_POST,
-    cuid: post.cuid,
     name: post.name,
     title: post.title,
     content: post.content,
     slug: post.slug,
+    cuid: post.cuid,
     dateadded: post.dateadded,
     updateddate: post.updateddate,
   };
@@ -87,7 +87,7 @@ export function deletePostRequest(post) {
     fetch(`${baseURL}/api/deletePost`, {
       method: 'post',
       body: JSON.stringify({
-        postcuid: post.cuid,
+        postId: post.cuid,
       }),
       headers: new Headers({
         'Content-Type': 'application/json',

webpack.config.dev.js

@@ -26,7 +26,9 @@ module.exports = {
       exclude: [/node_modules/, /.+\.config.js/],
       loader: 'babel',
       query: {
-        presets: ['react-hmre'],
+        babelrc: false,
+        presets: ['react-hmre', 'react', 'es2015-webpack', 'stage-2', 'async-to-bluebird'],
+        cacheDirectory: true,
       },
     }],
   },

webpack.config.prod.js

@@ -23,11 +23,16 @@ module.exports = {
       test: /\.jsx*$/,
       exclude: 'node_modules',
       loader: 'babel',
+      query: {
+        babelrc: false,
+        presets: ['react', 'es2015-webpack', 'stage-2', 'async-to-bluebird'],
+        cacheDirectory: true,
+      },
     }],
   },
 
   plugins: [
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         'NODE_ENV': JSON.stringify('production'),