Skip to content

Commit

Permalink
chore: Upgrade react-router v5 to v6
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hypfer
Hypfer committed Oct 13, 2024
1 parent 5f0515b commit 6ec1aa2
Show file tree
Hide file tree
Showing 11 changed files with 241 additions and 451 deletions.
3 changes: 1 addition & 2 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"rehype-raw": "7.0.0",
"react-markdown": "9.0.1",
"remark-gfm": "4.0.0",
"react-router-dom": "5.3.3",
"react-router-dom": "6.27.0",
"react-scripts": "5.0.1",
"semaphore": "1.1.0",
"use-long-press": "3.2.0",
Expand All @@ -63,7 +63,6 @@
"@babel/plugin-proposal-private-property-in-object": "7.21.11",
"@types/react": "18.3.8",
"@types/react-dom": "18.3.0",
"@types/react-router-dom": "5.3.3",
"@types/uuid": "10.0.0",
"tsutils": "3.21.0",
"cra-build-watch": "git+https://[email protected]/Hypfer/cra-build-watch.git#5.0.0"
Expand Down
26 changes: 8 additions & 18 deletions frontend/src/AppRouter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {HashRouter, Redirect, Route, Switch} from "react-router-dom";
import {HashRouter, Navigate, Route, Routes} from "react-router-dom";
import Div100vh from "react-div-100vh";
import HomePage from "./HomePage";
import OptionsRouter from "./options";
Expand Down Expand Up @@ -31,23 +31,13 @@ const AppRouter: React.FunctionComponent<{ paletteMode: PaletteMode, setPaletteM
<Root>
<Content>
<ValetudoAppBar paletteMode={paletteMode} setPaletteMode={setPaletteMode}/>
<Switch>
<Route exact path="/">
<HomePage/>
</Route>
<Route path="/robot">
<RobotRouter/>
</Route>
<Route path="/options">
<OptionsRouter/>
</Route>
<Route path="/valetudo">
<ValetudoRouter/>
</Route>
<Route path="*">
<Redirect to="/"/>
</Route>
</Switch>
<Routes>
<Route path="" element={<HomePage />} />
<Route path="robot/*" element={<RobotRouter />} />
<Route path="options/*" element={<OptionsRouter />} />
<Route path="valetudo/*" element={<ValetudoRouter />} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</Content>
</Root>
</HashRouter>
Expand Down
90 changes: 41 additions & 49 deletions frontend/src/components/ValetudoAppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import {
Help as HelpIcon,
SvgIconComponent
} from "@mui/icons-material";
import {Link, useRouteMatch} from "react-router-dom";
import {Link, useLocation} from "react-router-dom";
import ValetudoEvents from "./ValetudoEvents";
import {Capability} from "../api";
import {useCapabilitiesSupported} from "../CapabilitiesProvider";
Expand All @@ -49,7 +49,7 @@ import {

interface MenuEntry {
kind: "MenuEntry";
routeMatch: string;
route: string;
title: string;
menuIcon: SvgIconComponent;
menuText: string;
Expand All @@ -61,7 +61,7 @@ interface MenuEntry {

interface MenuSubEntry {
kind: "MenuSubEntry",
routeMatch: string,
route: string,
title: string,
parentRoute: string
}
Expand All @@ -77,7 +77,7 @@ interface MenuSubheader {
const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
{
kind: "MenuEntry",
routeMatch: "/",
route: "/",
title: "Home",
menuIcon: HomeIcon,
menuText: "Home"
Expand All @@ -88,7 +88,7 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
},
{
kind: "MenuEntry",
routeMatch: "/robot/consumables",
route: "/robot/consumables",
title: "Consumables",
menuIcon: PendingActionsIcon,
menuText: "Consumables",
Expand All @@ -99,7 +99,7 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
},
{
kind: "MenuEntry",
routeMatch: "/robot/manual_control",
route: "/robot/manual_control",
title: "Manual control",
menuIcon: SettingsRemoteIcon,
menuText: "Manual control",
Expand All @@ -110,7 +110,7 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
},
{
kind: "MenuEntry",
routeMatch: "/robot/total_statistics",
route: "/robot/total_statistics",
title: "Statistics",
menuIcon: StatisticsIcon,
menuText: "Statistics",
Expand All @@ -125,7 +125,7 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
},
{
kind: "MenuEntry",
routeMatch: "/options/map_management",
route: "/options/map_management",
title: "Map Options",
menuIcon: MapManagementIcon,
menuText: "Map",
Expand All @@ -145,81 +145,81 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
},
{
kind: "MenuSubEntry",
routeMatch: "/options/map_management/segments",
route: "/options/map_management/segments",
title: "Segment Management",
parentRoute: "/options/map_management"
},
{
kind: "MenuSubEntry",
routeMatch: "/options/map_management/virtual_restrictions",
route: "/options/map_management/virtual_restrictions",
title: "Virtual Restriction Management",
parentRoute: "/options/map_management"
},
{
kind: "MenuSubEntry",
routeMatch: "/options/map_management/robot_coverage",
route: "/options/map_management/robot_coverage",
title: "Robot Coverage Map",
parentRoute: "/options/map_management"
},
{
kind: "MenuEntry",
routeMatch: "/options/connectivity",
route: "/options/connectivity",
title: "Connectivity Options",
menuIcon: ConnectivityIcon,
menuText: "Connectivity"
},
{
kind: "MenuSubEntry",
routeMatch: "/options/connectivity/auth",
route: "/options/connectivity/auth",
title: "Auth Settings",
parentRoute: "/options/connectivity"
},
{
kind: "MenuSubEntry",
routeMatch: "/options/connectivity/mqtt",
route: "/options/connectivity/mqtt",
title: "MQTT Connectivity",
parentRoute: "/options/connectivity"
},
{
kind: "MenuSubEntry",
routeMatch: "/options/connectivity/networkadvertisement",
route: "/options/connectivity/networkadvertisement",
title: "Network Advertisement",
parentRoute: "/options/connectivity"
},
{
kind: "MenuSubEntry",
routeMatch: "/options/connectivity/ntp",
route: "/options/connectivity/ntp",
title: "NTP Connectivity",
parentRoute: "/options/connectivity"
},
{
kind: "MenuSubEntry",
routeMatch: "/options/connectivity/wifi",
route: "/options/connectivity/wifi",
title: "Wi-Fi Connectivity",
parentRoute: "/options/connectivity"
},
{
kind: "MenuEntry",
routeMatch: "/options/robot",
route: "/options/robot",
title: "Robot Options",
menuIcon: RobotMonochromeIcon,
menuText: "Robot"
},
{
kind: "MenuSubEntry",
routeMatch: "/options/robot/misc",
route: "/options/robot/misc",
title: "Misc Options",
parentRoute: "/options/robot"
},
{
kind: "MenuSubEntry",
routeMatch: "/options/robot/quirks",
route: "/options/robot/quirks",
title: "Quirks",
parentRoute: "/options/robot"
},
{
kind: "MenuEntry",
routeMatch: "/options/valetudo",
route: "/options/valetudo",
title: "Valetudo Options",
menuIcon: ValetudoMonochromeIcon,
menuText: "Valetudo"
Expand All @@ -230,42 +230,42 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
},
{
kind: "MenuEntry",
routeMatch: "/valetudo/timers",
route: "/valetudo/timers",
title: "Timers",
menuIcon: TimeIcon,
menuText: "Timers"
},
{
kind: "MenuEntry",
routeMatch: "/valetudo/log",
route: "/valetudo/log",
title: "Log",
menuIcon: LogIcon,
menuText: "Log"
},
{
kind: "MenuEntry",
routeMatch: "/valetudo/updater",
route: "/valetudo/updater",
title: "Updater",
menuIcon: UpdaterIcon,
menuText: "Updater"
},
{
kind: "MenuEntry",
routeMatch: "/valetudo/system_information",
route: "/valetudo/system_information",
title: "System Information",
menuIcon: SystemInformationIcon,
menuText: "System Information"
},
{
kind: "MenuEntry",
routeMatch: "/valetudo/help",
route: "/valetudo/help",
title: "General Help",
menuIcon: HelpIcon,
menuText: "General Help"
},
{
kind: "MenuEntry",
routeMatch: "/valetudo/about",
route: "/valetudo/about",
title: "About Valetudo",
menuIcon: AboutIcon,
menuText: "About Valetudo"
Expand All @@ -277,42 +277,34 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
setPaletteMode
}): React.ReactElement => {
const [drawerOpen, setDrawerOpen] = React.useState<boolean>(false);
const currentLocation = useLocation()?.pathname;
const robotCapabilities = useCapabilitiesSupported(...Object.values(Capability));

const routeMatch = useRouteMatch(menuTree.filter(e => {
return "routeMatch" in e;
}).map(e => {
// Make TS happy
return "routeMatch" in e ? e.routeMatch : "";
}).reverse()); // Reverse because order is important (deep => shallow)
const currentTab = routeMatch?.path;

const currentMenuEntry = menuTree.find(e => {
return "routeMatch" in e && e.routeMatch === routeMatch?.path;
}) ?? menuTree[0];
//@ts-ignore
const currentMenuEntry = menuTree.find(element => element.route === currentLocation) ?? menuTree[0];

const pageTitle = React.useMemo(() => {
let ret = "";

menuTree.forEach((value) => {
if ("routeMatch" in value && value.routeMatch === currentTab && value.title) {
menuTree.find((element) => {
//@ts-ignore
if (currentLocation.includes(element.route) && element.route !== "/" && element.title) {
if (ret !== "") {
ret += " — ";
ret += " - ";
}

ret += value.title;
ret += element.title;
}
});


if (ret !== "") {
document.title = `Valetudo - ${ret}`;
} else {
document.title = "Valetudo";
}

return ret;
}, [currentTab]);
return currentMenuEntry.title;
}, [currentLocation, currentMenuEntry]);

const drawerContent = React.useMemo(() => {
return (
Expand Down Expand Up @@ -376,10 +368,10 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal

return (
<ListItemButton
key={value.routeMatch}
selected={value.routeMatch === currentTab}
key={value.route}
selected={value.route === currentLocation}
component={Link}
to={value.routeMatch}
to={value.route}
>
<ListItemIcon>
<ItemIcon/>
Expand Down Expand Up @@ -461,7 +453,7 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
</List>
</Box>
);
}, [currentTab, paletteMode, setPaletteMode, robotCapabilities]);
}, [currentLocation, paletteMode, setPaletteMode, robotCapabilities]);

const toolbarContent = React.useMemo(() => {
switch (currentMenuEntry.kind) {
Expand Down
37 changes: 37 additions & 0 deletions frontend/src/options/ConnectivityOptionsRouter.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import {Route} from "react-router";
import {Navigate, Routes} from "react-router-dom";
import {useCapabilitiesSupported} from "../CapabilitiesProvider";
import {Capability} from "../api";
import ConnectivityOptions from "./connectivity/ConnectivityOptions";
import NTPConnectivityPage from "./connectivity/NTPConnectivityPage";
import AuthSettingsPage from "./connectivity/AuthSettingsPage";
import WifiConnectivityPage from "./connectivity/WifiConnectivityPage";
import NetworkAdvertisementSettingsPage from "./connectivity/NetworkAdvertisementSettingsPage";
import React from "react";
import MQTTConnectivityPage from "./connectivity/MQTTConnectivityPage";

const OptionsRouter = (): React.ReactElement => {
const [
wifiConfigurationCapabilitySupported,
] = useCapabilitiesSupported(
Capability.WifiConfiguration
);

return (
<Routes>
<Route path={""} element={<ConnectivityOptions />} />
<Route path={"auth"} element={<AuthSettingsPage />} />
<Route path={"mqtt"} element={<MQTTConnectivityPage />} />
<Route path={"networkadvertisement"} element={<NetworkAdvertisementSettingsPage />} />
<Route path={"ntp"} element={<NTPConnectivityPage />} />

{wifiConfigurationCapabilitySupported && (
<Route path={"wifi"} element={<WifiConnectivityPage />} />
)}

<Route path="*" element={<Navigate to="/" />} />
</Routes>
);
};

export default OptionsRouter;
Loading

0 comments on commit 6ec1aa2

Please sign in to comment.