upgrade react, react-scripts and build overrides

Author: rjwats

interface/.env.development

@@ -1 +1 @@
-REACT_APP_ENDPOINT_ROOT=http://192.168.0.6/rest/
+REACT_APP_ENDPOINT_ROOT=http://192.168.0.26/rest/

interface/.env.production

@@ -1 +1,2 @@
-REACT_APP_ENDPOINT_ROOT=/rest/
+REACT_APP_ENDPOINT_ROOT=/rest/
+GENERATE_SOURCEMAP=false

interface/config-overrides.js

@@ -1,29 +1,29 @@
-const CompressionPlugin = require("compression-webpack-plugin");
 const ManifestPlugin = require('webpack-manifest-plugin');
-const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CompressionPlugin = require("compression-webpack-plugin");
 
 const path = require('path');
 const fs = require('fs');
 
 module.exports = function override(config, env) {
   if (env === "production") {
     // rename the ouput file, we need it's path to be short, for SPIFFS
-    config.output.filename = 'js/[name].[chunkhash:4].js';
-
-    // disable sourcemap for production build
-    config.devtool = false;
+    config.output.filename = 'js/[id].[chunkhash:4].js';
+    config.output.chunkFilename = 'js/[id].[chunkhash:4].js';
 
-    // take out the manifest and service worker
+    // take out the manifest and service worker plugins
     config.plugins = config.plugins.filter(plugin => !(plugin instanceof ManifestPlugin));
-    config.plugins = config.plugins.filter(plugin => !(plugin instanceof SWPrecacheWebpackPlugin));
+    config.plugins = config.plugins.filter(plugin => !(plugin instanceof WorkboxWebpackPlugin.GenerateSW));
 
-    const extractTextPlugin = config.plugins.find((plugin) => plugin instanceof ExtractTextPlugin);
-    extractTextPlugin.filename = "css/[name].[contenthash:4].css";
+    // shorten css filenames
+    const miniCssExtractPlugin = config.plugins.find((plugin) => plugin instanceof MiniCssExtractPlugin);
+    miniCssExtractPlugin.options.filename = "css/[id].[contenthash:4].css";
+    miniCssExtractPlugin.options.chunkFilename = "css/[id].[contenthash:4].c.css";
 
     // add compression plugin, compress javascript
     config.plugins.push(new CompressionPlugin({
-      asset: "[path].gz[query]",
+      filename: "[path].gz[query]",
       algorithm: "gzip",
       test: /\.(js)$/,
       deleteOriginalAssets: true

interface/package.json

@@ -5,17 +5,17 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
-    "compression-webpack-plugin": "^1.1.12",
-    "moment": "^2.22.2",
-    "prop-types": "^15.6.2",
-    "react": "^16.5.1",
-    "react-dom": "^16.5.1",
-    "react-form-validator-core": "^0.3.0",
+    "compression-webpack-plugin": "^2.0.0",
+    "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-form-validator-core": "^0.6.2",
     "react-jss": "^8.6.1",
-    "react-material-ui-form-validator": "^2.0.1",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "1.0.17"
+    "react-material-ui-form-validator": "^2.0.7",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
+    "react-scripts": "2.1.8"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -24,6 +24,12 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "react-app-rewired": "^1.6.2"
-  }
+    "react-app-rewired": "^2.1.1"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

interface/src/forms/WiFiSettingsForm.js

@@ -79,9 +79,9 @@ class WiFiSettingsForm extends React.Component {
   }
 
   render() {
-    const { classes, formRef, wifiSettingsFetched, wifiSettings, errorMessage, selectedNetwork, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
+    const { classes, wifiSettingsFetched, wifiSettings, errorMessage, selectedNetwork, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
     return (
-      <div ref={formRef}>
+      <div>
         {
          !wifiSettingsFetched ?