diff --git a/frontend/src/AppRoutes/Private.tsx b/frontend/src/AppRoutes/Private.tsx index 399c96290d..e6b23b8467 100644 --- a/frontend/src/AppRoutes/Private.tsx +++ b/frontend/src/AppRoutes/Private.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { notification } from 'antd'; import getLocalStorageApi from 'api/browser/localstorage/get'; import loginApi from 'api/user/login'; @@ -8,7 +9,7 @@ import history from 'lib/history'; import React, { useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; -import { matchPath, Redirect } from 'react-router-dom'; +import { matchPath, Redirect, useLocation } from 'react-router-dom'; import { Dispatch } from 'redux'; import { AppState } from 'store/reducers'; import { getInitialUserTokenRefreshToken } from 'store/utils'; @@ -21,43 +22,56 @@ import routes from './routes'; import afterLogin from './utils'; function PrivateRoute({ children }: PrivateRouteProps): JSX.Element { + const { pathname } = useLocation(); + const mapRoutes = useMemo( () => new Map( routes.map((e) => { - const currentPath = matchPath(history.location.pathname, { + const currentPath = matchPath(pathname, { path: e.path, }); return [currentPath === null ? null : 'current', e]; }), ), - [], + [pathname], ); - const { isUserFetching, isUserFetchingError } = useSelector< - AppState, - AppReducer - >((state) => state.app); + const { + isUserFetching, + isUserFetchingError, + isLoggedIn: isLoggedInState, + } = useSelector((state) => state.app); const { t } = useTranslation(['common']); - const currentRoute = mapRoutes.get('current'); const dispatch = useDispatch>(); - const isLoggedIn = getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN); + const currentRoute = mapRoutes.get('current'); + + const navigateToLoginIfNotLoggedIn = (isLoggedIn = isLoggedInState): void => { + dispatch({ + type: UPDATE_USER_IS_FETCH, + payload: { + isUserFetching: false, + }, + }); + + if (!isLoggedIn) { + history.push(ROUTES.LOGIN); + } + }; // eslint-disable-next-line sonarjs/cognitive-complexity useEffect(() => { (async (): Promise => { try { - console.log('asdasd'); - if (currentRoute) { const { isPrivate, key } = currentRoute; if (isPrivate) { const localStorageUserAuthToken = getInitialUserTokenRefreshToken(); - if (isLoggedIn) { + if (!isLoggedInState) { if (localStorageUserAuthToken && localStorageUserAuthToken.refreshJwt) { // localstorage token is present const { refreshJwt } = localStorageUserAuthToken; @@ -89,7 +103,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element { }); } } else { - // user is not logged in + // user does have localstorage values dispatch({ type: UPDATE_USER_IS_FETCH, payload: { @@ -99,14 +113,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element { history.push(ROUTES.LOGIN); } } else { - dispatch({ - type: UPDATE_USER_IS_FETCH, - payload: { - isUserFetching: false, - }, - }); - - history.push(ROUTES.LOGIN); + navigateToLoginIfNotLoggedIn(); } } else { // no need to fetch the user and make user fetching false @@ -117,39 +124,25 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element { }, }); } - } else if (history.location.pathname === ROUTES.HOME_PAGE) { + } else if (pathname === ROUTES.HOME_PAGE) { // routing to application page over root page - if (isLoggedIn) { + if (isLoggedInState) { history.push(ROUTES.APPLICATION); } else { - dispatch({ - type: UPDATE_USER_IS_FETCH, - payload: { - isUserFetching: false, - }, - }); - - history.push(ROUTES.LOGIN); + navigateToLoginIfNotLoggedIn(); } } else { - dispatch({ - type: UPDATE_USER_IS_FETCH, - payload: { - isUserFetching: false, - }, - }); - if (!isLoggedIn) { - history.push(ROUTES.LOGIN); - } + // not found + navigateToLoginIfNotLoggedIn( + getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true', + ); } } catch (error) { // something went wrong history.push(ROUTES.SOMETHING_WENT_WRONG); } })(); - // need to run over mount only - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [dispatch, currentRoute, isLoggedIn]); + }, [dispatch, isLoggedInState, currentRoute]); if (isUserFetchingError) { return ; diff --git a/frontend/src/pages/SomethingWentWrong/index.tsx b/frontend/src/pages/SomethingWentWrong/index.tsx index 8897cda49d..14619a841e 100644 --- a/frontend/src/pages/SomethingWentWrong/index.tsx +++ b/frontend/src/pages/SomethingWentWrong/index.tsx @@ -1,20 +1,11 @@ import { Button, Typography } from 'antd'; -import getLocalStorageKey from 'api/browser/localstorage/get'; import SomethingWentWrongAsset from 'assets/SomethingWentWrong'; import { Container } from 'components/NotFound/styles'; -import { LOCALSTORAGE } from 'constants/localStorage'; import ROUTES from 'constants/routes'; import history from 'lib/history'; import React from 'react'; -import { useDispatch } from 'react-redux'; -import { Dispatch } from 'redux'; -import AppActions from 'types/actions'; -import { LOGGED_IN } from 'types/actions/app'; function SomethingWentWrong(): JSX.Element { - const dispatch = useDispatch>(); - const isLoggedIn = getLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN); - return ( @@ -22,15 +13,6 @@ function SomethingWentWrong(): JSX.Element {