From 1fd2adc48c7ccdc3065b360f0ac916079ef1ce64 Mon Sep 17 00:00:00 2001 From: jsonBackup Date: Mon, 19 Feb 2024 10:49:36 +0100 Subject: [PATCH 1/2] Update `react-router-dom` from `5.3.4` to `6.22.0` This migration requires turning class components into functional ones. Also removes `history` package. --- src/Moryx.CommandCenter.Web/package.json | 5 +- .../common/components/Menu/RoutingMenu.tsx | 45 ++--- .../components/Menu/RoutingMenuItem.tsx | 79 ++++----- .../common/components/Menu/TreeMenuItem.tsx | 31 ++-- .../src/common/components/ModuleHeader.tsx | 4 +- .../src/common/container/App.tsx | 84 ++++----- .../src/databases/container/DatabaseModel.tsx | 6 +- .../src/databases/container/Databases.tsx | 16 +- src/Moryx.CommandCenter.Web/src/index.tsx | 2 - .../ConfigEditor/NavigableConfigEditor.tsx | 145 +++++++--------- .../components/ConsoleMethodConfigurator.tsx | 101 +++++------ .../components/ConsoleMethodResult.tsx | 92 +++++----- .../modules/container/ModuleConfiguration.tsx | 164 +++++++++--------- .../src/modules/container/Modules.tsx | 26 ++- src/Moryx.CommandCenter.Web/tslint.json | 2 +- 15 files changed, 356 insertions(+), 446 deletions(-) diff --git a/src/Moryx.CommandCenter.Web/package.json b/src/Moryx.CommandCenter.Web/package.json index 23d3fc945..f3e0e52f5 100644 --- a/src/Moryx.CommandCenter.Web/package.json +++ b/src/Moryx.CommandCenter.Web/package.json @@ -20,15 +20,14 @@ "@types/uuid": "^9.0.8", "bootstrap": "4.6.2", "bootstrap5-toggle": "^5.0.6", - "history": "^4.10.1", "moment": "^2.30.1", "query-string": "^8.2.0", "react": "18.2.0", "react-bootstrap-toggle": "^2.3.2", "react-dom": "18.2.0", "react-redux": "^9.1.0", - "react-router": "^5.3.4", - "react-router-dom": "^5.3.4", + "react-router": "^6.22.0", + "react-router-dom": "^6.22.0", "react-router-redux": "^4.0.8", "react-toastify": "^10.0.4", "reactstrap": "^8.10.1", diff --git a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx index 4d6123d43..87bfa4be3 100644 --- a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx +++ b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx @@ -4,42 +4,35 @@ */ import * as React from "react"; -import { Link, RouteComponentProps, withRouter } from "react-router-dom"; -import { Collapse } from "reactstrap"; +import { useNavigate } from "react-router-dom"; import MenuItemModel from "../../models/MenuItemModel"; -import MenuModel from "../../models/MenuModel"; import RoutingMenuItem from "./RoutingMenuItem"; import { MenuProps } from "./TreeMenu"; -class RoutingMenu extends React.Component & MenuProps, {}> { +function RoutingMenu(props: MenuProps) { + const navigate = useNavigate(); - constructor(props: RouteComponentProps<{}> & MenuProps) { - super (props); - this.state = {}; - } - - protected handleMenuItemClick(menuItem: MenuItemModel): void { - if (this.props.onActiveMenuItemChanged != null) { - this.props.onActiveMenuItemChanged(menuItem); + const handleMenuItemClick = (menuItem: MenuItemModel): void => { + if (props.onActiveMenuItemChanged != null) { + props.onActiveMenuItemChanged(menuItem); } - this.props.history.push(menuItem.NavPath); - } + navigate(menuItem.NavPath); + }; - protected renderMenu(menuItems: MenuItemModel[]): React.ReactNode { - return menuItems.map ((menuItem, idx) => { + const renderMenu = (menuItems: MenuItemModel[]): React.ReactNode => { + return menuItems.map((menuItem, idx) => { return ( - this.handleMenuItemClick(menuItem)} /> + handleMenuItemClick(menuItem)} + /> ); }); - } + }; - public render(): React.ReactNode { - return ( -
- {this.renderMenu(this.props.Menu.MenuItems)} -
- ); - } + return
{renderMenu(props.Menu.MenuItems)}
; } -export default withRouter & MenuProps, React.ComponentType>(RoutingMenu); +export default RoutingMenu; diff --git a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx index 3b86e44d0..0cbc665ae 100644 --- a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx +++ b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx @@ -1,11 +1,10 @@ /* - * Copyright (c) 2020, Phoenix Contact GmbH & Co. KG - * Licensed under the Apache License, Version 2.0 +* Copyright (c) 2020, Phoenix Contact GmbH & Co. KG +* Licensed under the Apache License, Version 2.0 */ -import { Location, UnregisterCallback } from "history"; import * as React from "react"; -import { Link, RouteComponentProps, withRouter } from "react-router-dom"; +import { Link, Location, useLocation, useNavigate } from "react-router-dom"; import { ListGroupItem } from "reactstrap"; import MenuItemModel from "../../models/MenuItemModel"; @@ -19,54 +18,42 @@ interface MenuItemState { IsOpened: boolean; } -class RoutingMenuItem extends React.Component & MenuItemProps, MenuItemState> { - private unregisterListenerCallback: UnregisterCallback; +function RoutingMenuItem(props: MenuItemProps) { + const location = useLocation(); + const navigate = useNavigate(); - constructor(props: RouteComponentProps<{}> & MenuItemProps) { - super(props); - this.state = { IsOpened: this.isOpened(this.props.location) }; + const isOpened = (location: Location): boolean => { + return location.pathname.startsWith(props.MenuItem.NavPath); + }; - this.unregisterListenerCallback = this.props.history.listen(this.onRouteChanged.bind(this)); - this.onMenuItemClicked = this.onMenuItemClicked.bind(this); - } + const [IsOpened, setIsOpened] = React.useState(isOpened(location)); - public componentWillUnmount(): void { - this.unregisterListenerCallback(); - } + React.useEffect(() => { + setIsOpened(isOpened(location)); + }, [navigate]); - private isOpened(location: Location): boolean { - return location.pathname.startsWith(this.props.MenuItem.NavPath); - } - - private onRouteChanged(location: Location, action: string): void { - this.setState({ IsOpened: this.isOpened(location) }); - } - - private handleMenuItemClick(e: React.MouseEvent): void { + const handleMenuItemClick = (e: React.MouseEvent): void => { e.preventDefault(); + setIsOpened((prevState) => !prevState); + onMenuItemClicked(props.MenuItem); + }; - this.setState((prevState) => ({ IsOpened: !prevState.IsOpened })); - this.onMenuItemClicked(this.props.MenuItem); - } - - private onMenuItemClicked(menuItem: MenuItemModel): void { - if (this.props.onMenuItemClicked != null) { - this.props.onMenuItemClicked(menuItem); + const onMenuItemClicked = (menuItem: MenuItemModel): void => { + if (props.onMenuItemClicked != null) { + props.onMenuItemClicked(menuItem); } - } - - public render(): React.ReactNode { - const isActive = this.props.location.pathname.includes(this.props.MenuItem.NavPath); - - return ( - ) => this.handleMenuItemClick(e)}> - - {this.props.MenuItem.Name} - - {this.props.MenuItem.Content} - - ); - } + }; + + const isActive = isOpened(location); + + return ( + ) => handleMenuItemClick(e)}> + + {props.MenuItem.Name} + + {props.MenuItem.Content} + + ); } -export default withRouter & MenuItemProps, React.ComponentType>(RoutingMenuItem); +export default RoutingMenuItem; diff --git a/src/Moryx.CommandCenter.Web/src/common/components/Menu/TreeMenuItem.tsx b/src/Moryx.CommandCenter.Web/src/common/components/Menu/TreeMenuItem.tsx index f2b5efade..3165247e4 100644 --- a/src/Moryx.CommandCenter.Web/src/common/components/Menu/TreeMenuItem.tsx +++ b/src/Moryx.CommandCenter.Web/src/common/components/Menu/TreeMenuItem.tsx @@ -6,7 +6,6 @@ import { mdiChevronDown, mdiChevronUp } from "@mdi/js"; import Icon from "@mdi/react"; import * as React from "react"; -import { Link, RouteComponentProps, withRouter } from "react-router-dom"; import { Col, Collapse, Container, Row } from "reactstrap"; import MenuItemModel, { IconType } from "../../models/MenuItemModel"; @@ -22,7 +21,7 @@ interface MenuItemState { export default class TreeMenuItem extends React.Component { constructor(props: MenuItemProps) { - super (props); + super(props); this.state = { IsOpened: false }; this.onMenuItemClicked = this.onMenuItemClicked.bind(this); @@ -42,12 +41,12 @@ export default class TreeMenuItem extends React.Component + return this.props.MenuItem.SubMenuItems.map((menuItem, idx) => ); + MenuItem={menuItem} + Level={this.props.Level + 1} + onMenuItemClicked={this.onMenuItemClicked} + />); } public render(): React.ReactNode { @@ -55,34 +54,34 @@ export default class TreeMenuItem extends React.Component - { this.props.MenuItem.Icon !== undefined && iconType === IconType.Icon && + {this.props.MenuItem.Icon !== undefined && iconType === IconType.Icon && } - { this.props.MenuItem.Icon !== undefined && iconType === IconType.Image && - + {this.props.MenuItem.Icon !== undefined && iconType === IconType.Image && + } - {this.props.MenuItem.Name} + {this.props.MenuItem.Name} ); return ( -
+
- { this.props.MenuItem.Content === undefined && + {this.props.MenuItem.Content === undefined && defaultContent } - { this.props.MenuItem.Content !== undefined && + {this.props.MenuItem.Content !== undefined && this.props.MenuItem.Content }
) => this.handleMenuItemClick(e)}> - { hasSubItems && - + {hasSubItems && + } diff --git a/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx b/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx index a69e0aaff..3f858560e 100644 --- a/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx +++ b/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx @@ -48,7 +48,7 @@ export class ModuleHeader extends React.Component