chore: redirect the user to application is user is navigated to non logged in page (#1042)

frontend/src/AppRoutes/Private.tsx

@@ -73,48 +73,52 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 					if (isPrivate) {
 						const localStorageUserAuthToken = getInitialUserTokenRefreshToken();
 
-						if (!isLoggedInState) {
+						if (
-							if (localStorageUserAuthToken && localStorageUserAuthToken.refreshJwt) {
+							localStorageUserAuthToken &&
-								// localstorage token is present
+							localStorageUserAuthToken.refreshJwt &&
-								const { refreshJwt } = localStorageUserAuthToken;
+							isUserFetching
+						) {
+							// localstorage token is present
+							const { refreshJwt } = localStorageUserAuthToken;
 
-								// renew web access token
+							// renew web access token
-								const response = await loginApi({
+							const response = await loginApi({
-									refreshToken: refreshJwt,
+								refreshToken: refreshJwt,
-								});
+							});
 
-								if (response.statusCode === 200) {
+							if (response.statusCode === 200) {
-									const route = routePermission[key];
+								const route = routePermission[key];
 
-									// get all resource and put it over redux
+								// get all resource and put it over redux
-									const userResponse = await afterLogin(
+								const userResponse = await afterLogin(
-										response.payload.userId,
+									response.payload.userId,
-										response.payload.accessJwt,
+									response.payload.accessJwt,
-										response.payload.refreshJwt,
+									response.payload.refreshJwt,
-									);
+								);
 
-									if (
+								if (
-										userResponse &&
+									userResponse &&
-										route.find((e) => e === userResponse.payload.role) === undefined
+									route.find((e) => e === userResponse.payload.role) === undefined
-									) {
+								) {
-										history.push(ROUTES.UN_AUTHORIZED);
+									history.push(ROUTES.UN_AUTHORIZED);
-									}
-								} else {
-									history.push(ROUTES.SOMETHING_WENT_WRONG);
-
-									notification.error({
-										message: response.error || t('something_went_wrong'),
-									});
 								}
 							} else {
-								// user does have localstorage values
+								history.push(ROUTES.SOMETHING_WENT_WRONG);
-								navigateToLoginIfNotLoggedIn(isLocalStorageLoggedIn);
+
+								notification.error({
+									message: response.error || t('something_went_wrong'),
+								});
 							}
 						} else {
-							navigateToLoginIfNotLoggedIn();
+							// user does have localstorage values
+							navigateToLoginIfNotLoggedIn(isLocalStorageLoggedIn);
 						}
 					} else {
 						// no need to fetch the user and make user fetching false
+
+						if (getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true') {
+							history.push(ROUTES.APPLICATION);
+						}
 						dispatch({
 							type: UPDATE_USER_IS_FETCH,
 							payload: {

frontend/src/hooks/useIfNotLoggedInNavigate.ts

@@ -1,27 +0,0 @@
-import { notification } from 'antd';
-import history from 'lib/history';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
-import { AppState } from 'store/reducers';
-import AppReducer from 'types/reducer/app';
-
-const useLoggedInNavigate = (navigateTo: string): void => {
-	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
-	const { pathname } = useLocation();
-	const { t } = useTranslation();
-
-	useEffect(() => {
-		if (isLoggedIn && navigateTo !== pathname) {
-			notification.success({
-				message: t('logged_in', {
-					ns: 'common',
-				}),
-			});
-			history.push(navigateTo);
-		}
-	}, [isLoggedIn, navigateTo, pathname, t]);
-};
-
-export default useLoggedInNavigate;

frontend/src/pages/Login/index.tsx

@@ -2,9 +2,7 @@ import { Typography } from 'antd';
 import getUserVersion from 'api/user/getVersion';
 import Spinner from 'components/Spinner';
 import WelcomeLeftContainer from 'components/WelcomeLeftContainer';
-import ROUTES from 'constants/routes';
 import LoginContainer from 'container/Login';
-import useLoggedInNavigate from 'hooks/useIfNotLoggedInNavigate';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
@@ -16,8 +14,6 @@ function Login(): JSX.Element {
 	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
 	const { t } = useTranslation();
 
-	useLoggedInNavigate(ROUTES.APPLICATION);
-
 	const versionResult = useQuery({
 		queryFn: getUserVersion,
 		queryKey: 'getUserVersion',

frontend/src/pages/ResetPassword/index.tsx

@@ -1,9 +1,7 @@
 import { Typography } from 'antd';
 import getUserVersion from 'api/user/getVersion';
 import Spinner from 'components/Spinner';
-import ROUTES from 'constants/routes';
 import ResetPasswordContainer from 'container/ResetPassword';
-import useLoggedInNavigate from 'hooks/useIfNotLoggedInNavigate';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
@@ -15,8 +13,6 @@ function ResetPassword(): JSX.Element {
 	const { t } = useTranslation('common');
 	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
 
-	useLoggedInNavigate(ROUTES.APPLICATION);
-
 	const [versionResponse] = useQueries([
 		{
 			queryFn: getUserVersion,

frontend/src/pages/SignUp/index.tsx

@@ -2,7 +2,6 @@ import { Typography } from 'antd';
 import getUserVersion from 'api/user/getVersion';
 import Spinner from 'components/Spinner';
 import ROUTES from 'constants/routes';
-import useLoggedInNavigate from 'hooks/useIfNotLoggedInNavigate';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';

frontend/src/store/reducers/app.ts

@@ -1,5 +1,6 @@
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import getTheme from 'lib/theme/getTheme';
 import { getInitialUserTokenRefreshToken } from 'store/utils';
 import {
@@ -41,7 +42,7 @@ const getInitialUser = (): User | null => {
 
 const InitialValue: InitialValueTypes = {
 	isDarkMode: getTheme() === 'darkMode',
-	isLoggedIn: false,
+	isLoggedIn: getLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN) === 'true',
 	isSideBarCollapsed: getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true',
 	currentVersion: '',
 	latestVersion: '',