upgrade everything

.babelrc

@@ -1,4 +1,7 @@
 {
-    "presets" : ["es2015", "react"],
-    "plugins" : ["transform-object-assign"]
+    "presets" : [
+        ["@babel/preset-env", { "useBuiltIns": "usage" }],
+        "@babel/preset-react"
+    ],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
 }

.editorconfig

@@ -5,6 +5,6 @@ end_of_line = lf
 insert_final_newline = true
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 trim_trailing_whitespace = true
 

package.json

@@ -1,13 +1,13 @@
 {
   "name": "kanaquiz",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Application for studying hiragana & katakana characters.",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --host 0.0.0.0",
-    "mobile": "webpack-dev-server --host 0.0.0.0 --public 192.168.1.8:8080",
-    "build": "webpack -p --config webpack.config.prod.js"
+    "start": "webpack-dev-server --open --mode development --host 0.0.0.0 --config webpack.config.js",
+    "mobile": "webpack-dev-server --open --mode development --host 0.0.0.0 --public 192.168.1.8:8080",
+    "build": "webpack --mode production --config webpack.config.prod.js"
   },
   "repository": {
     "type": "git",
@@ -19,32 +19,37 @@
     "url": "https://github.com/anzzstuff/kanaquiz/issues"
   },
   "homepage": "https://github.com/anzzstuff/kanaquiz#readme",
+  "browserslist": [
+    "> 0.25%",
+    "not dead"
+  ],
   "devDependencies": {
-    "autoprefixer": "^6.3.7",
-    "babel-core": "^6.24.0",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.11.1",
-    "css-loader": "^0.27.3",
-    "file-loader": "^0.10.1",
-    "html-webpack-plugin": "^2.22.0",
-    "postcss": "^5.0.21",
-    "postcss-loader": "^1.3.3",
-    "precss": "^1.4.0",
-    "react-hot-loader": "^1.3.0",
-    "style-loader": "^0.14.1",
-    "sw-precache-webpack-plugin": "^0.10.1",
-    "url-loader": "^0.5.7",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.2"
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-react": "^7.0.0",
+    "autoprefixer": "^9.3.1",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^1.0.1",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "postcss": "^7.0.5",
+    "postcss-loader": "^3.0.0",
+    "precss": "^3.1.2",
+    "react-hot-loader": "^4.3.12",
+    "style-loader": "^0.23.1",
+    "sw-precache-webpack-plugin": "^0.11.5",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
-    "postcss": "^5.1.0",
-    "prop-types": "^15.5.8",
-    "react": "^15.2.1",
-    "react-addons-css-transition-group": "^15.3.0",
-    "react-dom": "^15.2.1",
-    "react-toggle-switch": "^2.1.2"
+    "@babel/polyfill": "^7.0.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-toggle-switch": "^3.0.4",
+    "react-transition-group": "^2.5.0"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('precss'),
+    require('autoprefixer')
+  ]
+}

src/components/Game/ShowStage.jsx

@@ -1,52 +1,17 @@
 import React, { Component } from 'react';
 import './ShowStage.scss';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 class ShowStage extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            stageContent: ''
-        }
-        this.showStage = this.showStage.bind(this);
-        this.removeStage = this.removeStage.bind(this);
-    }
-
-    removeStage() {
-        this.setState({stageContent: ''});
-        clearTimeout(this.timeoutID);
-        this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
-    }
-
-    showStage() {
-        let stageDescription;
-        let stageSecondaryDescription = false;
-        if(this.props.stage==1) stageDescription = 'Choose one';
-        if(this.props.stage==2) { stageDescription = 'Choose one'; stageSecondaryDescription = 'Reverse'; }
-        if(this.props.stage==3) stageDescription = 'Write the answer';
-        if(this.props.stage==4) { stageDescription = 'Write the answer'; stageSecondaryDescription = 'Three at once'; }
-        let stageContent = (<div className="text-center show-stage">
-                <h1>Stage {this.props.stage}</h1>
-                <h3>{stageDescription}</h3>
-                {stageSecondaryDescription?<h4>{stageSecondaryDescription}</h4>:''}
-            </div>);
-
-        if(this.props.stage==5) {
-            stageContent = (<div className="text-center show-end">
-                <h1>Congratulations!</h1>
-                <h3>You have passed all 4 stages.</h3>
-                <h4>Would you like to keep playing or go back to menu?</h4>
-                <p><button className="btn btn-danger keep-playing" onClick={()=>this.props.lockStage(4)}>Keep playing</button></p>
-                <p><button className="btn btn-danger back-to-menu" onClick={this.props.handleEndGame}>Back to menu</button></p>
-            </div>)
-        }
-        this.setState({stageContent: stageContent});
+  state = {
+    show: false,
+    entered: false
   }
 
   componentDidMount() {
-        if(this.props.stage<=4)
+    this.setState({show: true});
+    if(this.props.stage <= 4)
       this.timeoutID = setTimeout(this.removeStage, 1200); // how soon we start fading out (1500)
-        this.showStage();
     window.scrollTo(0,0);
   }
 
@@ -54,11 +19,48 @@ class ShowStage extends Component {
     clearTimeout(this.timeoutID);
   }
 
-    render() {
+  removeStage = () => {
+    this.setState({show: false});
+    clearTimeout(this.timeoutID);
+    this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
+  }
+
+  showStage() {
+    let stageDescription;
+    let stageSecondaryDescription = false;
+
+    if(this.props.stage==1) stageDescription = 'Choose one';
+    else if(this.props.stage==2) { stageDescription = 'Choose one'; stageSecondaryDescription = 'Reverse'; }
+    else if(this.props.stage==3) stageDescription = 'Write the answer';
+    else if(this.props.stage==4) { stageDescription = 'Write the answer'; stageSecondaryDescription = 'Three at once'; }
+    else if(this.props.stage==5)
       return (
-            <ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={900} transitionLeaveTimeout={900}>
-                {this.state.stageContent}
-            </ReactCSSTransitionGroup>
+        <div className="text-center show-end">
+          <h1>Congratulations!</h1>
+          <h3>You have passed all 4 stages.</h3>
+          <h4>Would you like to keep playing or go back to menu?</h4>
+          <p><button className="btn btn-danger keep-playing" onClick={()=>this.props.lockStage(4)}>Keep playing</button></p>
+          <p><button className="btn btn-danger back-to-menu" onClick={this.props.handleEndGame}>Back to menu</button></p>
+        </div>
+      );
+
+    return (
+      <div className="text-center show-stage">
+        <h1>Stage {this.props.stage}</h1>
+        <h3>{stageDescription}</h3>
+        { stageSecondaryDescription ? <h4>{stageSecondaryDescription}</h4> : '' }
+      </div>
+    );
+  }
+
+  render() {
+    const content = this.showStage();
+    const { show } = this.state;
+
+    return (
+      <CSSTransition classNames="stage" timeout={{enter: 900, exit: 900}} in={show} unmountOnExit>
+        {state => content}
+      </CSSTransition>
     );
   }
 }

src/components/Game/ShowStage.scss

@@ -30,11 +30,11 @@
   transition: opacity 1s ease-in;
 }
 
-.stage-leave {
+.stage-exit {
   opacity: 1;
 }
 
-.stage-leave.stage-leave-active {
+.stage-exit.stage-exit-active {
   opacity: 0.01;
   transition: opacity 1s ease-in;
 }

webpack.config.js

@@ -1,54 +1,50 @@
-const webpack = require('webpack');
-const fs = require('fs');
-const path = require('path');
-const autoprefixer = require('autoprefixer');
-const precss = require('precss');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-    entry: [
-        'webpack-dev-server/client?http://localhost:8080',
-        'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
-        './src/index'
-    ],
-    output: {
-        path: path.resolve(__dirname, './dist'),
-        publicPath: '/',
-        filename: 'bundle.js'
-    },
   resolve: {
     extensions: ['.js', '.jsx']
   },
   plugins: [
     new HtmlWebPackPlugin({
-            template: 'src/index.html',
+      template: './src/index.html',
       filename: './index.html'
-        }),
-        new webpack.HotModuleReplacementPlugin(),
-        new webpack.LoaderOptionsPlugin({
-            options: {
-                postcss: function() {
-                    return [autoprefixer, precss];
-                }
-            }
     })
   ],
   module: {
-        loaders: [
+    rules: [
       {
-                test: /\.jsx?$/,
+        test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-                loaders: ['react-hot-loader', 'babel-loader']
-            }, {
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
         test: /\.scss$/,
-                loaders: ['style-loader', 'css-loader', 'postcss-loader']
-            }, {
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1
+            }
+          },
+          {
+            loader: 'postcss-loader'
+          }
+        ]
+      },
+      {
         test: /\.css$/,
-                loaders: ['style-loader', 'css-loader']
-            }, {
+        use: ['style-loader', 'css-loader']
+      },
+      {
         test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/,
         loader: 'url-loader?limit=25000'
-            }, {
+      }, 
+      {
         test: /\.(eot|ttf)$/,
         loader: 'file-loader'
       }

webpack.config.prod.js

@@ -1,17 +1,8 @@
-const webpack = require('webpack');
-const fs = require('fs');
-const path = require('path');
-const autoprefixer = require('autoprefixer');
-const precss = require('precss');
-const HtmlWebPackPlugin = require('html-webpack-plugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+const path = require('path');
 
 module.exports = {
   context: __dirname,
-    devtool: 'cheap-module-source-map',
-    entry: [
-        './src/index'
-    ],
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: './dist/',
@@ -21,28 +12,10 @@ module.exports = {
     extensions: ['.js', '.jsx']
   },
   plugins: [
-        new HtmlWebPackPlugin({
-            template: 'src/index.html',
-            filename: '../index.html'
-        }),
-        new webpack.optimize.UglifyJsPlugin({
-            sourceMap: true,
-            compress:{
-                warnings: false
-            },
-        }),
-        new webpack.NoEmitOnErrorsPlugin(),
-        new webpack.LoaderOptionsPlugin({
-            options: {
-                postcss: function() {
-                    return [autoprefixer, precss];
-                }
-            }
-        }),
     new SWPrecacheWebpackPlugin( {
       cacheId: 'kana-quiz',
       filename: 'sw.js',
-	    stripPrefix: '/home/anzz/Code/kanaquiz/',
+      stripPrefix: '/home/anzz/code/kanaquiz/',
       maximumFileSizeToCacheInBytes: 4194304,
       minify: true,
       runtimeCaching: [{
@@ -52,21 +25,40 @@ module.exports = {
     })
   ],
   module: {
-        loaders: [
+    rules: [
       {
-                test: /\.jsx?$/,
+        test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-                loaders: ['babel-loader']
-            }, {
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
         test: /\.scss$/,
-                loaders: ['style-loader', 'css-loader', 'postcss-loader']
-            }, {
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1
+            }
+          },
+          {
+            loader: 'postcss-loader'
+          }
+        ]
+      },
+      {
         test: /\.css$/,
-                loaders: ['style-loader', 'css-loader']
-            }, {
+        use: ['style-loader', 'css-loader']
+      },
+      {
         test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/,
-                loader: 'url-loader?limit=8192'
-            }, {
+        loader: 'url-loader?limit=25000'
+      }, 
+      {
         test: /\.(eot|ttf)$/,
         loader: 'file-loader'
       }