Updates, minor edits

Author: Eugene Cheung

client/app/components/App/App.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 
 import Header from '../Header/Header';
 import Footer from '../Footer/Footer';
 
-class App extends React.Component {
+class App extends Component {
   static propTypes = {
-    children: React.PropTypes.node
+    children: PropTypes.node
   };
 
   constructor(props) {

client/app/components/Home/Home.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { Component } from 'react';
 import 'whatwg-fetch';
 
-class Home extends React.Component {
+class Home extends Component {
   constructor(props) {
     super(props);
 
@@ -19,9 +19,8 @@ class Home extends React.Component {
 
   componentDidMount() {
     fetch('/api/counters')
-      .then((response) => {
-        return response.json();
-      }).then((json) => {
+      .then(res => res.json())
+      .then(json => {
         this.setState({
           counters: json
         });
@@ -30,10 +29,9 @@ class Home extends React.Component {
 
   newCounter() {
     fetch('/api/counters', { method: 'POST' })
-      .then((response) => {
-        return response.json();
-      }).then((json) => {
-        var data = this.state.counters;
+      .then(res => res.json())
+      .then(json => {
+        let data = this.state.counters;
         data.push(json);
 
         this.setState({
@@ -46,9 +44,8 @@ class Home extends React.Component {
     const id = this.state.counters[index]._id;
 
     fetch(`/api/counters/${id}/increment`, { method: 'PUT' })
-      .then((response) => {
-        return response.json();
-      }).then((json) => {
+      .then(res => res.json())
+      .then(json => {
         this._modifyCounter(index, json);
       });
   }
@@ -57,9 +54,8 @@ class Home extends React.Component {
     const id = this.state.counters[index]._id;
 
     fetch(`/api/counters/${id}/decrement`, { method: 'PUT' })
-      .then((response) => {
-        return response.json();
-      }).then((json) => {
+      .then(res => res.json())
+      .then(json => {
         this._modifyCounter(index, json);
       });
   }
@@ -68,13 +64,13 @@ class Home extends React.Component {
     const id = this.state.counters[index]._id;
 
     fetch(`/api/counters/${id}`, { method: 'DELETE' })
-      .then((response) => {
+      .then(_ => {
         this._modifyCounter(index, null);
       });
   }
 
   _modifyCounter(index, data) {
-    var prevData = this.state.counters;
+    let prevData = this.state.counters;
 
     if (data) {
       prevData[index] = data;

client/app/index.js

@@ -13,7 +13,7 @@ import Home from './components/Home/Home';
 
 import HelloWorld from './components/HelloWorld/HelloWorld';
 
-require('./styles/styles.scss');
+import './styles/styles.scss';
 
 render((
   <Router history={browserHistory}>

config/webpack.common.js

@@ -1,10 +1,10 @@
 const webpack = require('webpack');
-const helpers = require('./helpers');
-
 const autoprefixer = require('autoprefixer');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
+const helpers = require('./helpers');
+
 const NODE_ENV = process.env.NODE_ENV;
 const isProd = NODE_ENV === 'production';
 
@@ -35,7 +35,7 @@ module.exports = {
       {
         test: /\.jsx?$/,
         include: helpers.root('client'),
-        loader: 'babel-loader'
+        loader: 'babel'
       },
 
       // SCSS files

config/webpack.dev.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const merge = require('webpack-merge');
+
 const commonConfig = require('./webpack.common');
 
 module.exports = merge(commonConfig, {

config/webpack.prod.js

@@ -1,6 +1,7 @@
 const webpack = require('webpack');
 const merge = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+
 const helpers = require('./helpers');
 const commonConfig = require('./webpack.common');
 

package.json

@@ -14,28 +14,28 @@
     "start:prod": "NODE_ENV=production webpack --config ./webpack.config.js --progress --profile --colors && node server"
   },
   "dependencies": {
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2",
+    "react": "^15.4.0",
+    "react-dom": "^15.4.0",
     "react-router": "^3.0.0",
-    "whatwg-fetch": "^1.0.0"
+    "whatwg-fetch": "^2.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.5.3",
     "babel-core": "^6.18.2",
-    "babel-loader": "^6.2.7",
-    "babel-plugin-transform-class-properties": "^6.18.0",
+    "babel-loader": "^6.2.8",
+    "babel-plugin-transform-class-properties": "^6.19.0",
     "babel-polyfill": "^6.16.0",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "body-parser": "^1.15.2",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.25.0",
+    "css-loader": "^0.26.0",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "html-webpack-plugin": "^2.24.1",
-    "mongoose": "^4.6.7",
-    "node-sass": "^3.12.2",
+    "mongoose": "^4.6.8",
+    "node-sass": "^3.13.0",
     "nodemon": "^1.11.0",
     "postcss-loader": "^1.1.1",
     "react-hot-loader": "^3.0.0-beta.6",
@@ -44,6 +44,6 @@
     "webpack": "^1.13.3",
     "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.13.2",
-    "webpack-merge": "^0.16.0"
+    "webpack-merge": "^0.17.0"
   }
 }

server.js

@@ -9,7 +9,8 @@ nodemon({
   ignore: [],
   watch: process.env.NODE_ENV !== 'production' ? ['server/*'] : false,
   ext: 'js'
-}).on('restart', function() {
+})
+.on('restart', function() {
   console.log('Server restarted!');
 })
 .once('exit', function () {