Webpack use

.babelrc

@@ -0,0 +1,25 @@
+{
+    "presets": [
+   [ "@babel/preset-env", {
+     "modules": "auto",
+     "targets": {
+    "browsers": [
+      "last 2 Chrome versions",
+      "last 2 Firefox versions",
+      "last 2 Safari versions",
+      "last 2 iOS versions",
+      "last 1 Android version",
+      "last 1 ChromeAndroid version",
+      "ie 11"
+    ]
+     }
+   } ],
+    ["@babel/preset-react", {
+      "runtime": "automatic"
+    }]
+    ],
+    "plugins": [ 
+	"@babel/plugin-proposal-class-properties",
+	"@babel/plugin-transform-runtime"
+		]
+  }

.eslintrc

@@ -18,13 +18,14 @@
     "no-return-assign": ["off"],
     "react/jsx-props-no-spreading": ["off"],
     "react/destructuring-assignment": ["off"],
-    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"]
+    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
+    "react/jsx-one-expression-per-line": "off"
   },
   "settings": {
     "import/resolver": {
       "node": {
         "paths": ["src"]
       }
-    },
-  },
-}
+    }
+  }
+}

.gitignore

@@ -9,7 +9,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

config/paths.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  // Source files
+  src: path.resolve(__dirname, '../src'),
+
+  // Production build files
+  build: path.resolve(__dirname, '../dist'),
+
+  // Static files that get copied to build folder
+  public: path.resolve(__dirname, '../public'),
+};

config/webpack.common.js

@@ -0,0 +1,89 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable prefer-template */
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+const paths = require('./paths');
+
+module.exports = {
+  // Where webpack looks to start building the bundle
+  entry: [paths.src + '/index.js'],
+
+  // Where webpack outputs the assets and bundles
+  output: {
+    path: paths.build,
+    filename: '[name].bundle.js',
+    publicPath: '/',
+  },
+  resolve: {
+    modules: [path.resolve('./node_modules'), path.resolve('./src')],
+    preferRelative: true,
+  },
+  // Customize the webpack build process
+  plugins: [
+    // Removes/cleans build folders and unused assets when rebuilding
+    new CleanWebpackPlugin(),
+
+    new MiniCssExtractPlugin({
+      filename: 'styles/[name].[contenthash].css',
+      chunkFilename: '[id].[contenthash].css',
+    }),
+    // Copies files from target to destination folder
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: paths.src + '/assets',
+          to: 'assets',
+          globOptions: {
+            ignore: ['*.DS_Store'],
+          },
+        },
+        {
+          from: paths.public + '/locales',
+          to: 'locales',
+          globOptions: {
+            ignore: ['*.DS_Store'],
+          },
+        },
+        {
+          from: paths.public + '/config.json',
+          to: 'config.json',
+        },
+      ],
+    }),
+
+    // Generates an HTML file from a template
+    // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
+    new HtmlWebpackPlugin({
+      title: 'uCentralGW',
+      favicon: paths.public + '/favicon.ico',
+      template: paths.public + '/index.html', // template file
+      filename: 'index.html', // output file
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+
+      {
+        test: /\.(css|scss)$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
+
+      // Images: Copy image files to build folder
+      { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },
+    ],
+  },
+};

config/webpack.dev.js

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable prefer-template */
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const { merge } = require('webpack-merge');
+const paths = require('./paths');
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  // Set the mode to development or production
+  mode: 'development',
+
+  // Control how source maps are generated
+  devtool: 'inline-source-map',
+
+  // Spin up a server for quick development
+  devServer: {
+    historyApiFallback: true,
+    contentBase: paths.build,
+    open: false,
+    compress: true,
+    hot: true,
+    port: 3000,
+  },
+
+  module: {
+    rules: [
+      // ... other rules
+      {
+        test: /\.[js]sx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              // ... other options
+              plugins: [
+                // ... other plugins
+                require.resolve('react-refresh/babel'),
+              ].filter(Boolean),
+            },
+          },
+          'eslint-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    // new webpack.HotModuleReplacementPlugin(),
+    new ReactRefreshWebpackPlugin(),
+  ].filter(Boolean),
+});

config/webpack.prod.js

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable prefer-template */
+const { merge } = require('webpack-merge');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const paths = require('./paths');
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: false,
+  output: {
+    path: paths.build,
+    publicPath: '/',
+    filename: 'js/[name].[contenthash].bundle.js',
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'styles/[name].[contenthash].css',
+      chunkFilename: '[contenthash].css',
+    }),
+  ],
+  module: {
+    rules: [],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [`...`, new TerserPlugin(), new CssMinimizerPlugin()],
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+});

jsconfig.json

@@ -4,6 +4,6 @@
     "paths": {
       "*": ["*"]
     }
-  }, 
+  },
   "include": ["src"]
 }

package.json

@@ -1,7 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "0.9.13",
-  "private": true,
+  "version": "0.9.14",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",
@@ -25,12 +24,12 @@
     "sass": "^1.35.1",
     "uuid": "^8.3.2"
   },
+  "main": "index.js",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "format": "prettier --write 'src/**/*.js'"
+    "start": "webpack serve --config config/webpack.dev.js",
+    "build": "webpack --config config/webpack.prod.js",
+    "format": "prettier --write 'src/**/*.js'",
+    "eslint-fix": "eslint --fix 'src/**/*.js'"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -46,28 +45,46 @@
       "prettier --write"
     ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@svgr/webpack": "^5.5.0",
+    "autoprefixer": "^10.2.6",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.28.0",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^7.0.0",
+    "css-loader": "^5.2.6",
+    "css-minimizer-webpack-plugin": "^2.0.0",
+    "dotenv-webpack": "^6.0.4",
+    "eslint": "^7.29.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "html-webpack-plugin": "^5.3.2",
     "husky": "^4.3.8",
     "lint-staged": "^11.0.0",
-    "prettier": "^2.3.1",
-    "pretty-quick": "^3.1.0"
+    "mini-css-extract-plugin": "^1.6.1",
+    "node-sass": "^5.0.0",
+    "path": "^0.12.7",
+    "prettier": "^2.3.2",
+    "react-refresh": "^0.9.0",
+    "sass-loader": "^11.1.1",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.4",
+    "webpack": "^5.40.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.8.0"
   }
 }

public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <title>uCentralGW</title>

src/components/DeviceHealth/index.js

@@ -217,11 +217,13 @@ const DeviceHealth = () => {
             </div>
             <CRow className={styles.spacedRow}>
               <CCol>
-                {t('common.from')}:
+                {t('common.from')}
+                :
                 <DatePicker includeTime onChange={(date) => modifyStart(date)} />
               </CCol>
               <CCol>
-                {t('common.to')}:
+                {t('common.to')}
+                :
                 <DatePicker includeTime onChange={(date) => modifyEnd(date)} />
               </CCol>
             </CRow>

src/components/FirmwareUpgradeModal/UpgradeWaitingBody.js

@@ -84,11 +84,11 @@ const UpgradeWaitingBody = ({ serialNumber }) => {
       <div className="consoleBox">
         {labelsToShow.map((label) => (
           <p key={createUuid()}>
-            {new Date().toString()}: {label}
+            {new Date().toString()}:{label}
           </p>
         ))}
         <p>
-          {t('common.seconds_elapsed')}: {secondsElapsed}
+          {t('common.seconds_elapsed')}:{secondsElapsed}
         </p>
       </div>
     </CModalBody>

src/components/TraceModal/index.js

@@ -166,6 +166,7 @@ const TraceModal = ({ show, toggleModal }) => {
             <CCol xs="12" md="8">
               {usingDuration ? (
                 <CSelect
+                  custom
                   defaultValue={duration}
                   disabled={blockFields}
                   onChange={(e) => setDuration(e.target.value)}
@@ -177,6 +178,7 @@ const TraceModal = ({ show, toggleModal }) => {
                 </CSelect>
               ) : (
                 <CSelect
+                  custom
                   defaultValue={packets}
                   disabled={blockFields}
                   onChange={(e) => setPackets(e.target.value)}

src/constants/index.js

@@ -0,0 +1,9 @@
+export const LANGUAGE_OPTIONS = [
+  { value: 'de', label: 'Deutsche' },
+  { value: 'es', label: 'Español' },
+  { value: 'en', label: 'English' },
+  { value: 'fr', label: 'Français' },
+  { value: 'pt', label: 'Portugues' },
+];
+
+export const DUMMY = true;

src/layout/Header/index.js

@@ -17,6 +17,7 @@ import { logout } from 'utils/authHelper';
 import routes from 'routes';
 import LanguageSwitcher from 'components/LanguageSwitcher';
 import { useAuth } from 'contexts/AuthProvider';
+import { LANGUAGE_OPTIONS } from 'constants/index.js';
 
 const TheHeader = ({ showSidebar, setShowSidebar }) => {
   const { t, i18n } = useTranslation();
@@ -48,7 +49,7 @@ const TheHeader = ({ showSidebar, setShowSidebar }) => {
       <CHeaderNav className="d-md-down-none mr-auto" />
 
       <CHeaderNav className="px-3">
-        <LanguageSwitcher />
+        <LanguageSwitcher i18n={i18n} options={LANGUAGE_OPTIONS} />
       </CHeaderNav>
 
       <CHeaderNav className="px-3">

src/layout/Sidebar/index.js

@@ -12,7 +12,6 @@ import {
 } from '@coreui/react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import logoBar from 'assets/OpenWiFi_LogoLockup_WhiteColour.svg';
 import styles from './index.module.scss';
 
 const TheSidebar = ({ showSidebar, setShowSidebar }) => {
@@ -32,12 +31,12 @@ const TheSidebar = ({ showSidebar, setShowSidebar }) => {
       <CSidebarBrand className="d-md-down-none" to="/devices">
         <img
           className={[styles.sidebarImgFull, 'c-sidebar-brand-full'].join(' ')}
-          src={logoBar}
+          src="assets/OpenWiFi_LogoLockup_WhiteColour.svg"
           alt="OpenWifi"
         />
         <img
           className={[styles.sidebarImgMinimized, 'c-sidebar-brand-minimized'].join(' ')}
-          src={logoBar}
+          src="assets/OpenWiFi_LogoLockup_WhiteColour.svg"
           alt="OpenWifi"
         />
       </CSidebarBrand>

src/layout/index.js

@@ -1,17 +1,39 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { logout } from 'utils/authHelper';
+import routes from 'routes';
+import { useAuth } from 'contexts/AuthProvider';
+import { LANGUAGE_OPTIONS } from 'constants/index.js';
+import Header from './Header';
+import Sidebar from './Sidebar';
 import TheContent from './Content';
-import TheSidebar from './Sidebar';
 import TheFooter from './Footer';
-import TheHeader from './Header';
 
 const TheLayout = () => {
   const [showSidebar, setShowSidebar] = useState('responsive');
+  const { endpoints, currentToken } = useAuth();
+  const { t, i18n } = useTranslation();
 
   return (
     <div className="c-app c-default-layout">
-      <TheSidebar showSidebar={showSidebar} setShowSidebar={setShowSidebar} />
+      <Sidebar
+        showSidebar={showSidebar}
+        setShowSidebar={setShowSidebar}
+        t={t}
+        logo="assets/OpenWiFi_LogoLockup_DarkGreyColour.svg"
+      />
       <div className="c-wrapper">
-        <TheHeader showSidebar={showSidebar} setShowSidebar={setShowSidebar} />
+        <Header
+          showSidebar={showSidebar}
+          setShowSidebar={setShowSidebar}
+          routes={routes}
+          t={t}
+          i18n={i18n}
+          logout={logout}
+          authToken={currentToken}
+          endpoints={endpoints}
+          options={LANGUAGE_OPTIONS}
+        />
         <div className="c-body">
           <TheContent />
         </div>

src/pages/LoginPage/index.js

@@ -22,12 +22,12 @@ import CIcon from '@coreui/icons-react';
 import { useAuth } from 'contexts/AuthProvider';
 import { cilUser, cilLockLocked, cilLink } from '@coreui/icons';
 import axiosInstance from 'utils/axiosInstance';
-import logo from 'assets/OpenWiFi_LogoLockup_DarkGreyColour.svg';
 import LanguageSwitcher from 'components/LanguageSwitcher';
+import { LANGUAGE_OPTIONS } from 'constants/index.js';
 import styles from './index.module.scss';
 
 const Login = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { setCurrentToken, setEndpoints } = useAuth();
   const [userId, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -141,7 +141,7 @@ const Login = () => {
           <CCol md="8">
             <img
               className={[styles.logo, 'c-sidebar-brand-full'].join(' ')}
-              src={logo}
+              src="assets/OpenWiFi_LogoLockup_DarkGreyColour.svg"
               alt="OpenWifi"
             />
             <CCardGroup>
@@ -231,7 +231,7 @@ const Login = () => {
                       </CCol>
                       <CCol xs="6">
                         <div className={styles.languageSwitcher}>
-                          <LanguageSwitcher />
+                          <LanguageSwitcher i18n={i18n} options={LANGUAGE_OPTIONS} />
                         </div>
                       </CCol>
                     </CRow>

src/scss/_custom.scss

@@ -1,3 +1,9 @@
 pre.ignore {
   font-family: inherit;
 }
+
+.custom-select {
+  appearance: none;
+  -moz-appearance: none;
+-webkit-appearance: none;
+}