React updated to v18

package.json

@@ -20,17 +20,17 @@
     "formik": "^2.2.9",
     "i18next": "^20.3.1",
     "json-server": "^0.17.0",
-    "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.21",
     "lodash.isempty": "^4.4.0",
     "owasp-password-strength-test": "^1.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet-async": "^1.0.9",
     "react-i18next": "^11.10.0",
+    "react-jwt": "^1.1.7",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "react-select": "^4.3.1",
     "redux": "^4.1.0",
     "redux-saga": "^1.1.3",

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { HelmetProvider } from 'react-helmet-async';
 
@@ -10,7 +10,10 @@ import store from './store';
 import './i18n';
 import ColorModeProvider from './context/ColorModeContext';
 
-ReactDOM.render(
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement);
+
+root.render(
   <HelmetProvider>
     <React.StrictMode>
       <Provider store={store}>
@@ -19,6 +22,5 @@ ReactDOM.render(
         </ColorModeProvider>
       </Provider>
     </React.StrictMode>
-  </HelmetProvider>,
-  document.getElementById('root'),
+  </HelmetProvider>
 );

src/pages/ErrorPages/NotFoundPage.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import Button from '../../components/Button/Button';
 import Section from '../../components/Section/Section';
+import { HOME_PAGE } from '../../constants/pages';
 
-const NotFoundPage = () => {
+const NotFoundPage = ({history}) => {
   const { t } = useTranslation();
 
   return (
@@ -13,6 +15,12 @@ const NotFoundPage = () => {
           <h1 className="c-error-page__title">404</h1>
           <p className="c-error-page__text">{t('notFound.text')}</p>
           <Button
+          onClick={() => history.push({
+            pathname: HOME_PAGE,
+            state: {
+              from: history.location.pathname,
+            },
+          })}
             className="c-error-page__button"
             variant="primary-outlined"
           >
@@ -24,6 +32,14 @@ const NotFoundPage = () => {
   );
 };
 
-NotFoundPage.propTypes = {};
+NotFoundPage.propTypes = {
+	history: PropTypes.shape({
+		replace: PropTypes.func,
+		push: PropTypes.func,
+		location: PropTypes.shape({
+			pathname: PropTypes.string,
+		}),
+	}),
+};
 
 export default NotFoundPage;

src/store/saga/loginSaga.js

@@ -1,5 +1,5 @@
 import { all, call, put, takeLatest } from '@redux-saga/core/effects';
-import jwt from 'jsonwebtoken';
+import { decodeToken } from 'react-jwt';
 import history from '../utils/history';
 import {
   AUTHENTICATE_USER,
@@ -47,7 +47,7 @@ function* fetchUser({ payload }) {
   try {
     const { data } = yield call(attemptLogin, payload);
     if (data.JwtToken) {
-      const user = jwt.decode(data.JwtToken);
+      const user = decodeToken(data.JwtToken);
       yield call(authScopeSetHelper, JWT_TOKEN, data.JwtToken);
       yield call(authScopeSetHelper, JWT_REFRESH_TOKEN, data.JwtRefreshToken);
       yield call(authScopeSetHelper, REFRESH_TOKEN_CONST, data.RefreshToken);
@@ -93,7 +93,7 @@ function* authenticateUser() {
 function* logoutUser() {
   try {
     const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
-    const user = jwt.decode(JwtToken);
+    const user = decodeToken(JwtToken);
     if (user) {
       yield call(logoutUserRequest, user.UserUid);
     }
@@ -123,7 +123,7 @@ export function* refreshToken() {
 
       yield call(authScopeSetHelper, JWT_TOKEN, data.JwtToken);
       yield call(authScopeSetHelper, JWT_REFRESH_TOKEN, data.JwtRefreshToken);
-      const user = jwt.decode(data.JwtToken);
+      const user = decodeToken(data.JwtToken);
       addHeaderToken(data.JwtToken);
       yield put(setUser(user));
       yield put(updateUserToken(data.JwtToken));
@@ -151,7 +151,7 @@ export function* generateToken({ payload }) {
         sessionStorage.setItem(REGISTRATION_USER_UID, payload.accountUid);
       }
 
-      const user = jwt.decode(data.JwtToken);
+      const user = decodeToken(data.JwtToken);
       addHeaderToken(data.JwtToken);
       if (user) {
         yield put(setUser(user));