Re-engineer UI in TypeScript (#89)

* Re-engineer UI in TypeScript
* Switch to named imports where possible
* Restructure file system layout
* Update depencencies
* Update README.md
* Change explicit colors for better support for dark theme

Author: rjwats

README.md

@@ -213,21 +213,36 @@ The framework, and MaterialUI allows for a reasonable degree of customization wi
 
 ### Theming the app
 
-The app can be easily themed by editing the [MaterialUI theme](https://material-ui.com/customization/themes/). Edit the theme in ['interface/src/App.js'](interface/src/App.js) as you desire:
+The app can be easily themed by editing the [MaterialUI theme](https://material-ui.com/customization/theming/). Edit the theme in ['interface/src/CustomMuiTheme.tsx'](interface/src/CustomMuiTheme.tsx) as you desire. For example, here is a dark theme:
 
 ```js
 const theme = createMuiTheme({
   palette: {
-    primary: red,
-    secondary: deepOrange,
-    highlight_idle: blueGrey[900],
-    highlight_warn: orange[500],
-    highlight_error: red[500],
-    highlight_success: green[500],
-  },
+    type:"dark",
+    primary: {
+      main: '#222',
+    },
+    secondary: {
+      main: '#666',
+    },
+    info: {
+      main: blueGrey[900]
+    },
+    warning: {
+      main: orange[500]
+    },
+    error: {
+      main: red[500]
+    },
+    success: {
+      main: green[500]
+    }
+  }
 });
 ```
 
+![Dark Theme](/media/dark.png?raw=true "Dark Theme")
+
 ### Changing the app icon
 
 You can replace the app icon is located at ['interface/public/app/icon.png'](interface/public/app/icon.png) with one of your preference. A 256 x 256 PNG is recommended for best compatibility.
@@ -448,7 +463,7 @@ Serial.println(wifiSettings.ssid);
 Configure the SSID and password:
 
 ```cpp
-WiFiSettings wifiSettings = esp8266React->getWiFiSettingsService()->fetch();
+WiFiSettings wifiSettings = esp8266React.getWiFiSettingsService()->fetch();
 wifiSettings.ssid = "MyNetworkSSID";
 wifiSettings.password = "MySuperSecretPassword";
 esp8266React.getWiFiSettingsService()->update(wifiSettings);

interface/.env.development

@@ -1,3 +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.29/rest/
+REACT_APP_ENDPOINT_ROOT=http://192.168.0.21/rest/

interface/package-lock.json

@@ -3,37 +3,51 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.7.0",
-    "@material-ui/icons": "^4.5.1",
-    "compression-webpack-plugin": "^2.0.0",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "@types/jwt-decode": "^2.2.1",
+    "@types/node": "^12.12.22",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.4",
+    "@types/react-material-ui-form-validator": "^2.0.5",
+    "@types/react-router": "^5.1.3",
+    "@types/react-router-dom": "^5.1.3",
+    "compression-webpack-plugin": "^3.0.1",
     "jwt-decode": "^2.2.0",
     "mime-types": "^2.1.25",
     "moment": "^2.24.0",
-    "notistack": "^0.9.6",
-    "prop-types": "^15.7.2",
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
+    "notistack": "^0.9.7",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-form-validator-core": "^0.6.4",
-    "react-jss": "^10.0.0",
-    "react-material-ui-form-validator": "^2.0.9",
-    "react-router": "^5.1.1",
-    "react-router-dom": "^5.1.1",
-    "react-scripts": "3.0.1",
+    "react-material-ui-form-validator": "^2.0.10",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.3.1",
+    "typescript": "^3.7.5",
     "zlib": "^1.0.5"
   },
   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
-    "test": "react-app-rewired test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "devDependencies": {
-    "react-app-rewired": "^2.1.3"
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  "devDependencies": {
+    "react-app-rewired": "^2.1.5"
+  }
 }

interface/package.json

@@ -0,0 +1,47 @@
+import React, { Component, RefObject } from 'react';
+import { Redirect, Route, Switch } from 'react-router';
+import { SnackbarProvider } from 'notistack';
+
+import { IconButton } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+import AppRouting from './AppRouting';
+import CustomMuiTheme from './CustomMuiTheme';
+import { PROJECT_NAME } from './api';
+
+// this redirect forces a call to authenticationContext.refresh() which invalidates the JWT if it is invalid.
+const unauthorizedRedirect = () => <Redirect to="/" />;
+
+class App extends Component {
+
+  notistackRef: RefObject<any> = React.createRef();
+
+  componentDidMount() {
+    document.title = PROJECT_NAME;
+  }
+
+  onClickDismiss = (key: string | number | undefined) => () => {
+    this.notistackRef.current.closeSnackbar(key);
+  }
+
+  render() {
+    return (
+      <CustomMuiTheme>
+        <SnackbarProvider maxSnack={3} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          ref={this.notistackRef}
+          action={(key) => (
+            <IconButton onClick={this.onClickDismiss(key)} size="small">
+              <CloseIcon />
+            </IconButton>
+          )}>
+          <Switch>
+            <Route exact path="/unauthorized" component={unauthorizedRedirect} />
+            <Route component={AppRouting} />
+          </Switch>
+        </SnackbarProvider>
+      </CustomMuiTheme>
+    );
+  }
+}
+
+export default App

interface/src/App.js

@@ -1,37 +1,38 @@
 import React, { Component } from 'react';
+import { Switch, Redirect } from 'react-router';
 
-import { Redirect, Switch } from 'react-router';
-
-import { PROJECT_PATH } from './constants/Env';
 import * as Authentication from './authentication/Authentication';
 import AuthenticationWrapper from './authentication/AuthenticationWrapper';
-import AuthenticatedRoute from './authentication/AuthenticatedRoute';
 import UnauthenticatedRoute from './authentication/UnauthenticatedRoute';
-import SignInPage from './containers/SignInPage';
-import WiFiConnection from './sections/WiFiConnection';
-import AccessPoint from './sections/AccessPoint';
-import NetworkTime from './sections/NetworkTime';
-import Security from './sections/Security';
-import System from './sections/System';
+import AuthenticatedRoute from './authentication/AuthenticatedRoute';
+
+import SignIn from './SignIn';
 import ProjectRouting from './project/ProjectRouting';
+import WiFiConnection from './wifi/WiFiConnection';
+import AccessPoint from './ap/AccessPoint';
+import NetworkTime from './ntp/NetworkTime';
+import Security from './security/Security';
+import System from './system/System';
+
+import { PROJECT_PATH } from './api';
 
 class AppRouting extends Component {
 
-  componentWillMount() {
+  componentDidMount() {
     Authentication.clearLoginRedirect();
   }
 
   render() {
     return (
       <AuthenticationWrapper>
         <Switch>
-          <UnauthenticatedRoute exact path="/" component={SignInPage} />
-          <AuthenticatedRoute exact path="/wifi/*" component={WiFiConnection} />
+          <UnauthenticatedRoute exact path="/" component={SignIn} />
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/*`} component={ProjectRouting} />
+          <AuthenticatedRoute exact path="/wifi/*" component={WiFiConnection} />         
           <AuthenticatedRoute exact path="/ap/*" component={AccessPoint} />
           <AuthenticatedRoute exact path="/ntp/*" component={NetworkTime} />
-          <AuthenticatedRoute exact path="/security/*" component={Security} />
-          <AuthenticatedRoute exact path="/system/*" component={System} />
-          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/*`} component={ProjectRouting} />
+          <AuthenticatedRoute exact path="/security/*" component={Security} /> 
+          <AuthenticatedRoute exact path="/system/*" component={System} />          
           <Redirect to="/" />
         </Switch>
       </AuthenticationWrapper>

interface/src/App.tsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+
+import { CssBaseline } from '@material-ui/core';
+import { MuiThemeProvider, createMuiTheme, StylesProvider } from '@material-ui/core/styles';
+import { blueGrey, indigo, orange, red, green } from '@material-ui/core/colors';
+
+const theme = createMuiTheme({
+  palette: {
+    primary: indigo,
+    secondary: blueGrey,
+    info: {
+      main: blueGrey[900]
+    },
+    warning: {
+      main: orange[500]
+    },
+    error: {
+      main: red[500]
+    },
+    success: {
+      main: green[500]
+    }
+  },
+});
+
+export default class CustomMuiTheme extends Component {
+
+  render() {
+    return (
+      <StylesProvider>
+        <MuiThemeProvider theme={theme}>
+          <CssBaseline />
+          {this.props.children}
+        </MuiThemeProvider>
+      </StylesProvider>
+    );
+  }
+
+}