Merge pull request emsesp#1473 from proddy/dev

roll back dom-router changes
proddy · Dec 2, 2023 · 7efa8ff · 7efa8ff
2 parents c1fa5c4 + 85016d6
commit 7efa8ff
Show file tree

Hide file tree

Showing 12 changed files with 246 additions and 202 deletions.
diff --git a/interface/package.json b/interface/package.json
@@ -21,16 +21,16 @@
   },
   "dependencies": {
     "@alova/adapter-xhr": "^1.0.1",
-    "@babel/core": "^7.23.3",
+    "@babel/core": "^7.23.5",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.18",
-    "@mui/material": "^5.14.18",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.19",
     "@table-library/react-table-library": "4.1.7",
     "@types/imagemin": "^8.0.5",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.10.0",
-    "@types/react": "^18.2.39",
+    "@types/node": "^20.10.2",
+    "@types/react": "^18.2.40",
     "@types/react-dom": "^18.2.17",
     "@types/react-router-dom": "^5.3.3",
     "alova": "^2.15.0",
@@ -43,7 +43,7 @@
     "react-dom": "latest",
     "react-dropzone": "^14.2.3",
     "react-icons": "^4.12.0",
-    "react-router-dom": "^6.20.0",
+    "react-router-dom": "^6.20.1",
     "react-toastify": "^9.1.3",
     "sockette": "^2.0.6",
     "typesafe-i18n": "^5.26.2",
@@ -55,10 +55,10 @@
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
     "concurrently": "^8.2.2",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-autofix": "^1.1.0",
     "eslint-plugin-import": "^2.29.0",
@@ -70,7 +70,7 @@
     "prettier": "^3.1.0",
     "rollup-plugin-visualizer": "^5.9.3",
     "terser": "^5.24.0",
-    "vite": "^5.0.3",
+    "vite": "^5.0.4",
     "vite-plugin-imagemin": "^0.6.1",
     "vite-tsconfig-paths": "^4.2.1"
   },

diff --git a/interface/src/components/routing/RouterTabs.tsx b/interface/src/components/routing/RouterTabs.tsx
@@ -14,7 +14,7 @@ const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
   const theme = useTheme();
   const smallDown = useMediaQuery(theme.breakpoints.down('sm'));
 
-  const handleTabChange = (event: React.ChangeEvent<HTMLInputElement>, path: string) => {
+  const handleTabChange = (_event: any, path: string) => {
     navigate(path);
   };
 

diff --git a/interface/src/components/routing/useRouterTab.ts b/interface/src/components/routing/useRouterTab.ts
@@ -1,8 +1,12 @@
-import { useLocation } from 'react-router-dom';
+import { useMatch, useResolvedPath } from 'react-router-dom';
 
 export const useRouterTab = () => {
-  const loc = useLocation().pathname;
-  const routerTab = loc.substring(0, loc.lastIndexOf('/')) ? loc : false;
+  // const loc = useLocation().pathname;
+  // const routerTab = loc.substring(0, loc.lastIndexOf('/')) ? loc : false;
+
+  const routerTabPath = useResolvedPath(':tab');
+  const routerTabPathMatch = useMatch(routerTabPath.pathname);
+  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
@@ -22,12 +22,8 @@ const AccessPoint: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="/ap/status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
-        <Tab
-          value="/ap/settings"
-          label={LL.SETTINGS_OF(LL.ACCESS_POINT(1))}
-          disabled={!authenticatedContext.me.admin}
-        />
+        <Tab value="status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
+        <Tab value="settings" label={LL.SETTINGS_OF(LL.ACCESS_POINT(1))} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<APStatusForm />} />
@@ -40,7 +36,7 @@ const AccessPoint: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="*" element={<Navigate replace to="/ap/status" />} />
+        <Route path="/*" element={<Navigate replace to="status" />} />
       </Routes>
     </>
   );

diff --git a/interface/src/framework/mqtt/Mqtt.tsx b/interface/src/framework/mqtt/Mqtt.tsx
@@ -21,8 +21,8 @@ const Mqtt: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="/mqtt/status" label={LL.STATUS_OF('MQTT')} />
-        <Tab value="/mqtt/settings" label={LL.SETTINGS_OF('MQTT')} disabled={!authenticatedContext.me.admin} />
+        <Tab value="status" label={LL.STATUS_OF('MQTT')} />
+        <Tab value="settings" label={LL.SETTINGS_OF('MQTT')} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<MqttStatusForm />} />
@@ -34,7 +34,7 @@ const Mqtt: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="*" element={<Navigate replace to="/mqtt/status" />} />
+        <Route path="/*" element={<Navigate replace to="status" />} />
       </Routes>
     </>
   );

diff --git a/interface/src/framework/network/NetworkConnection.tsx b/interface/src/framework/network/NetworkConnection.tsx
@@ -44,13 +44,9 @@ const NetworkConnection: FC = () => {
       }}
     >
       <RouterTabs value={routerTab}>
-        <Tab value="/network/status" label={LL.STATUS_OF(LL.NETWORK(1))} />
-        <Tab value="/network/scan" label={LL.NETWORK_SCAN()} disabled={!authenticatedContext.me.admin} />
-        <Tab
-          value="/network/settings"
-          label={LL.SETTINGS_OF(LL.NETWORK(1))}
-          disabled={!authenticatedContext.me.admin}
-        />
+        <Tab value="status" label={LL.STATUS_OF(LL.NETWORK(1))} />
+        <Tab value="scan" label={LL.NETWORK_SCAN()} disabled={!authenticatedContext.me.admin} />
+        <Tab value="settings" label={LL.SETTINGS_OF(LL.NETWORK(1))} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<NetworkStatusForm />} />
@@ -70,7 +66,7 @@ const NetworkConnection: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="*" element={<Navigate replace to="/network/status" />} />
+        <Route path="/*" element={<Navigate replace to="status" />} />
       </Routes>
     </WiFiConnectionContext.Provider>
   );

diff --git a/interface/src/framework/ntp/NetworkTime.tsx b/interface/src/framework/ntp/NetworkTime.tsx
@@ -20,8 +20,8 @@ const NetworkTime: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="/ntp/status" label={LL.STATUS_OF('NTP')} />
-        <Tab value="/ntp/settings" label={LL.SETTINGS_OF('NTP')} disabled={!authenticatedContext.me.admin} />
+        <Tab value="status" label={LL.STATUS_OF('NTP')} />
+        <Tab value="settings" label={LL.SETTINGS_OF('NTP')} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<NTPStatusForm />} />
@@ -33,7 +33,7 @@ const NetworkTime: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="*" element={<Navigate replace to="/ntp/status" />} />
+        <Route path="/*" element={<Navigate replace to="status" />} />
       </Routes>
     </>
   );

diff --git a/interface/src/framework/security/Security.tsx b/interface/src/framework/security/Security.tsx
@@ -17,13 +17,13 @@ const Security: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="/security/users" label={LL.MANAGE_USERS()} />
-        <Tab value="/security/settings" label={LL.SETTINGS_OF(LL.SECURITY(1))} />
+        <Tab value="users" label={LL.MANAGE_USERS()} />
+        <Tab value="settings" label={LL.SETTINGS_OF(LL.SECURITY(1))} />
       </RouterTabs>
       <Routes>
         <Route path="users" element={<ManageUsersForm />} />
         <Route path="settings" element={<SecuritySettingsForm />} />
-        <Route path="*" element={<Navigate replace to="/security/users" />} />
+        <Route path="/*" element={<Navigate replace to="users" />} />
       </Routes>
     </>
   );

diff --git a/interface/src/framework/system/System.tsx b/interface/src/framework/system/System.tsx
@@ -23,10 +23,10 @@ const System: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="/system/status" label={LL.STATUS_OF(LL.SYSTEM(1))} />
-        <Tab value="/system/log" label={LL.LOG_OF(LL.SYSTEM(2))} />
-        <Tab value="/system/ota" label={LL.SETTINGS_OF('OTA')} disabled={!me.admin} />
-        <Tab value="/system/upload" label={LL.UPLOAD_DOWNLOAD()} disabled={!me.admin} />
+        <Tab value="status" label={LL.STATUS_OF(LL.SYSTEM(1))} />
+        <Tab value="log" label={LL.LOG_OF(LL.SYSTEM(2))} />
+        <Tab value="ota" label={LL.SETTINGS_OF('OTA')} disabled={!me.admin} />
+        <Tab value="upload" label={LL.UPLOAD_DOWNLOAD()} disabled={!me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<SystemStatusForm />} />
@@ -47,7 +47,7 @@ const System: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="*" element={<Navigate replace to="/system/status" />} />
+        <Route path="/*" element={<Navigate replace to="status" />} />
       </Routes>
     </>
   );

diff --git a/interface/src/project/Dashboard.tsx b/interface/src/project/Dashboard.tsx
@@ -20,15 +20,15 @@ const Dashboard: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="/dashboard/devices" label={LL.DEVICES()} />
-        <Tab value="/dashboard/sensors" label={LL.SENSORS()} />
-        <Tab value="/dashboard/status" label="Status" />
+        <Tab value="devices" label={LL.DEVICES()} />
+        <Tab value="sensors" label={LL.SENSORS()} />
+        <Tab value="status" label="Status" />
       </RouterTabs>
       <Routes>
         <Route path="devices" element={<DashboardDevices />} />
         <Route path="sensors" element={<DashboardSensors />} />
         <Route path="status" element={<DashboardStatus />} />
-        <Route path="*" element={<Navigate replace to="/dashboard/devices" />} />
+        <Route path="/*" element={<Navigate replace to="devices" />} />
       </Routes>
     </>
   );

diff --git a/interface/src/project/Settings.tsx b/interface/src/project/Settings.tsx
@@ -18,17 +18,17 @@ const Settings: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="/settings/application" label={LL.APPLICATION_SETTINGS()} />
-        <Tab value="/settings/customization" label={LL.CUSTOMIZATIONS()} />
-        <Tab value="/settings/scheduler" label={LL.SCHEDULER()} />
-        <Tab value="/settings/customentities" label={LL.CUSTOM_ENTITIES(0)} />
+        <Tab value="application" label={LL.APPLICATION_SETTINGS()} />
+        <Tab value="customization" label={LL.CUSTOMIZATIONS()} />
+        <Tab value="scheduler" label={LL.SCHEDULER()} />
+        <Tab value="customentities" label={LL.CUSTOM_ENTITIES(0)} />
       </RouterTabs>
       <Routes>
         <Route path="application" element={<SettingsApplication />} />
         <Route path="customization" element={<SettingsCustomization />} />
         <Route path="scheduler" element={<SettingsScheduler />} />
         <Route path="customentities" element={<SettingsEntities />} />
-        <Route path="*" element={<Navigate replace to="/settings/application" />} />
+        <Route path="/*" element={<Navigate replace to="application" />} />
       </Routes>
     </>
   );