Changes to support upgrade of platform-espressif32 to 4.3.0 (#301)

rjwats · web-flow · commit 004659befb05 · 2022-05-21T17:42:16.000+01:00
* support latest espressif32 PIO platform
* upgrade react, react router, axios and material
diff --git a/interface/package-lock.json b/interface/package-lock.json
diff --git a/interface/package.json b/interface/package.json
@@ -4,29 +4,29 @@
   "private": true,
   "proxy": "http://192.168.0.23",
   "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.2.4",
-    "@mui/material": "^5.2.4",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/material": "^5.8.0",
     "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.14",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
-    "async-validator": "^4.0.7",
-    "axios": "^0.24.0",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "async-validator": "^4.1.1",
+    "axios": "^0.27.2",
     "http-proxy-middleware": "^2.0.1",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "notistack": "^2.0.3",
+    "notistack": "^2.0.5",
     "parse-ms": "^3.0.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "react-app-rewired": "^2.1.8",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
     "react-dropzone": "^11.4.2",
-    "react-router-dom": "^6.0.2",
-    "react-scripts": "5.0.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
     "sockette": "^2.0.6",
-    "typescript": "^4.5.4"
+    "typescript": "^4.6.4"
   },
   "scripts": {
     "start": "react-app-rewired start",
diff --git a/interface/src/CustomTheme.tsx b/interface/src/CustomTheme.tsx
@@ -4,6 +4,8 @@ import { CssBaseline } from '@mui/material';
 import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
 import { indigo, blueGrey, orange, red, green } from '@mui/material/colors';
 
+import { RequiredChildrenProps } from './utils';
+
 const theme = responsiveFontSizes(
   createTheme({
     palette: {
@@ -28,7 +30,7 @@ const theme = responsiveFontSizes(
   })
 );
 
-const CustomTheme: FC = ({ children }) => (
+const CustomTheme: FC<RequiredChildrenProps> = ({ children }) => (
   <ThemeProvider theme={theme}>
     <CssBaseline />
     {children}
diff --git a/interface/src/components/SectionContent.tsx b/interface/src/components/SectionContent.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 
 import { Paper, Typography } from '@mui/material';
 
-interface SectionContentProps {
+import { RequiredChildrenProps } from '../utils';
+
+interface SectionContentProps extends RequiredChildrenProps {
   title: string;
   titleGutter?: boolean;
 }
diff --git a/interface/src/components/layout/Layout.tsx b/interface/src/components/layout/Layout.tsx
@@ -5,13 +5,15 @@ import { useLocation } from 'react-router-dom';
 import { Box, Toolbar } from '@mui/material';
 
 import { PROJECT_NAME } from '../../api/env';
+import { RequiredChildrenProps } from '../../utils';
+
 import LayoutDrawer from './LayoutDrawer';
 import LayoutAppBar from './LayoutAppBar';
 import { LayoutContext } from './context';
 
 export const DRAWER_WIDTH = 280;
 
-const Layout: FC = ({ children }) => {
+const Layout: FC<RequiredChildrenProps> = ({ children }) => {
 
   const [mobileOpen, setMobileOpen] = useState(false);
   const [title, setTitle] = useState(PROJECT_NAME);
diff --git a/interface/src/components/routing/RequireAdmin.tsx b/interface/src/components/routing/RequireAdmin.tsx
@@ -2,8 +2,9 @@ import { FC, useContext } from 'react';
 import { Navigate } from "react-router-dom";
 
 import { AuthenticatedContext } from '../../contexts/authentication';
+import { RequiredChildrenProps } from '../../utils';
 
-const RequireAdmin: FC = ({ children }) => {
+const RequireAdmin: FC<RequiredChildrenProps> = ({ children }) => {
   const authenticatedContext = useContext(AuthenticatedContext);
   return authenticatedContext.me.admin ? <>{children}</> : <Navigate replace to='/' />;
 };
diff --git a/interface/src/components/routing/RequireAuthenticated.tsx b/interface/src/components/routing/RequireAuthenticated.tsx
@@ -3,8 +3,9 @@ import { Navigate, useLocation } from "react-router-dom";
 
 import { AuthenticatedContext, AuthenticatedContextValue, AuthenticationContext } from '../../contexts/authentication/context';
 import { storeLoginRedirect } from '../../api/authentication';
+import { RequiredChildrenProps } from '../../utils';
 
-const RequireAuthenticated: FC = ({ children }) => {
+const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
   const authenticationContext = useContext(AuthenticationContext);
   const location = useLocation();
 
diff --git a/interface/src/components/routing/RequireUnauthenticated.tsx b/interface/src/components/routing/RequireUnauthenticated.tsx
@@ -3,9 +3,10 @@ import { Navigate } from "react-router-dom";
 
 import * as AuthenticationApi from '../../api/authentication';
 import { AuthenticationContext } from '../../contexts/authentication';
+import { RequiredChildrenProps } from '../../utils';
 import { FeaturesContext } from '../../contexts/features';
 
-const RequireUnauthenticated: FC = ({ children }) => {
+const RequireUnauthenticated: FC<RequiredChildrenProps> = ({ children }) => {
   const { features } = useContext(FeaturesContext);
   const authenticationContext = useContext(AuthenticationContext);
 
diff --git a/interface/src/components/routing/RouterTabs.tsx b/interface/src/components/routing/RouterTabs.tsx
@@ -4,7 +4,9 @@ import { useNavigate } from 'react-router-dom';
 
 import { Tabs, useMediaQuery, useTheme } from '@mui/material';
 
-interface RouterTabsProps {
+import { RequiredChildrenProps } from '../../utils';
+
+interface RouterTabsProps extends RequiredChildrenProps {
   value: string | false;
 }
 
diff --git a/interface/src/contexts/authentication/Authentication.tsx b/interface/src/contexts/authentication/Authentication.tsx
@@ -4,12 +4,14 @@ import { useNavigate } from 'react-router-dom';
 
 import * as AuthenticationApi from '../../api/authentication';
 import { ACCESS_TOKEN } from '../../api/endpoints';
+import { RequiredChildrenProps } from '../../utils';
 import { LoadingSpinner } from '../../components';
 import { Me } from '../../types';
+
 import { FeaturesContext } from '../features';
 import { AuthenticationContext } from './context';
 
-const Authentication: FC = ({ children }) => {
+const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
   const { features } = useContext(FeaturesContext);
   const navigate = useNavigate();
   const { enqueueSnackbar } = useSnackbar();
diff --git a/interface/src/contexts/features/FeaturesLoader.tsx b/interface/src/contexts/features/FeaturesLoader.tsx
@@ -2,13 +2,13 @@ import { FC, useCallback, useEffect, useState } from 'react';
 
 import * as FeaturesApi from '../../api/features';
 
-import { extractErrorMessage } from '../../utils';
+import { extractErrorMessage, RequiredChildrenProps } from '../../utils';
 import { Features } from '../../types';
 import {ApplicationError, LoadingSpinner} from '../../components';
 
 import { FeaturesContext } from '.';
 
-const FeaturesLoader: FC = (props) => {
+const FeaturesLoader: FC<RequiredChildrenProps> = (props) => {
 
   const [errorMessage, setErrorMessage] = useState<string>();
   const [features, setFeatures] = useState<Features>();
diff --git a/interface/src/utils/endpoints.ts b/interface/src/utils/endpoints.ts
@@ -1,5 +1,5 @@
 import { AxiosError } from "axios";
 
-export const extractErrorMessage = (error: AxiosError, defaultMessage: string) => (
-  (error.response && error.response.data ? error.response.data.message : error.message) || defaultMessage
+export const extractErrorMessage = (error: AxiosError<{ message?: string }>, defaultMessage: string) => (
+  (error?.response?.data?.message ? error.response.data.message : error.message) || defaultMessage
 );
diff --git a/interface/src/utils/index.ts b/interface/src/utils/index.ts
@@ -5,3 +5,4 @@ export * from './submit';
 export * from './time';
 export * from './useRest';
 export * from './useWs';
+export * from './props';
diff --git a/interface/src/utils/props.ts b/interface/src/utils/props.ts
@@ -0,0 +1,3 @@
+export interface RequiredChildrenProps {
+  children: React.ReactNode;
+}
diff --git a/lib/framework/ESPFS.h b/lib/framework/ESPFS.h
@@ -1,7 +1,2 @@
-#ifdef ESP32
-#include <SPIFFS.h>
-#define ESPFS SPIFFS
-#elif defined(ESP8266)
 #include <LittleFS.h>
 #define ESPFS LittleFS
-#endif
diff --git a/lib/framework/MqttSettingsService.cpp b/lib/framework/MqttSettingsService.cpp
@@ -34,9 +34,9 @@ MqttSettingsService::MqttSettingsService(AsyncWebServer* server, FS* fs, Securit
 #ifdef ESP32
   WiFi.onEvent(
       std::bind(&MqttSettingsService::onStationModeDisconnected, this, std::placeholders::_1, std::placeholders::_2),
-      WiFiEvent_t::SYSTEM_EVENT_STA_DISCONNECTED);
+      WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_DISCONNECTED);
   WiFi.onEvent(std::bind(&MqttSettingsService::onStationModeGotIP, this, std::placeholders::_1, std::placeholders::_2),
-               WiFiEvent_t::SYSTEM_EVENT_STA_GOT_IP);
+               WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_GOT_IP);
 #elif defined(ESP8266)
   _onStationModeDisconnectedHandler = WiFi.onStationModeDisconnected(
       std::bind(&MqttSettingsService::onStationModeDisconnected, this, std::placeholders::_1));
diff --git a/lib/framework/NTPSettingsService.cpp b/lib/framework/NTPSettingsService.cpp
@@ -13,9 +13,9 @@ NTPSettingsService::NTPSettingsService(AsyncWebServer* server, FS* fs, SecurityM
 #ifdef ESP32
   WiFi.onEvent(
       std::bind(&NTPSettingsService::onStationModeDisconnected, this, std::placeholders::_1, std::placeholders::_2),
-      WiFiEvent_t::SYSTEM_EVENT_STA_DISCONNECTED);
+      WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_DISCONNECTED);
   WiFi.onEvent(std::bind(&NTPSettingsService::onStationModeGotIP, this, std::placeholders::_1, std::placeholders::_2),
-               WiFiEvent_t::SYSTEM_EVENT_STA_GOT_IP);
+               WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_GOT_IP);
 #elif defined(ESP8266)
   _onStationModeDisconnectedHandler = WiFi.onStationModeDisconnected(
       std::bind(&NTPSettingsService::onStationModeDisconnected, this, std::placeholders::_1));
diff --git a/lib/framework/OTASettingsService.cpp b/lib/framework/OTASettingsService.cpp
@@ -6,7 +6,7 @@ OTASettingsService::OTASettingsService(AsyncWebServer* server, FS* fs, SecurityM
     _arduinoOTA(nullptr) {
 #ifdef ESP32
   WiFi.onEvent(std::bind(&OTASettingsService::onStationModeGotIP, this, std::placeholders::_1, std::placeholders::_2),
-               WiFiEvent_t::SYSTEM_EVENT_STA_GOT_IP);
+               WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_GOT_IP);
 #elif defined(ESP8266)
   _onStationModeGotIPHandler =
       WiFi.onStationModeGotIP(std::bind(&OTASettingsService::onStationModeGotIP, this, std::placeholders::_1));
diff --git a/lib/framework/WiFiSettingsService.cpp b/lib/framework/WiFiSettingsService.cpp
@@ -19,9 +19,9 @@ WiFiSettingsService::WiFiSettingsService(AsyncWebServer* server, FS* fs, Securit
   WiFi.mode(WIFI_MODE_NULL);
   WiFi.onEvent(
       std::bind(&WiFiSettingsService::onStationModeDisconnected, this, std::placeholders::_1, std::placeholders::_2),
-      WiFiEvent_t::SYSTEM_EVENT_STA_DISCONNECTED);
+      WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_DISCONNECTED);
   WiFi.onEvent(std::bind(&WiFiSettingsService::onStationModeStop, this, std::placeholders::_1, std::placeholders::_2),
-               WiFiEvent_t::SYSTEM_EVENT_STA_STOP);
+               WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_STOP);
 #elif defined(ESP8266)
   _onStationModeDisconnectedHandler = WiFi.onStationModeDisconnected(
       std::bind(&WiFiSettingsService::onStationModeDisconnected, this, std::placeholders::_1));
diff --git a/lib/framework/WiFiStatus.cpp b/lib/framework/WiFiStatus.cpp
@@ -6,9 +6,9 @@ WiFiStatus::WiFiStatus(AsyncWebServer* server, SecurityManager* securityManager)
              securityManager->wrapRequest(std::bind(&WiFiStatus::wifiStatus, this, std::placeholders::_1),
                                           AuthenticationPredicates::IS_AUTHENTICATED));
 #ifdef ESP32
-  WiFi.onEvent(onStationModeConnected, WiFiEvent_t::SYSTEM_EVENT_STA_CONNECTED);
-  WiFi.onEvent(onStationModeDisconnected, WiFiEvent_t::SYSTEM_EVENT_STA_DISCONNECTED);
-  WiFi.onEvent(onStationModeGotIP, WiFiEvent_t::SYSTEM_EVENT_STA_GOT_IP);
+  WiFi.onEvent(onStationModeConnected, WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_CONNECTED);
+  WiFi.onEvent(onStationModeDisconnected, WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_DISCONNECTED);
+  WiFi.onEvent(onStationModeGotIP, WiFiEvent_t::ARDUINO_EVENT_WIFI_STA_GOT_IP);
 #elif defined(ESP8266)
   _onStationModeConnectedHandler = WiFi.onStationModeConnected(onStationModeConnected);
   _onStationModeDisconnectedHandler = WiFi.onStationModeDisconnected(onStationModeDisconnected);
@@ -23,7 +23,7 @@ void WiFiStatus::onStationModeConnected(WiFiEvent_t event, WiFiEventInfo_t info)
 
 void WiFiStatus::onStationModeDisconnected(WiFiEvent_t event, WiFiEventInfo_t info) {
   Serial.print(F("WiFi Disconnected. Reason code="));
-  Serial.println(info.disconnected.reason);
+  Serial.println(info.wifi_sta_disconnected.reason);
 }
 
 void WiFiStatus::onStationModeGotIP(WiFiEvent_t event, WiFiEventInfo_t info) {
diff --git a/platformio.ini b/platformio.ini
@@ -34,8 +34,11 @@ extra_scripts =
 
 lib_deps =
   ArduinoJson@>=6.0.0,<7.0.0
-  ESP Async WebServer@>=1.2.0,<2.0.0
-  AsyncMqttClient@>=0.8.2,<1.0.0
+  ; The following allows the use of the latest code for ESPAsyncWebServer - there hasn't been a release in a while
+  ; Work around for https://github.com/me-no-dev/ESPAsyncWebServer/issues/1151
+  https://github.com/me-no-dev/ESPAsyncWebServer
+  ;ESP Async WebServer@>=1.2.0,<2.0.0
+  AsyncMqttClient@>=0.9.0,<1.0.0
   
 [env:esp12e]
 platform = espressif8266
@@ -48,3 +51,4 @@ board_build.filesystem = littlefs
 board_build.partitions = min_spiffs.csv
 platform = espressif32
 board = node32s
+board_build.filesystem = littlefs

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,9 @@ import React from 'react';`
`2`	`2`
`3`	`3`	`import { Paper, Typography } from '@mui/material';`
`4`	`4`
`5`		`-interface SectionContentProps {`
	`5`	`+import { RequiredChildrenProps } from '../utils';`
	`6`	`+`
	`7`	`+interface SectionContentProps extends RequiredChildrenProps {`
`6`	`8`	`title: string;`
`7`	`9`	`titleGutter?: boolean;`
`8`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,9 @@ import { useNavigate } from 'react-router-dom';`
`4`	`4`
`5`	`5`	`import { Tabs, useMediaQuery, useTheme } from '@mui/material';`
`6`	`6`
`7`		`-interface RouterTabsProps {`
	`7`	`+import { RequiredChildrenProps } from '../../utils';`
	`8`	`+`
	`9`	`+interface RouterTabsProps extends RequiredChildrenProps {`
`8`	`10`	`value: string \| false;`
`9`	`11`	`}`
`10`	`12`