Full refactor

.env.development

@@ -0,0 +1,3 @@
+# Change the IP address to that of your ESP device to enable local development of the UI.
+# Remember to also enable CORS in platformio.ini before uploading the code to the device.
+# REACT_APP_ENDPOINT_ROOT=http://192.168.0.20/rest/

.env.production

@@ -0,0 +1,2 @@
+REACT_APP_ENDPOINT_ROOT=/rest/
+GENERATE_SOURCEMAP=true

.gitignore

@@ -78,3 +78,6 @@ typings/
 
 # dotenv environment variables file
 .env
+
+# local build settings
+local.settings

config-overrides.js

@@ -0,0 +1,36 @@
+const ManifestPlugin = require('webpack-manifest-plugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+// const ProgmemGenerator = require('./progmem-generator.js');
+
+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/[id].[chunkhash:4].js';
+    config.output.chunkFilename = 'js/[id].[chunkhash:4].js';
+    // 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";
+
+    // 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 WorkboxWebpackPlugin.GenerateSW));
+
+    // build progmem data files
+    // config.plugins.push(new ProgmemGenerator({ outputPath: "../lib/framework/WWWData.h", bytesPerLine: 20 }));
+
+    // add compression plugin, compress javascript
+    config.plugins.push(new CompressionPlugin({
+        filename: "[path].gz[query]",
+        algorithm: "gzip",
+        test: /\.(css|js|html|woff2|json|map)$/,
+        deleteOriginalAssets: true
+    }));
+    }
+    return config;
+}

local.default.settings

@@ -0,0 +1,2 @@
+REACT_APP_ENDPOINT_ROOT=http://192.168.1.5/rest/
+SERVER_BUILD_PATH=/build

package.json

@@ -4,24 +4,27 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/user-event": "^8.0.3",
+    "compression-webpack-plugin": "^3.1.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
-    "react-router-hash-link": "^1.2.2",
     "react-scripts": "3.3.0",
-    "uikit": "^3.2.4"
+    "uikit": "^3.2.7"
   },
   "devDependencies": {
     "node-sass": "^4.13.0",
-    "http-serve": "^1.0.1"
+    "http-serve": "^1.0.1",
+    "react-app-rewired": "^2.1.5"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build && yarn postinstall",
+    "test": "react-app-rewired test --env=jsdom",
+    "eject": "react-scripts eject",
+    "serve": "http-serve ./build --gzip",
+    "postinstall": "cp -r ./build/* $INIT_CWD/../platformio/EspJsonWs/data"
   },
   "eslintConfig": {
     "extends": "react-app"

src/style/index.scss

@@ -20,4 +20,6 @@ $global-link-color: #DA7D02;
 @import "../../node_modules/uikit/src/scss/components/padding.scss";
 @import "../../node_modules/uikit/src/scss/components/nav.scss";
 @import "../../node_modules/uikit/src/scss/components/button.scss";
-@import "../../node_modules/uikit/src/scss/components/form.scss";
+@import "../../node_modules/uikit/src/scss/components/form.scss";
+@import "../../node_modules/uikit/src/scss/components/icon.scss";
+@import "../../node_modules/uikit/src/scss/components/table.scss";

src/views/home/home.constants.js

@@ -0,0 +1,30 @@
+export const AP_LIST_POPULATION_ERROR = 'Access Point list cannot be populated!'
+export const AP_LIST_RETRY_ERROR = 'Polling will retry in '
+export const POLL_TIMEOUT = 300
+// From ESP32 documentation:
+// https://github.com/espressif/arduino-esp32/blob/master/tools/sdk/include/esp32/esp_wifi_types.h
+export const WIFI_AUTH_OPEN = 0
+export const WIFI_AUTH_WEP = 1
+export const WIFI_AUTH_WPA_PSK = 2
+export const WIFI_AUTH_WPA2_PSK = 3
+export const WIFI_AUTH_WPA_WPA2_PSK = 4
+export const WIFI_AUTH_WPA2_ENTERPRISE = 5
+// Translate to readable strings
+export const getEncryptionType = encryptionType => {
+    switch (encryptionType) {
+        case (WIFI_AUTH_OPEN):
+           return "Open"
+        case (WIFI_AUTH_WEP):
+            return "WEP"
+        case (WIFI_AUTH_WPA_PSK):
+            return "WPA_PSK"
+        case (WIFI_AUTH_WPA2_PSK):
+            return "WPA2_PSK"
+        case (WIFI_AUTH_WPA_WPA2_PSK):
+            return "WPA_WPA2_PSK"
+        case (WIFI_AUTH_WPA2_ENTERPRISE):
+            return "WPA2_ENTERPRISE"
+        default:
+            return "Undefined"
+    }
+}