Auth Wrapper is updated (#1028)

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<
+	const {
-		AppState,
+		isUserFetching,
-		AppReducer
+		isUserFetchingError,
-	>((state) => state.app);
+		isLoggedIn: isLoggedInState,
+	} = useSelector<AppState, AppReducer>((state) => state.app);
 
 	const { t } = useTranslation(['common']);
 
-	const currentRoute = mapRoutes.get('current');
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
-	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<void> => {
 			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({
+							navigateToLoginIfNotLoggedIn();
-								type: UPDATE_USER_IS_FETCH,
-								payload: {
-									isUserFetching: false,
-								},
-							});
-
-							history.push(ROUTES.LOGIN);
 						}
 					} 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({
+						navigateToLoginIfNotLoggedIn();
-							type: UPDATE_USER_IS_FETCH,
-							payload: {
-								isUserFetching: false,
-							},
-						});
-
-						history.push(ROUTES.LOGIN);
 					}
 				} else {
-					dispatch({
+					// not found
-						type: UPDATE_USER_IS_FETCH,
+					navigateToLoginIfNotLoggedIn(
-						payload: {
+						getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true',
-							isUserFetching: false,
+					);
-						},
-					});
-					if (!isLoggedIn) {
-						history.push(ROUTES.LOGIN);
-					}
 				}
 			} catch (error) {
 				// something went wrong
 				history.push(ROUTES.SOMETHING_WENT_WRONG);
 			}
 		})();
-		// need to run over mount only
+	}, [dispatch, isLoggedInState, currentRoute]);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dispatch, currentRoute, isLoggedIn]);
 
 	if (isUserFetchingError) {
 		return <Redirect to={ROUTES.SOMETHING_WENT_WRONG} />;

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<Dispatch<AppActions>>();
-	const isLoggedIn = getLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN);
-
 	return (
 		<Container>
 			<SomethingWentWrongAsset />
@@ -22,15 +13,6 @@ function SomethingWentWrong(): JSX.Element {
 			<Button
 				type="primary"
 				onClick={(): void => {
-					if (isLoggedIn) {
-						dispatch({
-							type: LOGGED_IN,
-							payload: {
-								isLoggedIn: true,
-							},
-						});
-					}
-
 					history.push(ROUTES.APPLICATION);
 				}}
 			>