Upgrade UI libs, fix linting issues (#218)

* remove redundant component

* upgrade various libraries
sort linting issues issues regarding redeclaring types WRT contexts
This commit is contained in:
rjwats 2021-01-16 18:08:41 +00:00 committed by GitHub
parent 3ecdc27550
commit 4917b38747
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 6026 additions and 3781 deletions

1
.gitignore vendored
View File

@ -6,4 +6,5 @@
/lib/framework/WWWData.h /lib/framework/WWWData.h
/interface/build /interface/build
/interface/node_modules /interface/node_modules
/interface/.eslintcache
.vscode .vscode

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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>
);
}
};
}

View File

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

View File

@ -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;

View File

@ -1,3 +1,5 @@
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); return (value: any) => validator1(value) || validator2(value);
} };
export default OR;

View File

@ -9,12 +9,12 @@ import { MenuAppBar } from '../components';
import WiFiStatusController from './WiFiStatusController'; import WiFiStatusController from './WiFiStatusController';
import WiFiSettingsController from './WiFiSettingsController'; import WiFiSettingsController from './WiFiSettingsController';
import WiFiNetworkScanner from './WiFiNetworkScanner'; import WiFiNetworkScanner from './WiFiNetworkScanner';
import { WiFiConnectionContext } from './WiFiConnectionContext'; import { WiFiConnectionContext, WiFiConnectionContextValue } from './WiFiConnectionContext';
import { WiFiNetwork } from './types'; import { WiFiNetwork } from './types';
type WiFiConnectionProps = AuthenticatedContextProps & RouteComponentProps; type WiFiConnectionProps = AuthenticatedContextProps & RouteComponentProps;
class WiFiConnection extends Component<WiFiConnectionProps, WiFiConnectionContext> { class WiFiConnection extends Component<WiFiConnectionProps, WiFiConnectionContextValue> {
constructor(props: WiFiConnectionProps) { constructor(props: WiFiConnectionProps) {
super(props); super(props);

View File

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

View File

@ -13,7 +13,7 @@ import SaveIcon from '@material-ui/icons/Save';
import { RestFormProps, PasswordValidator, BlockFormControlLabel, FormActions, FormButton } from '../components'; import { RestFormProps, PasswordValidator, BlockFormControlLabel, FormActions, FormButton } from '../components';
import { isIP, isHostname, optional } from '../validators'; import { isIP, isHostname, optional } from '../validators';
import { WiFiConnectionContext } from './WiFiConnectionContext'; import { WiFiConnectionContext, WiFiConnectionContextValue } from './WiFiConnectionContext';
import { isNetworkOpen, networkSecurityMode } from './WiFiSecurityModes'; import { isNetworkOpen, networkSecurityMode } from './WiFiSecurityModes';
import { WiFiSettings } from './types'; import { WiFiSettings } from './types';
@ -24,7 +24,7 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
static contextType = WiFiConnectionContext; static contextType = WiFiConnectionContext;
context!: React.ContextType<typeof WiFiConnectionContext>; context!: React.ContextType<typeof WiFiConnectionContext>;
constructor(props: WiFiStatusFormProps, context: WiFiConnectionContext) { constructor(props: WiFiStatusFormProps, context: WiFiConnectionContextValue) {
super(props); super(props);
const { selectedNetwork } = context; const { selectedNetwork } = context;
@ -39,7 +39,7 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
} }
} }
componentWillMount() { componentDidMount() {
ValidatorForm.addValidationRule('isIP', isIP); ValidatorForm.addValidationRule('isIP', isIP);
ValidatorForm.addValidationRule('isHostname', isHostname); ValidatorForm.addValidationRule('isHostname', isHostname);
ValidatorForm.addValidationRule('isOptionalIP', optional(isIP)); ValidatorForm.addValidationRule('isOptionalIP', optional(isIP));

View File

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