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,66 +1,68 @@
 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);
-    }
+  state = {
+    show: false,
+    entered: false
+  }
 
-    removeStage() {
-        this.setState({stageContent: ''});
-        clearTimeout(this.timeoutID);
-        this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
-    }
+  componentDidMount() {
+    this.setState({show: true});
+    if(this.props.stage <= 4)
+      this.timeoutID = setTimeout(this.removeStage, 1200); // how soon we start fading out (1500)
+    window.scrollTo(0,0);
+  }
 
-    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>);
+  componentWillUnmount() {
+    clearTimeout(this.timeoutID);
+  }
 
-        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});
-    }
+  removeStage = () => {
+    this.setState({show: false});
+    clearTimeout(this.timeoutID);
+    this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
+  }
 
-    componentDidMount() {
-        if(this.props.stage<=4)
-            this.timeoutID = setTimeout(this.removeStage, 1200); // how soon we start fading out (1500)
-        this.showStage();
-        window.scrollTo(0,0);
-    }
+  showStage() {
+    let stageDescription;
+    let stageSecondaryDescription = false;
 
-    componentWillUnmount() {
-        clearTimeout(this.timeoutID);
-    }
+    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 (
+        <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>
+      );
 
-    render() {
-        return (
-            <ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={900} transitionLeaveTimeout={900}>
-                {this.state.stageContent}
-            </ReactCSSTransitionGroup>
-        );
-    }
+    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>
+    );
+  }
 }
 
-export default ShowStage;
+export default ShowStage;

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;
 }

src/index.js

@@ -4,4 +4,4 @@ import Bootstrap from './assets/stylesheets/bootstrap.min.css';
 import App from './components/App/App';
 
 let element = React.createElement(App, {});
-render(element, document.querySelector('.app'));
+render(element, document.querySelector('.app'));

webpack.config.js

@@ -1,57 +1,53 @@
-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',
-            filename: './index.html'
-        }),
-        new webpack.HotModuleReplacementPlugin(),
-        new webpack.LoaderOptionsPlugin({
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: './src/index.html',
+      filename: './index.html'
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
             options: {
-                postcss: function() {
-                    return [autoprefixer, precss];
-                }
-            }
-        })
-    ],
-    module: {
-        loaders: [
-            {
-                test: /\.jsx?$/,
-                exclude: /node_modules/,
-                loaders: ['react-hot-loader', 'babel-loader']
-            }, {
-                test: /\.scss$/,
-                loaders: ['style-loader', 'css-loader', 'postcss-loader']
-            }, {
-                test: /\.css$/,
-                loaders: ['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'
+              importLoaders: 1
             }
+          },
+          {
+            loader: 'postcss-loader'
+          }
         ]
-    }
-};
+      },
+      {
+        test: /\.css$/,
+        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,75 +1,67 @@
-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/',
-        filename: 'bundle.js'
-    },
-    resolve: {
-        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({
+  context: __dirname,
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: './dist/',
+    filename: 'bundle.js'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+  plugins: [
+    new SWPrecacheWebpackPlugin( {
+      cacheId: 'kana-quiz',
+      filename: 'sw.js',
+      stripPrefix: '/home/anzz/code/kanaquiz/',
+      maximumFileSizeToCacheInBytes: 4194304,
+      minify: true,
+      runtimeCaching: [{
+        handler: 'networkFirst',
+        urlPattern: /\.(woff2|svg|ttf|eot|woff|html)$/,
+      }],
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
             options: {
-                postcss: function() {
-                    return [autoprefixer, precss];
-                }
-            }
-        }),
-        new SWPrecacheWebpackPlugin( {
-            cacheId: 'kana-quiz',
-            filename: 'sw.js',
-	    stripPrefix: '/home/anzz/Code/kanaquiz/',
-            maximumFileSizeToCacheInBytes: 4194304,
-            minify: true,
-            runtimeCaching: [{
-                handler: 'networkFirst',
-                urlPattern: /\.(woff2|svg|ttf|eot|woff|html)$/,
-            }],
-        })
-    ],
-    module: {
-        loaders: [
-            {
-                test: /\.jsx?$/,
-                exclude: /node_modules/,
-                loaders: ['babel-loader']
-            }, {
-                test: /\.scss$/,
-                loaders: ['style-loader', 'css-loader', 'postcss-loader']
-            }, {
-                test: /\.css$/,
-                loaders: ['style-loader', 'css-loader']
-            }, {
-                test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/,
-                loader: 'url-loader?limit=8192'
-            }, {
-                test: /\.(eot|ttf)$/,
-                loader: 'file-loader'
+              importLoaders: 1
             }
+          },
+          {
+            loader: 'postcss-loader'
+          }
         ]
-    }
+      },
+      {
+        test: /\.css$/,
+        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'
+      }
+    ]
+  }
 };