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