From c7d39a9bebd5309d8c8134ca509d5edeb72cca59 Mon Sep 17 00:00:00 2001 From: Stanislau Ihnatsenka Date: Tue, 4 Mar 2025 14:39:29 +0100 Subject: [PATCH] update: react-router-dom --- package.json | 4 +- src/components/App.js | 16 +- src/components/BreadCrumbs/index.js | 3 +- src/components/Documentation/Documentation.js | 20 +- .../Documentation/components/Header/Header.js | 3 +- .../Documentation/pages/buttons/Buttons.js | 3 +- .../Documentation/pages/pages/Pages.js | 7 +- .../Documentation/pages/sidebar/Sidebar.js | 3 +- src/components/Layout/Layout.js | 10 +- src/components/Sidebar/Sidebar.js | 3 +- src/components/Table/Actions.js | 6 +- src/context/ManagementContext.js | 8 +- src/context/ProductContext.js | 6 +- src/context/UserContext.js | 12 +- src/pages/CRUD/Users/table/UsersTable.js | 6 +- src/pages/ecommerce/CreateProduct.js | 10 +- src/pages/ecommerce/Ecommerce.js | 21 +- src/pages/login/Login.js | 3 +- src/pages/reset/Reset.js | 13 +- src/pages/user/AddUser.js | 8 +- src/pages/user/EditUser.js | 9 +- src/pages/verify/Verify.js | 8 +- yarn.lock | 365 +++++++++++------- 23 files changed, 317 insertions(+), 230 deletions(-) diff --git a/package.json b/package.json index 355e873d..8b64c1bb 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "dependencies": { "@emotion/react": "^11.11.5", "@emotion/styled": "^11.11.5", - "@fullcalendar/daygrid": "^6.1.14", "@fullcalendar/core": "^6.1.14", + "@fullcalendar/daygrid": "^6.1.14", "@fullcalendar/interaction": "^6.1.14", "@fullcalendar/list": "^6.1.14", "@fullcalendar/react": "^6.1.14", @@ -60,7 +60,7 @@ "react-dom": "^19.0.0", "react-google-maps": "^9.4.5", "react-redux": "^7.2.9", - "react-router-dom": "^5.3.4", + "react-router-dom": "7.2.0", "react-scripts": "^5.0.1", "react-simple-maps": "^0.12.1", "react-sortablejs": "^1.5.1", diff --git a/src/components/App.js b/src/components/App.js index c24c397e..f8b6318f 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Router, Route, Switch, Redirect } from 'react-router-dom'; +import { Router, Route, Routes, Navigate } from 'react-router-dom'; import { ConnectedRouter } from 'connected-react-router'; import { SnackbarProvider } from './Snackbar'; @@ -27,17 +27,17 @@ export default function App() { - + } + render={() => } /> } + render={() => } /> @@ -45,9 +45,9 @@ export default function App() { - + - + @@ -64,7 +64,7 @@ export default function App() { isAuth ? ( React.createElement(component, props) ) : ( - + ) } /> @@ -77,7 +77,7 @@ export default function App() { {...rest} render={(props) => isAuth ? ( - { // global let layoutState = useLayoutState(); const classes = useStyles(); - const { path } = useRouteMatch(); + + const match = useMatch('/documentation'); + const path = match?.pattern.path || ''; + return (
@@ -87,9 +89,9 @@ const Documentation = (props) => { })} - + - + @@ -106,10 +108,10 @@ const Documentation = (props) => { - +
); }; -export default withRouter(Documentation); +export default Documentation; diff --git a/src/components/Documentation/components/Header/Header.js b/src/components/Documentation/components/Header/Header.js index 5fc8c4f4..1d9a7165 100644 --- a/src/components/Documentation/components/Header/Header.js +++ b/src/components/Documentation/components/Header/Header.js @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react'; import useStyles from './styles'; -import { withRouter } from 'react-router-dom'; // Material-UI core components import { AppBar, Toolbar, IconButton, Box, Button } from '@mui/material'; @@ -139,4 +138,4 @@ const Header = (props) => { ); }; -export default withRouter(Header); +export default Header; diff --git a/src/components/Documentation/pages/buttons/Buttons.js b/src/components/Documentation/pages/buttons/Buttons.js index d1f64bc6..e49bee0d 100644 --- a/src/components/Documentation/pages/buttons/Buttons.js +++ b/src/components/Documentation/pages/buttons/Buttons.js @@ -1,6 +1,5 @@ import React from 'react'; import { Box, Grid } from '@mui/material'; -import { withRouter } from 'react-router-dom'; //components import Widget from '../../../Widget'; @@ -118,4 +117,4 @@ const Pages = (props) => { ); }; -export default withRouter(Pages); +export default Pages; diff --git a/src/components/Documentation/pages/pages/Pages.js b/src/components/Documentation/pages/pages/Pages.js index e872fa2d..a434a9da 100644 --- a/src/components/Documentation/pages/pages/Pages.js +++ b/src/components/Documentation/pages/pages/Pages.js @@ -1,6 +1,5 @@ import React from "react"; import { Grid } from "@material-ui/core"; -import { withRouter } from "react-router-dom"; //components import Widget from "../../../Widget"; @@ -36,7 +35,7 @@ const Pages = props => { isAuthenticated ? ( React.createElement(component, props) ) : ( - { {...rest} render={props => isAuthenticated ? ( - { ); }; -export default withRouter(Pages); +export default Pages; diff --git a/src/components/Documentation/pages/sidebar/Sidebar.js b/src/components/Documentation/pages/sidebar/Sidebar.js index 090ab25d..443623f1 100644 --- a/src/components/Documentation/pages/sidebar/Sidebar.js +++ b/src/components/Documentation/pages/sidebar/Sidebar.js @@ -1,6 +1,5 @@ import React from 'react'; import { Grid } from '@mui/material'; -import { withRouter } from 'react-router-dom'; //components import Widget from '../../../Widget'; @@ -39,4 +38,4 @@ const Pages = (props) => { ); }; -export default withRouter(Pages); +export default Pages; diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index f573b201..d451e8fa 100644 --- a/src/components/Layout/Layout.js +++ b/src/components/Layout/Layout.js @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { Route, Switch, withRouter } from 'react-router-dom'; +import { Route, Routes } from 'react-router-dom'; import classnames from 'classnames'; import SettingsIcon from '@mui/icons-material/Settings'; @@ -108,7 +108,7 @@ function Layout(props) { >
- + @@ -177,8 +177,6 @@ function Layout(props) { - /> - - + { - const history = useHistory(); + const navigate = useNavigate(); const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); @@ -36,7 +36,7 @@ const Actions = ({ classes, id, openModal, entity }) => { { - history.push(`/admin/${entity}/${id}/edit`); + navigate(`/admin/${entity}/${id}/edit`); handleClose(); }} > diff --git a/src/context/ManagementContext.js b/src/context/ManagementContext.js index 13496fdf..a30186c3 100644 --- a/src/context/ManagementContext.js +++ b/src/context/ManagementContext.js @@ -240,7 +240,7 @@ const actions = { } }, - doCreate: (values, history) => async (dispatch) => { + doCreate: (values, navigate) => async (dispatch) => { try { dispatch({ type: 'USERS_FORM_CREATE_STARTED', @@ -249,7 +249,7 @@ const actions = { dispatch({ type: 'USERS_FORM_CREATE_SUCCESS', }); - history.push('/app/user/list'); + navigate('/app/user/list'); }); } catch (error) { showSnackbar({ type: 'error', message: 'Error' }); @@ -260,7 +260,7 @@ const actions = { } }, - doUpdate: (id, values, history) => async (dispatch, getState) => { + doUpdate: (id, values, navigate) => async (dispatch, getState) => { try { dispatch({ type: 'USERS_FORM_UPDATE_STARTED', @@ -273,7 +273,7 @@ const actions = { payload: values, }); - history.push('/admin/dashboard'); + navigate('/admin/dashboard'); } catch (error) { console.log(error); diff --git a/src/context/ProductContext.js b/src/context/ProductContext.js index 4de57a0d..383193e4 100644 --- a/src/context/ProductContext.js +++ b/src/context/ProductContext.js @@ -73,7 +73,7 @@ export function getProductsRequest(dispatch) { } } -export function deleteProductRequest({ id, history, dispatch }) { +export function deleteProductRequest({ id, navigate, location, dispatch }) { // We check if app runs with backend mode if (!config.isBackend) return; @@ -84,8 +84,8 @@ export function deleteProductRequest({ id, history, dispatch }) { } else { axios.delete('/products/' + id).then((res) => { getProductsRequest(dispatch); - if (history.location.pathname !== '/app/ecommerce/management') { - history.push('/app/ecommerce/management'); + if (location.pathname !== '/app/ecommerce/management') { + navigate('/app/ecommerce/management'); } return; }); diff --git a/src/context/UserContext.js b/src/context/UserContext.js index 25406bdb..24f0d093 100644 --- a/src/context/UserContext.js +++ b/src/context/UserContext.js @@ -295,10 +295,10 @@ export function registerUser( }; } -export function verifyEmail(token, history) { +export function verifyEmail(token, navigate) { return (dispatch) => { if (!config.isBackend) { - history.push('/login'); + navigate('/login'); } else { axios .put('/auth/verify-email', { token }) @@ -314,16 +314,16 @@ export function verifyEmail(token, history) { showSnackbar({ type: 'error', message: err.response }); }) .finally(() => { - history.push('/login'); + navigate('/login'); }); } }; } -export function resetPassword(token, password, history) { +export function resetPassword(token, password, navigate) { return (dispatch) => { if (!config.isBackend) { - history.push('/login'); + navigate('/login'); } else { dispatch({ type: 'RESET_REQUEST', @@ -338,7 +338,7 @@ export function resetPassword(token, password, history) { type: 'success', message: 'Password has been updated', }); - history.push('/login'); + navigate('/login'); }) .catch((err) => { dispatch(authError(err.response.data)); diff --git a/src/pages/CRUD/Users/table/UsersTable.js b/src/pages/CRUD/Users/table/UsersTable.js index 27617925..65cc5468 100644 --- a/src/pages/CRUD/Users/table/UsersTable.js +++ b/src/pages/CRUD/Users/table/UsersTable.js @@ -4,7 +4,7 @@ import actions from 'actions/users/usersListActions'; import React from 'react'; import { Link } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router'; +import { useNavigate } from 'react-router'; import { uniqueId } from 'lodash'; import { makeStyles } from '@mui/styles'; @@ -45,7 +45,7 @@ const useStyles = makeStyles({ const UsersTable = () => { const dispatch = useDispatch(); - const history = useHistory(); + const navigate = useNavigate(); const classes = useStyles(); // eslint-disable-next-line no-unused-vars const [width, setWidth] = React.useState(window.innerWidth); @@ -399,7 +399,7 @@ const UsersTable = () => { disableColumnMenu loading={loading} onRowClick={(e) => { - history.push(`/app/users/${e.id}/edit`); + navigate(`/app/users/${e.id}/edit`); }} autoHeight /> diff --git a/src/pages/ecommerce/CreateProduct.js b/src/pages/ecommerce/CreateProduct.js index 8882d2df..c9ae1b44 100644 --- a/src/pages/ecommerce/CreateProduct.js +++ b/src/pages/ecommerce/CreateProduct.js @@ -7,7 +7,7 @@ import { Select, TextField as Input } from "@mui/material"; -import { useParams, useHistory } from "react-router-dom"; +import { useParams, useNavigate } from "react-router-dom"; //context import { @@ -84,7 +84,7 @@ const CreateProduct = () => { setLocalProducts(context.products.products[getId(id)]); }, [context]); // eslint-disable-line - const history = useHistory(); + const navigate = useNavigate(); const editProduct = e => { setLocalProducts({ @@ -102,13 +102,13 @@ const CreateProduct = () => { const getEditProduct = () => { updateProduct(localProducts, context.setProducts); - history.push("/app/ecommerce/management"); + navigate("/app/ecommerce/management"); // sendNotification(); }; const createNewProduct = () => { createProduct(newProduct, context.setProducts); - history.push("/app/ecommerce/management"); + navigate("/app/ecommerce/management"); }; const changeImgSrc = e => { @@ -392,7 +392,7 @@ const CreateProduct = () => { diff --git a/src/pages/ecommerce/Ecommerce.js b/src/pages/ecommerce/Ecommerce.js index 175c5410..6e1e258a 100644 --- a/src/pages/ecommerce/Ecommerce.js +++ b/src/pages/ecommerce/Ecommerce.js @@ -17,7 +17,7 @@ import { InputAdornment, TextField as Input } from "@mui/material"; -import { Link as RouterLink, withRouter, useHistory } from "react-router-dom"; +import { Link as RouterLink, useNavigate, useLocation } from "react-router-dom"; //config import config from "../../config"; @@ -173,7 +173,7 @@ const useToolbarStyles = makeStyles(theme => ({ })); const EnhancedTableToolbar = ({ numSelected, selected, deleteProducts }) => { - const history = useHistory(); + const navigate = useNavigate(); const classes = useToolbarStyles(); return ( @@ -200,7 +200,7 @@ const EnhancedTableToolbar = ({ numSelected, selected, deleteProducts }) => { {numSelected > 0 ? ( - deleteProducts(selected, history, e)} /> + deleteProducts(selected, navigate, e)} /> ) : ( @@ -218,7 +218,8 @@ EnhancedTableToolbar.propTypes = { numSelected: PropTypes.number.isRequired }; -function EcommercePage({ history }) { +function EcommercePage({ navigate }) { + const location = useLocation(); const classes = useStyles(); const context = useProductsState(); const [order, setOrder] = React.useState("asc"); @@ -257,7 +258,7 @@ function EcommercePage({ history }) { }; const openProduct = (id, event) => { - history.push("/app/ecommerce/product/" + id); + navigate("/app/ecommerce/product/" + id); event.stopPropagation(); }; @@ -329,13 +330,13 @@ function EcommercePage({ history }) { // ); // } - const deleteProduct = (id, history, event) => { - deleteProductRequest({ id, history, dispatch: context.setProducts }); + const deleteProduct = (id, navigate, event) => { + deleteProductRequest({ id, navigate, location, dispatch: context.setProducts }); event.stopPropagation(); }; const openProductEdit = (event, id) => { - history.push("/app/ecommerce/management/edit/" + id); + navigate("/app/ecommerce/management/edit/" + id); event.stopPropagation(); }; @@ -566,7 +567,7 @@ function EcommercePage({ history }) { size="small" variant="contained" onClick={e => - deleteProduct(row.id, history, e) + deleteProduct(row.id, navigate, e) } > Delete @@ -613,4 +614,4 @@ function CloseButton({ closeToast, className }) { return ; } -export default withRouter(EcommercePage); +export default EcommercePage; diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js index 4a9bedbe..f471c3df 100644 --- a/src/pages/login/Login.js +++ b/src/pages/login/Login.js @@ -8,7 +8,6 @@ import { TextField as Input, Typography, } from '@mui/material'; -import { withRouter } from 'react-router-dom'; import classnames from 'classnames'; // styles @@ -431,4 +430,4 @@ function Login(props) { ); } -export default withRouter(Login); +export default Login; diff --git a/src/pages/reset/Reset.js b/src/pages/reset/Reset.js index c55ad406..ed04b70f 100644 --- a/src/pages/reset/Reset.js +++ b/src/pages/reset/Reset.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { Grid, CircularProgress, TextField as Input } from '@mui/material'; -import { withRouter, useHistory } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; // styles import useStyles from './styles'; @@ -20,7 +20,8 @@ import { Button, Typography } from '../../components/Wrappers'; function Reset(props) { let classes = useStyles(); - const history = useHistory(); + const navigate = useNavigate(); + const location = useLocation(); // global let userDispatch = useUserDispatch(); const [passwordValue, setPasswordValue] = useState(''); @@ -42,7 +43,7 @@ function Reset(props) { }; const doReset = () => { - const params = new URLSearchParams(history.location.search); + const params = new URLSearchParams(location.search); const token = params.get('token'); if (!token) { authError('There are no token')(userDispatch); @@ -51,7 +52,7 @@ function Reset(props) { if (!isPasswordValid()) { checkPassword(); } else { - resetPassword(token, passwordValue, history)(userDispatch); + resetPassword(token, passwordValue, navigate)(userDispatch); } }; @@ -116,7 +117,7 @@ function Reset(props) {