upgrade dependencies

.nvmrc

@@ -1 +1 @@
-6.10
+9.2

.postcssrc

@@ -0,0 +1,19 @@
+{
+  "plugins": {
+    "autoprefixer": {
+      browsers: [
+        'Safari >= 8',
+        'ie >= 10',
+        'last 2 Chrome versions',
+        'last 2 Firefox versions',
+        'Edge >= 13',
+        'ios_saf >= 8',
+        'ie_mob >= 11',
+        'Android >= 4'
+      ],
+      cascade: false,
+      add: true,
+      remove: true
+    }
+  }
+}

package.json

@@ -1,29 +1,30 @@
 {
   "name": "react-lego",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "",
   "main": "src/server-entry.js",
   "scripts": {
-    "postinstall": "npm run build",
-    "build": "rm -rf compiled && npm run compile && cp src/index.html compiled",
+    "postinstall": "yarn build",
+    "build": "rm -rf compiled && yarn compile && cp src/index.html compiled",
     "compile": "webpack --config src/config/webpack.config.prod.js -p",
     "start": "http-server compiled",
     "start:dev": "ENV=dev node src/server-entry.js",
     "lint": "sass-lint -v -q -c ./sass-lint.yml && eslint 'src/**/*.js'",
-    "test": "npm run test:unit && npm run test:func",
-    "test:unit": "npm run mocha -- 'src/**/*.spec.js'",
-    "test:func": "npm run mocha -- 'tests/**/*.func.js'",
-    "test:e2e": "npm run test:e2e-local",
-    "test:e2e-local": "npm run nightwatch -- --env local --tag staging",
-    "test:e2e-production": "npm run nightwatch -- --env chrome_win --tag production",
-    "test:e2e-staging": "npm run nightwatch -- --env safari_osx,chrome_osx,firefox_win,firefox_osx,IE11,edge --tag staging",
+    "test": "yarn test:unit && yarn test:func",
+    "test:unit": "yarn mocha -- 'src/**/*.spec.js'",
+    "test:func": "yarn mocha -- 'tests/**/*.func.js'",
+    "test:e2e": "yarn test:e2e-local",
+    "test:e2e-local": "yarn nightwatch -- --env local --tag staging",
+    "test:e2e-production": "yarn nightwatch -- --env chrome_win --tag production",
+    "test:e2e-staging": "yarn nightwatch -- --env safari_osx,chrome_osx,firefox_win,firefox_osx,IE11,edge --tag staging",
     "prenightwatch": "selenium-standalone install --version=3.0.1",
     "nightwatch": "nightwatch -o ./tests/e2e/tests_output -c ./tests/config/nightwatch.conf.js",
-    "mocha": "mocha --opts ./tests/config/mocha.opts "
+    "mocha": "mocha --opts ./tests/config/mocha.opts ",
+    "nuke": "rm -rf node_modules && yarn && yarn test"
   },
   "engines": {
-    "node": "^7.6.0",
-    "npm": "^4.1.0"
+    "node": "^9.2.0",
+    "npm": "^5.5.1"
   },
   "pre-commit": [
     "lint",
@@ -37,50 +38,51 @@
   "license": "ISC",
   "dependencies": {
     "assets-webpack-plugin": "^3.5.1",
-    "axios": "^0.15.3",
+    "axios": "^0.17.1",
     "babel-core": "^6.8.0",
-    "babel-loader": "^6.4.0",
+    "babel-loader": "^7.1.0",
     "babel-preset-react": "^6.5.0",
-    "css-loader": "^0.27.0",
+    "css-loader": "^0.28.0",
     "cssnano": "^3.10.0",
-    "debug": "^2.2.0",
+    "debug": "^3.1.0",
     "es6-promise": "^4.0.5",
-    "extract-text-webpack-plugin": "^2.1.0",
-    "http-server": "^0.9.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "http-server": "^0.10.0",
     "node-sass": "^4.5.0",
-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^2.0.9",
     "progress-bar-webpack-plugin": "^1.9.3",
-    "react": "^15.4.2",
+    "react": "^16.2.0",
     "react-bem-helper": "^1.3.1",
     "react-document-meta": "^2.0.2",
-    "react-dom": "^15.1.0",
+    "react-dom": "^16.2.0",
     "react-router-dom": "^4.0.0",
     "sass-loader": "^6.0.2",
-    "style-loader": "^0.13.0",
-    "webpack": "^2.2.1",
+    "style-loader": "^0.19.0",
+    "webpack": "^4.0.0-alpha.0",
     "webpack-visualizer-plugin": "^0.1.11"
   },
   "devDependencies": {
     "babel-cli": "^6.14.0",
-    "babel-eslint": "^7.0.0",
+    "babel-eslint": "^8.0.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-env": "^1.2.1",
-    "chai": "^3.5.0",
-    "chai-enzyme": "^0.6.1",
+    "chai": "^4.1.0",
+    "chai-enzyme": "^1.0.0-beta.0",
     "chance": "^1.0.6",
-    "enzyme": "^2.3.0",
-    "eslint": "^3.17.1",
-    "eslint-config-airbnb": "^14.1.0",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "eslint": "^4.13.0",
+    "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-babel": "^4.1.1",
     "eslint-plugin-import": "^2.0.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.2.2",
+    "eslint-plugin-jsx-a11y": "^6.0.0",
+    "eslint-plugin-react": "^7.5.1",
     "express": "^4.15.2",
     "http-proxy": "^1.15.1",
-    "jsdom": "^9.2.1",
-    "mocha": "^3.1.0",
+    "jsdom": "^11.5.1",
+    "mocha": "^4.0.1",
     "nightwatch": "^0.9.0",
     "nightwatch-html-reporter": "^2.0.0",
     "pre-commit": "^1.1.2",
@@ -89,10 +91,10 @@
     "react-addons-test-utils": "^15.1.0",
     "sass-lint": "^1.5.1",
     "selenium-standalone": "^6.0.1",
-    "sinon": "^1.17.3",
+    "sinon": "^4.1.3",
     "sinon-chai": "^2.8.0",
     "supertest": "^3.0.0",
     "webpack-dev-server": "^2.4.1",
-    "yargs": "^7.0.1"
+    "yargs": "^10.0.3"
   }
 }

src/app/Layouts/MainLayout.js

@@ -7,7 +7,6 @@ import { NamedLink } from '../routes';
 const log = debug('base:mainLayout');
 
 export default class MainLayout extends React.Component {
-
   render() {
     const bem = bemHelper({ name: 'layout' });
     const { children } = this.props;

src/app/components/Answer/Answer.js

@@ -28,9 +28,11 @@ export const AnswerOption = ({ isAnswer, card }) => (
   </dl>
 );
 
-export default ({ cards = [], answerId, showAnswer, ...props }) => (
+export default ({
+  cards = [], answerId, showAnswer, ...props
+}) => (
     <section className={`answer ${showAnswer ? 'visible' : 'hidden'}`} { ...props }>
       <AnswerOption isAnswer={answerId === cards[0].url} card={cards[0]}/>
       <AnswerOption isAnswer={answerId === cards[1].url} card={cards[1]}/>
     </section>
-  );
+);

src/app/components/Question/Question.js

@@ -1,6 +1,8 @@
 import React from 'react';
 
-const QuestionOption = ({ onClick, attempt, children, answer, showAnswer }) => {
+const QuestionOption = ({
+  onClick, attempt, children, answer, showAnswer
+}) => {
   const classNames = ['question__option'];
   if (attempt === children) {
     classNames.push('question__option--selected');
@@ -12,9 +14,10 @@ const QuestionOption = ({ onClick, attempt, children, answer, showAnswer }) => {
 };
 
 export default class Question extends React.Component {
-
   render() {
-    const { children, showAnswer, answer, cards, attempt, onClick, ...props } = this.props;
+    const {
+      children, showAnswer, answer, cards, attempt, onClick, ...props
+    } = this.props;
     if (!cards.length) return null;
 
     const options = [cards[0].name, cards[1].name, 'both', 'unknown'];

src/app/containers/Game/Game.js

@@ -9,12 +9,16 @@ import Answer from '../../components/Answer/Answer';
 debug('lego:Game');
 
 const DECK = 87;
-export const Error = ({ error }) => <p className="error">Error Loading cards!<span>{error}</span></p>;
+export const Error = ({ error }) => {
+  if (typeof error !== 'string') {
+    return <p className="error">{String(error)} <strong>needs to be handled, was not a string</strong></p>;
+  }
+  return <p className="error">Error Loading cards!<span>{String(error)}</span></p>;
+};
 export const Loading = () => <p className="loading">Loading hand....</p>;
 const getCard = (api, cardId) => json.get(`http://swapi.co/api/${api}/${cardId}/`);
 
 export default class Game extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -71,20 +75,24 @@ export default class Game extends React.Component {
 
   render() {
     const {
-      error, loading, showAnswer, attempt, hand: { cards = [], question, answer, answerId } = {}
+      error, loading, showAnswer, attempt, hand: {
+        cards = [], question, answer, answerId
+      } = {}
     } = this.state;
 
     return (
       <div id="game">
-        <banner className="header">
+        <header className="header">
           <h1>Star Wars Trivia</h1>
           <p>A simple game using <a href="http://www.swapi.com" target="_blank">SWAPI</a>.</p>
-        </banner>
+        </header>
         <button onClick={() => this.deal()}>Deal cards!</button>
         {error && <Error error={ error } />}
         {loading ?
           <Loading /> :
-          <Question { ...{ showAnswer, answer, cards, attempt, onClick: this.setAttempt } }>
+          <Question { ...{
+            showAnswer, answer, cards, attempt, onClick: this.setAttempt
+          } }>
             {question}
           </Question>
         }

src/app/containers/Game/hand.js

@@ -8,8 +8,6 @@ export default class Hand {
     const answerIndex = randomRange(0, 1, 1)[0];
     const factIndex = randomRange(0, 7, 1)[0];
     this.cards = cards;
-    this.card1 = this.cards[0];
-    this.card2 = this.cards[1];
     this.wrongCard = this.cards[1 - answerIndex];
     this.answerCard = this.cards[answerIndex];
     this.answerKey = Object.keys(this.answerCard)[factIndex];
@@ -32,11 +30,11 @@ export default class Hand {
     const wrongAnswer = this.wrongCard[this.answerKey];
     const answer = this.answerCard[this.answerKey];
     switch (true) {
-      case (wrongAnswer === 'unknown' && wrongAnswer !== answer) :
+      case (wrongAnswer === 'unknown' && wrongAnswer !== answer):
         return 'unknown';
-      case (wrongAnswer === answer) :
+      case (wrongAnswer === answer):
         return 'both';
-      default :
+      default:
         return this.answerCard.name;
     }
   }

src/app/containers/Homepage/Homepage.js

@@ -4,14 +4,13 @@ import debug from 'debug';
 debug('lego:Homepage.jsx');
 
 export default class Homepage extends React.Component {
-
   render() {
     return (
       <div id="homepage">
-        <banner className="header">
+        <header className="header">
           <h1>About React Lego</h1>
           <p>Iteratively add more technologies to React Applications.</p>
-        </banner>
+        </header>
         <section>
           <h2>The 'Base' App</h2>
           <p>This demo is the '<strong>base</strong>' app, which includes :</p>

src/app/routes.js

@@ -50,7 +50,9 @@ export const getRoutesConfig = () => [
 export const findRoute = (to) => getRoutesConfig().find((rt) => rt.name === to);
 
 // test this active link and route matching
-export const NamedLink = ({ className, to, children, ...props }) => {
+export const NamedLink = ({
+  className, to, children, ...props
+}) => {
   const bem = bemHelper({ name: 'link' });
   const route = findRoute(to);
   if (!route) throw new Error(`Route to '${to}' not found`);

src/app/utils/index.js

@@ -5,11 +5,11 @@ const navigator = global.navigator && global.navigator.userAgent;
 // hasWindow = true for tests + client
 export const hasWindow = typeof window !== 'undefined';
 // isBrowser = true for client only
-export const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
+export const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('jsdom/') === -1;
 
 const getLocalUrl = () => {
   if (isBrowser) {
-    const location = window.location;
+    const { location } = window;
     if (!location.origin) { // Some browsers (mainly IE) does not have this property
       location.origin = `${location.protocol}//${location.hostname}${location.port
         ? (`:${location.port}`)

src/config/paths.js

@@ -9,4 +9,6 @@ const ICONS = path.join(SRC, 'icons');
 const STYLES = path.join(SRC, 'styles');
 const TESTS = path.join(ROOT, 'tests');
 
-module.exports = { ROOT, SRC, DIST, COMPILED, APP, ICONS, STYLES, TESTS };
+module.exports = {
+  ROOT, SRC, DIST, COMPILED, APP, ICONS, STYLES, TESTS
+};

src/config/webpack.common.js

@@ -1,7 +1,6 @@
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const AssetsPlugin = require('assets-webpack-plugin');
-const cssnano = require('cssnano');
 const Visualizer = require('webpack-visualizer-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
@@ -29,31 +28,7 @@ module.exports = {
       'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
     }),
-    new AssetsPlugin({ filename: 'compiled/webpack-assets.json' }),
-    new webpack.LoaderOptionsPlugin({
-      options: {
-        postcss: [
-          cssnano({
-            autoprefixer: {
-              browsers: [
-                'safari >= 9',
-                'ie 11',
-                'last 2 Chrome versions',
-                'last 2 Firefox versions',
-                'edge 13',
-                'ios_saf 9.0-9.2',
-                'ie_mob 11',
-                'Android >= 4'
-              ],
-              cascade: false,
-              add: true,
-              remove: true
-            },
-            safe: true
-          })
-        ]
-      }
-    })
+    new AssetsPlugin({ filename: 'compiled/webpack-assets.json' })
   ],
   resolve: {
     modules: ['node_modules', SRC],
@@ -70,7 +45,7 @@ module.exports = {
         }
       },
       {
-        test: /\.scss$/,
+        test: /\.s?css$/,
         include: [/src/],
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',

src/config/webpack.config.dev.js

@@ -5,6 +5,7 @@ const { SRC } = require('./paths');
 const defaultConfig = require('./webpack.common');
 
 const devConfig = Object.assign({}, defaultConfig, {
+  mode: 'development',
   entry: {
     app: [`webpack-dev-server/client?http://localhost:${config.PORT}/`, `${SRC}/styles/app.scss`, `${SRC}/client-entry.js`],
     'promise-polyfill': [`${SRC}/promise-polyfill.js`]

src/config/webpack.config.prod.js

@@ -3,6 +3,7 @@ const { SRC } = require('./paths');
 const defaultConfig = require('./webpack.common');
 
 const prodConfig = Object.assign({}, defaultConfig, {
+  mode: 'production',
   entry: {
     app: [`${SRC}/styles/app.scss`, `${SRC}/client-entry.js`],
     'promise-polyfill': [`${SRC}/promise-polyfill.js`]