adding esp8266-react's latest NTP library

.gitignore

@@ -11,16 +11,18 @@ debug.log
 # platformio
 .pio
 pio_local.ini
-.VSCodeCounter/
+/.VSCodeCounter
 
 # OS specific
 .DS_Store
 *Thumbs.db
 
 # project specfic
-scripts/stackdmp.txt
+/scripts/stackdmp.txt
 emsesp
-data/www/
-lib/framework/WWWData.h
-interface/build/
-interface/node_modules/
+/data/www
+/lib/framework/WWWData.h
+/interface/build
+/interface/node_modules
+/interface/.eslintcache
+

interface/package.json

@@ -3,32 +3,31 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@types/jwt-decode": "^3.1.0",
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
     "@types/lodash": "^4.14.165",
     "@types/node": "^12.12.32",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-material-ui-form-validator": "^2.1.0",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.6",
     "compression-webpack-plugin": "^4.0.0",
-    "jwt-decode": "^3.1.1",
+    "jwt-decode": "^3.1.2",
     "lodash": "^4.17.20",
-    "mime-types": "^2.1.27",
-    "moment": "^2.29.1",
-    "notistack": "^1.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "mime-types": "^2.1.28",
+    "notistack": "^1.0.3",
+    "parse-ms": "^2.1.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-dropzone": "^11.2.4",
     "react-form-validator-core": "^1.0.0",
     "react-material-ui-form-validator": "^2.1.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.4",
+    "react-scripts": "4.0.1",
     "sockette": "^2.0.6",
-    "typescript": "^4.0.2",
+    "typescript": "4.0.5",
     "zlib": "^1.0.5"
   },
   "scripts": {
@@ -52,6 +51,6 @@
     ]
   },
   "devDependencies": {
-    "react-app-rewired": "^2.1.6"
+    "react-app-rewired": "^2.1.8"
   }
 }

interface/src/ap/APSettingsForm.tsx

@@ -14,7 +14,7 @@ type APSettingsFormProps = RestFormProps<APSettings>;
 
 class APSettingsForm extends React.Component<APSettingsFormProps> {
 
-  componentWillMount() {
+  componentDidMount() {
     ValidatorForm.addValidationRule('isIP', isIP);
   }
 

interface/src/authentication/AuthenticatedRoute.tsx

@@ -3,7 +3,7 @@ import { Redirect, Route, RouteProps, RouteComponentProps } from "react-router-d
 import { withSnackbar, WithSnackbarProps } from 'notistack';
 
 import * as Authentication from './Authentication';
-import { withAuthenticationContext, AuthenticationContextProps, AuthenticatedContext } from './AuthenticationContext';
+import { withAuthenticationContext, AuthenticationContextProps, AuthenticatedContext, AuthenticatedContextValue } from './AuthenticationContext';
 
 type ChildComponent = React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
 
@@ -21,7 +21,7 @@ export class AuthenticatedRoute extends React.Component<AuthenticatedRouteProps>
     const renderComponent: RenderComponent = (props) => {
       if (authenticationContext.me) {
         return (
-          <AuthenticatedContext.Provider value={authenticationContext as AuthenticatedContext}>
+          <AuthenticatedContext.Provider value={authenticationContext as AuthenticatedContextValue}>
             <Component {...props} />
           </AuthenticatedContext.Provider>
         );

interface/src/authentication/AuthenticationContext.tsx

@@ -6,20 +6,20 @@ export interface Me {
   version: string; // proddy added
 }
 
-export interface AuthenticationContext {
+export interface AuthenticationContextValue {
   refresh: () => void;
   signIn: (accessToken: string) => void;
   signOut: () => void;
   me?: Me;
 }
 
-const AuthenticationContextDefaultValue = {} as AuthenticationContext
+const AuthenticationContextDefaultValue = {} as AuthenticationContextValue
 export const AuthenticationContext = React.createContext(
   AuthenticationContextDefaultValue
 );
 
 export interface AuthenticationContextProps {
-  authenticationContext: AuthenticationContext;
+  authenticationContext: AuthenticationContextValue;
 }
 
 export function withAuthenticationContext<T extends AuthenticationContextProps>(Component: React.ComponentType<T>) {
@@ -34,17 +34,17 @@ export function withAuthenticationContext<T extends AuthenticationContextProps>(
   };
 }
 
-export interface AuthenticatedContext extends AuthenticationContext {
+export interface AuthenticatedContextValue extends AuthenticationContextValue {
   me: Me;
 }
 
-const AuthenticatedContextDefaultValue = {} as AuthenticatedContext
+const AuthenticatedContextDefaultValue = {} as AuthenticatedContextValue
 export const AuthenticatedContext = React.createContext(
   AuthenticatedContextDefaultValue
 );
 
 export interface AuthenticatedContextProps {
-  authenticatedContext: AuthenticatedContext;
+  authenticatedContext: AuthenticatedContextValue;
 }
 
 export function withAuthenticatedContext<T extends AuthenticatedContextProps>(Component: React.ComponentType<T>) {

interface/src/authentication/AuthenticationWrapper.tsx

@@ -5,14 +5,14 @@ import jwtDecode from 'jwt-decode';
 import history from '../history'
 import { VERIFY_AUTHORIZATION_ENDPOINT } from '../api';
 import { ACCESS_TOKEN, authorizedFetch, getStorage } from './Authentication';
-import { AuthenticationContext, Me } from './AuthenticationContext';
+import { AuthenticationContext, AuthenticationContextValue, Me } from './AuthenticationContext';
 import FullScreenLoading from '../components/FullScreenLoading';
 import { withFeatures, WithFeaturesProps } from '../features/FeaturesContext';
 
 export const decodeMeJWT = (accessToken: string): Me => jwtDecode(accessToken) as Me;
 
 interface AuthenticationWrapperState {
-  context: AuthenticationContext;
+  context: AuthenticationContextValue;
   initialized: boolean;
 }
 

interface/src/features/ApplicationContext.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Features } from './types';
-
-export interface ApplicationContext {
-  features: Features;
-}
-
-const ApplicationContextDefaultValue = {} as ApplicationContext
-export const ApplicationContext = React.createContext(
-  ApplicationContextDefaultValue
-);
-
-export function withAuthenticatedContexApplicationContext<T extends ApplicationContext>(Component: React.ComponentType<T>) {
-  return class extends React.Component<Omit<T, keyof ApplicationContext>> {
-    render() {
-      return (
-        <ApplicationContext.Consumer>
-          {authenticatedContext => <Component {...this.props as T} features={authenticatedContext} />}
-        </ApplicationContext.Consumer>
-      );
-    }
-  };
-}

interface/src/features/FeaturesContext.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Features } from './types';
 
-export interface FeaturesContext {
+export interface FeaturesContextValue {
   features: Features;
 }
 
-const FeaturesContextDefaultValue = {} as FeaturesContext
+const FeaturesContextDefaultValue = {} as FeaturesContextValue
 export const FeaturesContext = React.createContext(
   FeaturesContextDefaultValue
 );

interface/src/network/NetworkConnection.tsx

@@ -9,12 +9,13 @@ import { MenuAppBar } from '../components';
 import NetworkStatusController from './NetworkStatusController';
 import NetworkSettingsController from './NetworkSettingsController';
 import WiFiNetworkScanner from './WiFiNetworkScanner';
-import { NetworkConnectionContext } from './NetworkConnectionContext';
+import { NetworkConnectionContext, NetworkConnectionContextValue } from './NetworkConnectionContext';
+
 import { WiFiNetwork } from './types';
 
 type NetworkConnectionProps = AuthenticatedContextProps & RouteComponentProps;
 
-class NetworkConnection extends Component<NetworkConnectionProps, NetworkConnectionContext> {
+class NetworkConnection extends Component<NetworkConnectionProps, NetworkConnectionContextValue> {
 
   constructor(props: NetworkConnectionProps) {
     super(props);

interface/src/network/NetworkConnectionContext.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { WiFiNetwork } from './types';
 
-export interface NetworkConnectionContext {
+export interface NetworkConnectionContextValue {
   selectedNetwork?: WiFiNetwork;
   selectNetwork: (network: WiFiNetwork) => void;
   deselectNetwork: () => void;
 }
 
-const NetworkConnectionContextDefaultValue = {} as NetworkConnectionContext
+const NetworkConnectionContextDefaultValue = {} as NetworkConnectionContextValue
 export const NetworkConnectionContext = React.createContext(
   NetworkConnectionContextDefaultValue
 );

interface/src/network/NetworkSettingsForm.tsx

@@ -14,7 +14,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import { RestFormProps, PasswordValidator, BlockFormControlLabel, FormActions, FormButton } from '../components';
 import { isIP, isHostname, optional } from '../validators';
 
-import { NetworkConnectionContext } from './NetworkConnectionContext';
+import { NetworkConnectionContext, NetworkConnectionContextValue } from './NetworkConnectionContext';
 import { isNetworkOpen, networkSecurityMode } from './WiFiSecurityModes';
 import { NetworkSettings } from './types';
 
@@ -25,7 +25,7 @@ class NetworkSettingsForm extends React.Component<NetworkStatusFormProps> {
   static contextType = NetworkConnectionContext;
   context!: React.ContextType<typeof NetworkConnectionContext>;
 
-  constructor(props: NetworkStatusFormProps, context: NetworkConnectionContext) {
+  constructor(props: NetworkStatusFormProps, context: NetworkConnectionContextValue) {
     super(props);
 
     const { selectedNetwork } = context;

interface/src/ntp/NTPStatusForm.tsx

@@ -1,5 +1,4 @@
 import React, { Component, Fragment } from 'react';
-import moment from 'moment';
 
 import { WithTheme, withTheme } from '@material-ui/core/styles';
 import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText, Button } from '@material-ui/core';
@@ -14,7 +13,7 @@ import RefreshIcon from '@material-ui/icons/Refresh';
 
 import { RestFormProps, FormButton, HighlightAvatar } from '../components';
 import { isNtpActive, ntpStatusHighlight, ntpStatus } from './NTPStatus';
-import { formatIsoDateTime, formatLocalDateTime } from './TimeFormat';
+import { formatDuration, formatDateTime, formatLocalDateTimeNow, formatLocalDateTime } from './TimeFormat';
 import { NTPStatus, Time } from './types';
 import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
 import { TIME_ENDPOINT } from '../api';
@@ -43,30 +42,21 @@ class NTPStatusForm extends Component<NTPStatusFormProps, NTPStatusFormState> {
   }
 
   openSetTime = () => {
-    this.setState({ localTime: formatLocalDateTime(moment()), settingTime: true, });
+    this.setState({ localTime: formatLocalDateTimeNow(), settingTime: true, });
   }
 
   closeSetTime = () => {
     this.setState({ settingTime: false });
   }
 
-  createAdjustedTime = (): Time => {
-    const currentLocalTime = moment(this.props.data.time_local);
-    const newLocalTime = moment(this.state.localTime);
-    newLocalTime.subtract(currentLocalTime.utcOffset())
-    newLocalTime.milliseconds(0);
-    newLocalTime.utc();
-    return {
-      time_utc: newLocalTime.format()
-    }
-  }
+  createTime = (): Time => ({ local_time: formatLocalDateTime(this.state.localTime) });
 
   configureTime = () => {
     this.setState({ processing: true });
     redirectingAuthorizedFetch(TIME_ENDPOINT,
       {
         method: 'POST',
-        body: JSON.stringify(this.createAdjustedTime()),
+        body: JSON.stringify(this.createTime()),
         headers: {
           'Content-Type': 'application/json'
         }
@@ -153,7 +143,7 @@ class NTPStatusForm extends Component<NTPStatusFormProps, NTPStatusFormState> {
                 <AccessTimeIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Local Time" secondary={formatIsoDateTime(data.time_local)} />
+            <ListItemText primary="Local Time" secondary={formatDateTime(data.local_time)} />
           </ListItem>
           <Divider variant="inset" component="li" />
           <ListItem>
@@ -162,7 +152,7 @@ class NTPStatusForm extends Component<NTPStatusFormProps, NTPStatusFormState> {
                 <SwapVerticalCircleIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="UTC Time" secondary={formatIsoDateTime(data.time_utc)} />
+            <ListItemText primary="UTC Time" secondary={formatDateTime(data.utc_time)} />
           </ListItem>
           <Divider variant="inset" component="li" />
           <ListItem>
@@ -171,7 +161,7 @@ class NTPStatusForm extends Component<NTPStatusFormProps, NTPStatusFormState> {
                 <AvTimerIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
+            <ListItemText primary="Uptime" secondary={formatDuration(data.uptime)} />
           </ListItem>
           <Divider variant="inset" component="li" />
         </List>

interface/src/ntp/TimeFormat.ts

@@ -1,5 +1,45 @@
-import moment, { Moment } from 'moment';
+import parseMilliseconds from 'parse-ms';
 
-export const formatIsoDateTime = (isoDateString: string) => moment.parseZone(isoDateString).format('ll @ HH:mm:ss');
+const LOCALE_FORMAT = new Intl.DateTimeFormat('default', {
+  day: 'numeric',
+  month: 'short',
+  year: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  hour12: false
+});
 
-export const formatLocalDateTime = (moment: Moment) => moment.format('YYYY-MM-DDTHH:mm');
+export const formatDateTime = (dateTime: string) => {
+  return LOCALE_FORMAT.format(new Date(dateTime.substr(0, 19)));
+}
+
+export const formatLocalDateTimeNow = () => {
+  return formatIsoDateTime(new Date()).substr(0, 19);
+}
+
+export const formatLocalDateTime = (dateTime: string) => {
+  return formatIsoDateTime(new Date(dateTime)).substr(0, 19);
+}
+
+export const formatIsoDateTime = (date: Date) => {
+  return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1);
+}
+
+export const formatDuration = (duration: number) => {
+  const { days, hours, minutes, seconds } = parseMilliseconds(duration * 1000);
+  var formatted = '';
+  if (days) {
+    formatted += days + ' days ';
+  }
+  if (formatted || hours) {
+    formatted += hours + ' hours ';
+  }
+  if (formatted || minutes) {
+    formatted += minutes + ' minutes ';
+  }
+  if (formatted || seconds) {
+    formatted += seconds + ' seconds';
+  }
+  return formatted;
+}

interface/src/ntp/types.ts

@@ -1,3 +1,4 @@
+  
 export enum NTPSyncStatus {
   NTP_INACTIVE = 0,
   NTP_ACTIVE = 1
@@ -5,8 +6,8 @@ export enum NTPSyncStatus {
 
 export interface NTPStatus {
   status: NTPSyncStatus;
-  time_utc: string;
-  time_local: string;
+  utc_time: string;
+  local_time: string;
   server: string;
   uptime: number;
 }
@@ -19,5 +20,5 @@ export interface NTPSettings {
 }
 
 export interface Time {
-  time_utc: string;
+  local_time: string;
 }

interface/src/validators/optional.ts

@@ -1 +1,3 @@
-export default (validator: (value: any) => boolean) => (value: any) => !value || validator(value);
+const OPTIONAL = (validator: (value: any) => boolean) => (value: any) => !value || validator(value);
+
+export default OPTIONAL;

interface/src/validators/or.ts

@@ -1,3 +1,6 @@
-export default (validator1: (value: any) => boolean, validator2: (value: any) => boolean) => {
+const OR = (validator1: (value: any) => boolean, validator2: (value: any) => boolean) => {
     return (value: any) => validator1(value) || validator2(value);
-}
+};
+
+export default OR;
+

interface/tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"

lib/framework/NTPStatus.cpp

@@ -1,17 +1,28 @@
 #include <NTPStatus.h>
 
 NTPStatus::NTPStatus(AsyncWebServer * server, SecurityManager * securityManager) {
-    server->on(NTP_STATUS_SERVICE_PATH,
-               HTTP_GET,
-               securityManager->wrapRequest(std::bind(&NTPStatus::ntpStatus, this, std::placeholders::_1), AuthenticationPredicates::IS_AUTHENTICATED));
+    server->on(NTP_STATUS_SERVICE_PATH, HTTP_GET, securityManager->wrapRequest(std::bind(&NTPStatus::ntpStatus, this, std::placeholders::_1), AuthenticationPredicates::IS_AUTHENTICATED));
 }
 
-String toISOString(tm * time, bool incOffset) {
+/*
+ * Formats the time using the format provided.
+ *
+ * Uses a 25 byte buffer, large enough to fit an ISO time string with offset.
+ */
+String formatTime(tm * time, const char * format) {
     char time_string[25];
-    strftime(time_string, 25, incOffset ? "%FT%T%z" : "%FT%TZ", time);
+    strftime(time_string, 25, format, time);
     return String(time_string);
 }
 
+String toUTCTimeString(tm * time) {
+    return formatTime(time, "%FT%TZ");
+}
+
+String toLocalTimeString(tm * time) {
+    return formatTime(time, "%FT%T");
+}
+
 void NTPStatus::ntpStatus(AsyncWebServerRequest * request) {
     AsyncJsonResponse * response = new AsyncJsonResponse(false, MAX_NTP_STATUS_SIZE);
     JsonObject          root     = response->getRoot();
@@ -23,10 +34,10 @@ void NTPStatus::ntpStatus(AsyncWebServerRequest * request) {
     root["status"] = sntp_enabled() ? 1 : 0;
 
     // the current time in UTC
-    root["time_utc"] = toISOString(gmtime(&now), false);
+    root["utc_time"] = toUTCTimeString(gmtime(&now));
 
     // local time as ISO String with TZ
-    root["time_local"] = toISOString(localtime(&now), true);
+    root["local_time"] = toLocalTimeString(localtime(&now));
 
     // the sntp server name
     root["server"] = sntp_getservername(0);