diff --git a/interface/package.json b/interface/package.json index 45a97dd8a..457488a7e 100644 --- a/interface/package.json +++ b/interface/package.json @@ -43,7 +43,7 @@ "react-dom": "latest", "react-dropzone": "^14.2.3", "react-icons": "^4.12.0", - "react-router-dom": "6.18.0", + "react-router-dom": "^6.20.0", "react-toastify": "^9.1.3", "sockette": "^2.0.6", "typesafe-i18n": "^5.26.2", @@ -68,7 +68,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "preact": "^10.19.2", "prettier": "^3.1.0", - "rollup-plugin-visualizer": "^5.9.2", + "rollup-plugin-visualizer": "^5.9.3", "terser": "^5.24.0", "vite": "^5.0.2", "vite-plugin-imagemin": "^0.6.1", diff --git a/interface/src/components/routing/useRouterTab.ts b/interface/src/components/routing/useRouterTab.ts index 5dff86fd8..52cfe55cb 100644 --- a/interface/src/components/routing/useRouterTab.ts +++ b/interface/src/components/routing/useRouterTab.ts @@ -1,9 +1,8 @@ -import { useMatch, useResolvedPath } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; export const useRouterTab = () => { - const routerTabPath = useResolvedPath(':tab'); - const routerTabPathMatch = useMatch(routerTabPath.pathname); + const loc = useLocation().pathname; + const routerTab = loc.substring(0, loc.lastIndexOf('/')) ? loc : false; - const routerTab = routerTabPathMatch?.params?.tab || false; return { routerTab } as const; }; diff --git a/interface/src/framework/ap/AccessPoint.tsx b/interface/src/framework/ap/AccessPoint.tsx index 87fecefb3..5d74cd7f6 100644 --- a/interface/src/framework/ap/AccessPoint.tsx +++ b/interface/src/framework/ap/AccessPoint.tsx @@ -22,8 +22,12 @@ const AccessPoint: FC = () => { return ( <> - - + + } /> @@ -36,7 +40,7 @@ const AccessPoint: FC = () => { } /> - } /> + } /> ); diff --git a/interface/src/framework/mqtt/Mqtt.tsx b/interface/src/framework/mqtt/Mqtt.tsx index 7520b0eec..f65ea4181 100644 --- a/interface/src/framework/mqtt/Mqtt.tsx +++ b/interface/src/framework/mqtt/Mqtt.tsx @@ -21,8 +21,8 @@ const Mqtt: FC = () => { return ( <> - - + + } /> @@ -34,7 +34,7 @@ const Mqtt: FC = () => { } /> - } /> + } /> ); diff --git a/interface/src/framework/network/NetworkConnection.tsx b/interface/src/framework/network/NetworkConnection.tsx index 18d1842ef..cd9113398 100644 --- a/interface/src/framework/network/NetworkConnection.tsx +++ b/interface/src/framework/network/NetworkConnection.tsx @@ -44,9 +44,13 @@ const NetworkConnection: FC = () => { }} > - - - + + + } /> @@ -66,7 +70,7 @@ const NetworkConnection: FC = () => { } /> - } /> + } /> ); diff --git a/interface/src/framework/ntp/NetworkTime.tsx b/interface/src/framework/ntp/NetworkTime.tsx index d41d1fb8c..21a110001 100644 --- a/interface/src/framework/ntp/NetworkTime.tsx +++ b/interface/src/framework/ntp/NetworkTime.tsx @@ -20,8 +20,8 @@ const NetworkTime: FC = () => { return ( <> - - + + } /> @@ -33,7 +33,7 @@ const NetworkTime: FC = () => { } /> - } /> + } /> ); diff --git a/interface/src/framework/security/ManageUsersForm.tsx b/interface/src/framework/security/ManageUsersForm.tsx index a8d8c9afb..f60c8e0c0 100644 --- a/interface/src/framework/security/ManageUsersForm.tsx +++ b/interface/src/framework/security/ManageUsersForm.tsx @@ -12,7 +12,7 @@ import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-li import { useTheme } from '@table-library/react-table-library/theme'; import { useContext, useState } from 'react'; -import { unstable_useBlocker as useBlocker } from 'react-router-dom'; +import { useBlocker } from 'react-router-dom'; import GenerateToken from './GenerateToken'; import UserForm from './UserForm'; import type { FC } from 'react'; diff --git a/interface/src/framework/security/Security.tsx b/interface/src/framework/security/Security.tsx index d55a171e1..b6be5ddfd 100644 --- a/interface/src/framework/security/Security.tsx +++ b/interface/src/framework/security/Security.tsx @@ -17,13 +17,13 @@ const Security: FC = () => { return ( <> - - + + } /> } /> - } /> + } /> ); diff --git a/interface/src/framework/system/System.tsx b/interface/src/framework/system/System.tsx index 2caf4b7c6..8dc373cf2 100644 --- a/interface/src/framework/system/System.tsx +++ b/interface/src/framework/system/System.tsx @@ -23,10 +23,10 @@ const System: FC = () => { return ( <> - - - - + + + + } /> @@ -47,7 +47,7 @@ const System: FC = () => { } /> - } /> + } /> ); diff --git a/interface/src/project/Dashboard.tsx b/interface/src/project/Dashboard.tsx index bfbaa8923..ea1d441f8 100644 --- a/interface/src/project/Dashboard.tsx +++ b/interface/src/project/Dashboard.tsx @@ -20,15 +20,15 @@ const Dashboard: FC = () => { return ( <> - - - + + + } /> } /> } /> - } /> + } /> ); diff --git a/interface/src/project/Help.tsx b/interface/src/project/Help.tsx index d5b355823..49f6cc75a 100644 --- a/interface/src/project/Help.tsx +++ b/interface/src/project/Help.tsx @@ -1,28 +1,83 @@ -import { Tab } from '@mui/material'; -import { Navigate, Route, Routes } from 'react-router-dom'; -import HelpInformation from './HelpInformation'; +import CommentIcon from '@mui/icons-material/CommentTwoTone'; +import EastIcon from '@mui/icons-material/East'; +import GitHubIcon from '@mui/icons-material/GitHub'; +import MenuBookIcon from '@mui/icons-material/MenuBookTwoTone'; +import { Box, List, ListItem, ListItemAvatar, ListItemText, Link, Typography } from '@mui/material'; import type { FC } from 'react'; - -import { RouterTabs, useRouterTab, useLayoutTitle } from 'components'; - +import { SectionContent, useLayoutTitle } from 'components'; import { useI18nContext } from 'i18n/i18n-react'; const Help: FC = () => { const { LL } = useI18nContext(); - const { routerTab } = useRouterTab(); - useLayoutTitle(LL.HELP_OF('')); + const uploadURL = window.location.origin + '/system/upload'; + return ( - <> - - - - - } /> - } /> - - + + + + + + + + {LL.HELP_INFORMATION_1()}  + +   + + {LL.CLICK_HERE()} + + + + + + + + + + {LL.HELP_INFORMATION_2()}  + +   + + {LL.CLICK_HERE()} + + + + + + + + + + {LL.HELP_INFORMATION_3()}  + + + {LL.CLICK_HERE()} + +
+ ({LL.HELP_INFORMATION_4()}  + + {LL.UPLOAD()} + + ) +
+
+
+ + + + {LL.HELP_INFORMATION_5()} + + + + {'github.com/emsesp/EMS-ESP32'} + + + + @proddy @MichaelDvP + + +
); }; diff --git a/interface/src/project/HelpInformation.tsx b/interface/src/project/HelpInformation.tsx deleted file mode 100644 index 9aae937f9..000000000 --- a/interface/src/project/HelpInformation.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import CommentIcon from '@mui/icons-material/CommentTwoTone'; -import EastIcon from '@mui/icons-material/East'; -import GitHubIcon from '@mui/icons-material/GitHub'; -import MenuBookIcon from '@mui/icons-material/MenuBookTwoTone'; -import { Typography, Box, List, ListItem, ListItemText, Link, ListItemAvatar } from '@mui/material'; -import type { FC } from 'react'; - -import { SectionContent } from 'components'; - -import { useI18nContext } from 'i18n/i18n-react'; - -const HelpInformation: FC = () => { - const { LL } = useI18nContext(); - - const uploadURL = window.location.origin + '/system/upload'; - - return ( - - - - - - - - {LL.HELP_INFORMATION_1()}  - -   - - {LL.CLICK_HERE()} - - - - - - - - - - {LL.HELP_INFORMATION_2()}  - -   - - {LL.CLICK_HERE()} - - - - - - - - - - {LL.HELP_INFORMATION_3()}  - - - {LL.CLICK_HERE()} - -
- ({LL.HELP_INFORMATION_4()}  - - {LL.UPLOAD()} - - ) -
-
-
- - - - {LL.HELP_INFORMATION_5()} - - - - {'github.com/emsesp/EMS-ESP32'} - - - - @proddy @MichaelDvP - - -
- ); -}; - -export default HelpInformation; diff --git a/interface/src/project/Settings.tsx b/interface/src/project/Settings.tsx index 29edb1c13..5a0de5b82 100644 --- a/interface/src/project/Settings.tsx +++ b/interface/src/project/Settings.tsx @@ -18,17 +18,17 @@ const Settings: FC = () => { return ( <> - - - - + + + + } /> } /> } /> } /> - } /> + } /> ); diff --git a/interface/src/project/SettingsCustomization.tsx b/interface/src/project/SettingsCustomization.tsx index 183d32778..463ec3518 100644 --- a/interface/src/project/SettingsCustomization.tsx +++ b/interface/src/project/SettingsCustomization.tsx @@ -23,7 +23,7 @@ import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-li import { useTheme } from '@table-library/react-table-library/theme'; import { useRequest } from 'alova'; import { useState, useEffect, useCallback } from 'react'; -import { unstable_useBlocker as useBlocker, useLocation } from 'react-router-dom'; +import { useBlocker, useLocation } from 'react-router-dom'; import { toast } from 'react-toastify'; import EntityMaskToggle from './EntityMaskToggle'; diff --git a/interface/src/project/SettingsEntities.tsx b/interface/src/project/SettingsEntities.tsx index 1128dd645..708d86513 100644 --- a/interface/src/project/SettingsEntities.tsx +++ b/interface/src/project/SettingsEntities.tsx @@ -7,7 +7,7 @@ import { useTheme } from '@table-library/react-table-library/theme'; // eslint-disable-next-line import/named import { updateState, useRequest } from 'alova'; import { useState, useCallback } from 'react'; -import { unstable_useBlocker as useBlocker } from 'react-router-dom'; +import { useBlocker } from 'react-router-dom'; import { toast } from 'react-toastify'; diff --git a/interface/src/project/SettingsScheduler.tsx b/interface/src/project/SettingsScheduler.tsx index 7ba89969f..f8d2d8f72 100644 --- a/interface/src/project/SettingsScheduler.tsx +++ b/interface/src/project/SettingsScheduler.tsx @@ -9,7 +9,7 @@ import { useTheme } from '@table-library/react-table-library/theme'; // eslint-disable-next-line import/named import { updateState, useRequest } from 'alova'; import { useState, useEffect, useCallback } from 'react'; -import { unstable_useBlocker as useBlocker } from 'react-router-dom'; +import { useBlocker } from 'react-router-dom'; import { toast } from 'react-toastify'; import SettingsSchedulerDialog from './SettingsSchedulerDialog'; import * as EMSESP from './api'; diff --git a/interface/src/utils/useRest.ts b/interface/src/utils/useRest.ts index 921513bba..bce61546e 100644 --- a/interface/src/utils/useRest.ts +++ b/interface/src/utils/useRest.ts @@ -1,6 +1,6 @@ import { useRequest, type Method } from 'alova'; import { useState } from 'react'; -import { unstable_useBlocker as useBlocker } from 'react-router-dom'; +import { useBlocker } from 'react-router-dom'; import { toast } from 'react-toastify'; import { useI18nContext } from 'i18n/i18n-react'; diff --git a/interface/yarn.lock b/interface/yarn.lock index d273a7f3b..7d151a850 100644 --- a/interface/yarn.lock +++ b/interface/yarn.lock @@ -1187,10 +1187,10 @@ __metadata: languageName: node linkType: hard -"@remix-run/router@npm:1.11.0": - version: 1.11.0 - resolution: "@remix-run/router@npm:1.11.0" - checksum: 629ec578b9dfd3c5cb5de64a0798dd7846ec5ba0351aa66f42b1c65efb43da8f30366be59b825303648965b0df55b638c110949b24ef94fd62e98117fdfb0c0f +"@remix-run/router@npm:1.13.0": + version: 1.13.0 + resolution: "@remix-run/router@npm:1.13.0" + checksum: bb173a012d2036c5ee69babfe30c73975b970c2e5a0edaba138c302ae80d255e238e462e77365ab4efe819b6397e1a7f3a416d6200d17f9655f0ca1c51c4f45e languageName: node linkType: hard @@ -1775,9 +1775,9 @@ __metadata: react-dom: "npm:latest" react-dropzone: "npm:^14.2.3" react-icons: "npm:^4.12.0" - react-router-dom: "npm:6.18.0" + react-router-dom: "npm:^6.20.0" react-toastify: "npm:^9.1.3" - rollup-plugin-visualizer: "npm:^5.9.2" + rollup-plugin-visualizer: "npm:^5.9.3" sockette: "npm:^2.0.6" terser: "npm:^5.24.0" typesafe-i18n: "npm:^5.26.2" @@ -7020,27 +7020,27 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:6.18.0": - version: 6.18.0 - resolution: "react-router-dom@npm:6.18.0" +"react-router-dom@npm:^6.20.0": + version: 6.20.0 + resolution: "react-router-dom@npm:6.20.0" dependencies: - "@remix-run/router": "npm:1.11.0" - react-router: "npm:6.18.0" + "@remix-run/router": "npm:1.13.0" + react-router: "npm:6.20.0" peerDependencies: react: ">=16.8" react-dom: ">=16.8" - checksum: b0e72603d73172b6c6662afe2faed326753d5bbd9905aa560e3dade7996fc13d19e34e3ed668d2849efd685e2db2f711129c84b1439870e92c9cc91ddc343cf5 + checksum: 4b6741c545cedf5a5c4f996deb953679dcc985425e0664e27b97fdb9ab1387cbe1a6a12bfc7f7c38ec40b15759b4bf6396930ec26540a4a81ae16d154fd35049 languageName: node linkType: hard -"react-router@npm:6.18.0": - version: 6.18.0 - resolution: "react-router@npm:6.18.0" +"react-router@npm:6.20.0": + version: 6.20.0 + resolution: "react-router@npm:6.20.0" dependencies: - "@remix-run/router": "npm:1.11.0" + "@remix-run/router": "npm:1.13.0" peerDependencies: react: ">=16.8" - checksum: a00c8f347b7ffee575f4a7731782e688e3fca458ca5bd970fb41cef66a6851853caa24464155ab438d5879f367b1223a539642a405a865913ffe7e63e53b1245 + checksum: 2cdac5ad8b7a7bc230173b26768bcf3f6a9abc0a19983fa7b76b9ffdbeb44bfbd88fcc2033e9062defafef144db207859eb3162a9c9742d70cfce4e7166ff1e5 languageName: node linkType: hard @@ -7326,22 +7326,22 @@ __metadata: languageName: node linkType: hard -"rollup-plugin-visualizer@npm:^5.9.2": - version: 5.9.2 - resolution: "rollup-plugin-visualizer@npm:5.9.2" +"rollup-plugin-visualizer@npm:^5.9.3": + version: 5.9.3 + resolution: "rollup-plugin-visualizer@npm:5.9.3" dependencies: open: "npm:^8.4.0" picomatch: "npm:^2.3.1" source-map: "npm:^0.7.4" yargs: "npm:^17.5.1" peerDependencies: - rollup: 2.x || 3.x + rollup: 2.x || 3.x || 4.x peerDependenciesMeta: rollup: optional: true bin: rollup-plugin-visualizer: dist/bin/cli.js - checksum: 9cc5b140cdb384cd16538537ed41b8ecc97a21ee1fe7974775c6fbbb7522ed1733da7c47ab8b619c9b4f190de5de3b2ad34303afe94f943c41f2ce2ec621b6cb + checksum: 569acbdf9401fb5e23456d889b1094e95a003331c63428732f94418eda59850fd74994587353f58c833a535cc24cdef56c06872996f76f98802ff22939ebbf0d languageName: node linkType: hard