migrate router to v6

Talend · Jul 9, 2024 · f765110 · f765110
1 parent f7b1b53
commit f765110
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 76 deletions.
diff --git a/component-starter-server/src/main/frontend/src/app/components/App/App.js b/component-starter-server/src/main/frontend/src/app/components/App/App.js
@@ -14,9 +14,7 @@
  *  limitations under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
-import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
-import { withTranslation } from 'react-i18next';
+import { BrowserRouter as Router, Route, useLocation, useNavigate, Routes } from 'react-router-dom';
 import IconsProvider from '@talend/react-components/lib/IconsProvider';
 import Icon from '@talend/react-components/lib/Icon';
 import Toggle from '@talend/react-components/lib/Toggle';
@@ -30,49 +28,50 @@ import ProjectContext from '../../ProjectContext';
 
 import theme from './App.scss';
 
-function ModeSwitcher (props) {
-	const openapi = (props.history.location.pathname || '/').startsWith('/openapi');
+function ModeSwitcher() {
+	const navigate = useNavigate();
+	const openapi = (useLocation().pathname || '/').startsWith('/openapi');
+
 	return (
-		<React.Fragment>
-			<Icon name='talend-component-kit-negative' />
+		<>
+			<Icon name="talend-component-kit-negative" />
 			<label>Standard</label>
 			<Toggle
 				id="starter-mode-switcher"
 				onChange={() => {
 					if (openapi) {
-						props.history.push('/');
+						navigate('/');
 					} else {
-						props.history.push('/openapi/project');
+						navigate('/openapi/project');
 					}
 				}}
 				checked={openapi}
 			/>
 			<label>OpenAPI</label>
-			<Icon name='talend-rest' />
-		</React.Fragment>
+			<Icon name="talend-rest" />
+		</>
 	);
 }
-const ModeSwitcherRouterAware = withRouter(ModeSwitcher);
 
-function App (props) {
+function App() {
 	return (
 		<Router>
 			<div className={theme.App}>
 				<IconsProvider />
 
 				<div className={theme.header}>
 					<HeaderBar
-						id='heder-bar'
+						id="header-bar"
 						logo={{ isFull: true }}
 						brand={{
 							label: 'Starter Toolkit',
 						}}
 						user={{
 							className: theme.switcher,
 						}}
-						getComponent={component => {
+						getComponent={(component) => {
 							if (component == 'User') {
-								return ModeSwitcherRouterAware;
+								return ModeSwitcher;
 							}
 							throw new Error('get the default');
 						}}
@@ -85,10 +84,10 @@ function App (props) {
 						<DatastoreContext.Provider>
 							<DatasetContext.Provider>
 								<ComponentsContext.Provider>
-									<Switch>
+									<Routes>
 										<Route path="/openapi" component={OpenAPIWizard} />
 										<Route component={Generator} />
-									</Switch>
+									</Routes>
 								</ComponentsContext.Provider>
 							</DatasetContext.Provider>
 						</DatastoreContext.Provider>
@@ -99,8 +98,4 @@ function App (props) {
 	);
 }
 
-export default withTranslation('Help')(App);
-
-App.propTypes = {
-	t: PropTypes.func,
-};
+export default App;
diff --git a/component-starter-server/src/main/frontend/src/app/components/Component/Component.js b/component-starter-server/src/main/frontend/src/app/components/Component/Component.js
@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Redirect } from 'react-router';
+import { Navigate } from 'react-router';
 import { Action } from '@talend/react-components/lib/Actions';
 
 import ComponentEditForm from '../ComponentEditForm';
@@ -44,9 +44,9 @@ export default class Component extends React.Component {
 		const componentIndex = this.props.match.params.componentId;
 		return (
 			<ComponentsContext.Consumer>
-				{components => {
+				{(components) => {
 					if (componentIndex === 'last') {
-						return <Redirect to={`/component/${components.components.length - 1}`} />;
+						return <Navigate to={`/component/${components.components.length - 1}`} />;
 					}
 					if (componentIndex === 0 && components.components.length === 0) {
 						components.addComponent();
@@ -64,7 +64,7 @@ export default class Component extends React.Component {
 						<div className={theme.Component}>
 							<TileContext.Provider value={cols}>
 								<TileContext.Consumer>
-									{service =>
+									{(service) =>
 										service.tiles.map((col, index) => {
 											if (index < service.tiles.length - 2) {
 												return (

diff --git a/component-starter-server/src/main/frontend/src/app/components/OpenAPI/OpenAPI.component.js b/component-starter-server/src/main/frontend/src/app/components/OpenAPI/OpenAPI.component.js
@@ -14,7 +14,7 @@
  *  limitations under the License.
  */
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-chrome';
@@ -235,7 +235,7 @@ export default class OpenAPIWizard extends React.Component {
 					</div>
 					<div className={generatorTheme.content}>
 						<main>
-							<Switch>
+							<Routes>
 								<Route
 									exact
 									path="/openapi/project"
@@ -249,7 +249,7 @@ export default class OpenAPIWizard extends React.Component {
 										<Finish {...props} openapi={true} actionUrl={GENERATOR_OPENAPI_ZIP_URL} />
 									)}
 								/>
-							</Switch>
+							</Routes>
 						</main>
 					</div>
 				</div>

diff --git a/component-starter-server/src/main/frontend/src/app/components/OpenAPI/StepByStep.js b/component-starter-server/src/main/frontend/src/app/components/OpenAPI/StepByStep.js
@@ -15,25 +15,28 @@
  */
 import React from 'react';
 import classnames from 'classnames';
-import { withRouter, Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import theme from '../SideMenu/SideMenu.scss';
 
 function StepByStep(props) {
 	return (
 		<nav className={theme.menu}>
 			<ol>
-				<li className={classnames({ [theme.active]: props.location.pathname === '/openapi/project' })}>
+				<li
+					className={classnames({ [theme.active]: props.location.pathname === '/openapi/project' })}
+				>
 					<Link to="/openapi/project" id="step-start">
 						Start
 					</Link>
 				</li>
 				<li id="step-openapi">
-					<Link to="/openapi/design">
-						API
-					</Link>
+					<Link to="/openapi/design">API</Link>
 				</li>
-				<li id="step-finish" className={classnames({ [theme.active]: props.location.pathname === '/openapi/export' })}>
+				<li
+					id="step-finish"
+					className={classnames({ [theme.active]: props.location.pathname === '/openapi/export' })}
+				>
 					<Link to="/openapi/export" id="go-to-finish-button">
 						Finish
 					</Link>
@@ -43,4 +46,4 @@ function StepByStep(props) {
 	);
 }
 
-export default withRouter(StepByStep);
+export default StepByStep;
diff --git a/...nt-starter-server/src/main/frontend/src/app/components/ProjectMetadata/ProjectMetadata.js b/...nt-starter-server/src/main/frontend/src/app/components/ProjectMetadata/ProjectMetadata.js
@@ -64,20 +64,22 @@ export default class ProjectMetadata extends React.Component {
 	render() {
 		return (
 			<ProjectContext.Consumer>
-				{project => (
+				{(project) => (
 					<div className={theme.ProjectMetadata}>
 						<h1>{this.props.title || 'Create a Talend Component Family Project'}</h1>
 						<form className={theme.main} noValidate>
 							<BuildTypeSelector project={project} />
 
-							{!this.props.hideFacets && <div className="form-group">
-								{!!project.configuration && (
-									<FacetSelector
-										facets={project.configuration.facets}
-										selected={project.project.facets}
-									/>
-								)}
-							</div>}
+							{!this.props.hideFacets && (
+								<div className="form-group">
+									{!!project.configuration && (
+										<FacetSelector
+											facets={project.configuration.facets}
+											selected={project.project.facets}
+										/>
+									)}
+								</div>
+							)}
 
 							<div className="form-group">
 								<h2>Component Metadata</h2>
@@ -107,7 +109,7 @@ export default class ProjectMetadata extends React.Component {
 										accessor="family"
 									/>
 								</div>
-								{!this.props.hideCategory &&
+								{!this.props.hideCategory && (
 									<div className="form-group">
 										<label htmlFor="projectCategory">Category</label>
 										<Help
@@ -131,10 +133,10 @@ export default class ProjectMetadata extends React.Component {
 
 										<CategorySelector
 											initialValue={project.project.category}
-											onChange={value => onCategoryUpdate(value, project)}
+											onChange={(value) => onCategoryUpdate(value, project)}
 										/>
 									</div>
-								}
+								)}
 							</div>
 
 							<h2>Project Metadata</h2>
@@ -237,7 +239,7 @@ export default class ProjectMetadata extends React.Component {
 							)}
 
 							{this.state.showAll && (
-								<React.Fragment>
+								<>
 									<div className="form-group">
 										<label htmlFor="projectVersion">Version</label>
 										<Help
@@ -315,7 +317,7 @@ export default class ProjectMetadata extends React.Component {
 										className="btn-xs"
 										onClick={this.showLight}
 									/>
-								</React.Fragment>
+								</>
 							)}
 						</form>
 					</div>

diff --git a/component-starter-server/src/main/frontend/src/app/components/SideMenu/SideMenu.component.js b/component-starter-server/src/main/frontend/src/app/components/SideMenu/SideMenu.component.js
@@ -16,7 +16,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { withRouter, Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import ActionButton from '@talend/react-components/lib/Actions/ActionButton';
 
 import ComponentsContext from '../../ComponentsContext';
@@ -26,13 +26,14 @@ import DatasetContext from '../../DatasetContext';
 import theme from './SideMenu.scss';
 
 function activateIO(service, datastore, dataset) {
-	return event => {
+	return (event) => {
 		event.preventDefault();
 		service.activateIO(datastore, dataset);
 	};
 }
 
-function SideMenu(props) {
+function SideMenu() {
+	const pathname = useLocation().pathname;
 	const components = React.useContext(ComponentsContext.raw);
 	const dataset = React.useContext(DatasetContext.raw);
 	const datastore = React.useContext(DatastoreContext.raw);
@@ -41,33 +42,32 @@ function SideMenu(props) {
 			<ol>
 				<li
 					className={classnames({
-						[theme.active]:
-							props.location.pathname === '/' || props.location.pathname === '/project',
+						[theme.active]: pathname === '/' || pathname === '/project',
 					})}
 				>
 					<Link to="/project" id="step-start">
 						Start
 					</Link>
 				</li>
 				{components.withIO ? (
-					<React.Fragment>
+					<>
 						<li
 							id="step-datastore"
 							className={classnames({
-								[theme.active]: props.location.pathname === '/datastore',
+								[theme.active]: pathname === '/datastore',
 							})}
 						>
 							<Link to="/datastore">Datastore</Link>
 						</li>
 						<li
 							id="step-dataset"
 							className={classnames({
-								[theme.active]: props.location.pathname === '/dataset',
+								[theme.active]: pathname === '/dataset',
 							})}
 						>
 							<Link to="/dataset">Dataset</Link>
 						</li>
-					</React.Fragment>
+					</>
 				) : (
 					<li id="step-activate-io">
 						<a href="#/createNew" onClick={activateIO(components, datastore, dataset)}>
@@ -79,7 +79,7 @@ function SideMenu(props) {
 					<li
 						id={`step-component-${i}`}
 						className={classnames({
-							[theme.active]: props.location.pathname === `/component/${i}`,
+							[theme.active]: pathname === `/component/${i}`,
 						})}
 						key={i}
 					>
@@ -95,14 +95,12 @@ function SideMenu(props) {
 					</li>
 				))}
 				<li id="step-add-component">
-					<Link to="/add-component">
-						Add A Component
-					</Link>
+					<Link to="/add-component">Add A Component</Link>
 				</li>
 				<li
 					id="step-finish"
 					className={classnames({
-						[theme.active]: props.location.pathname === '/export',
+						[theme.active]: pathname === '/export',
 					})}
 				>
 					<Link to="/export" id="go-to-finish-button">
@@ -115,10 +113,5 @@ function SideMenu(props) {
 }
 
 SideMenu.displayName = 'SideMenu';
-SideMenu.propTypes = {
-	location: PropTypes.shape({
-		pathname: PropTypes.string,
-	}),
-};
 
-export default withRouter(SideMenu);
+export default SideMenu;