From ddcb42512e95e98806db0523e4d954484a6e48cc Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Mon, 23 May 2022 06:44:15 -0700
Subject: Upgrade router and navigation

---
 modern/src/login/LoginPage.js         | 10 +++++-----
 modern/src/login/RegisterPage.js      |  8 ++++----
 modern/src/login/ResetPasswordPage.js |  8 ++++----
 3 files changed, 13 insertions(+), 13 deletions(-)

(limited to 'modern/src/login')

diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index 5b690cdc..2a911b84 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -6,7 +6,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import CachedIcon from '@material-ui/icons/Cached';
 import { useTheme } from '@material-ui/core/styles';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { sessionActions } from '../store';
 import { useLocalization, useTranslation } from '../common/components/LocalizationProvider';
 import LoginLayout from './LoginLayout';
@@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
 const LoginPage = () => {
   const classes = useStyles();
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
   const theme = useTheme();
   const t = useTranslation();
 
@@ -58,7 +58,7 @@ const LoginPage = () => {
       if (response.ok) {
         const user = await response.json();
         dispatch(sessionActions.updateUser(user));
-        history.push('/');
+        navigate('/');
       } else {
         throw Error(await response.text());
       }
@@ -136,7 +136,7 @@ const LoginPage = () => {
         </Grid>
         <Grid item container spacing={2}>
           <Grid item>
-            <Button onClick={() => history.push('/register')} disabled={!registrationEnabled} color="secondary">
+            <Button onClick={() => navigate('/register')} disabled={!registrationEnabled} color="secondary">
               {t('loginRegister')}
             </Button>
           </Grid>
@@ -152,7 +152,7 @@ const LoginPage = () => {
         {emailEnabled && (
           <Grid item container justifyContent="flex-end">
             <Grid item>
-              <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>
+              <Link onClick={() => navigate('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>
             </Grid>
           </Grid>
         )}
diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index 78728b58..5fa061bb 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import {
   Grid, Button, TextField, Typography, Link, makeStyles, Snackbar,
 } from '@material-ui/core';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginLayout from './LoginLayout';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
 
 const RegisterPage = () => {
   const classes = useStyles();
-  const history = useHistory();
+  const navigate = useNavigate();
   const t = useTranslation();
 
   const [name, setName] = useState('');
@@ -51,7 +51,7 @@ const RegisterPage = () => {
     <LoginLayout>
       <Snackbar
         open={snackbarOpen}
-        onClose={() => history.push('/login')}
+        onClose={() => navigate('/login')}
         autoHideDuration={snackBarDurationShortMs}
         message={t('loginCreated')}
       />
@@ -59,7 +59,7 @@ const RegisterPage = () => {
         <Grid container item>
           <Grid item>
             <Typography className={classes.link} color="primary">
-              <Link onClick={() => history.push('/login')}>
+              <Link onClick={() => navigate('/login')}>
                 <ArrowBackIcon />
               </Link>
             </Typography>
diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js
index 93e154e3..acdf13ab 100644
--- a/modern/src/login/ResetPasswordPage.js
+++ b/modern/src/login/ResetPasswordPage.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import {
   Grid, Button, TextField, Typography, Link, makeStyles, Snackbar,
 } from '@material-ui/core';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginLayout from './LoginLayout';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
 
 const ResetPasswordPage = () => {
   const classes = useStyles();
-  const history = useHistory();
+  const navigate = useNavigate();
   const t = useTranslation();
   const query = useQuery();
 
@@ -62,7 +62,7 @@ const ResetPasswordPage = () => {
     <LoginLayout>
       <Snackbar
         open={snackbarOpen}
-        onClose={() => history.push('/login')}
+        onClose={() => navigate('/login')}
         autoHideDuration={snackBarDurationShortMs}
         message={!token ? t('loginResetSuccess') : t('loginUpdateSuccess')}
       />
@@ -70,7 +70,7 @@ const ResetPasswordPage = () => {
         <Grid container item>
           <Grid item>
             <Typography className={classes.link} color="primary">
-              <Link onClick={() => history.push('/login')}>
+              <Link onClick={() => navigate('/login')}>
                 <ArrowBackIcon />
               </Link>
             </Typography>
-- 
cgit v1.2.3