From fd0656e0fc8eed0bbffc3b249f85e83786825c67 Mon Sep 17 00:00:00 2001 From: palash-signoz Date: Tue, 3 May 2022 21:27:17 +0530 Subject: [PATCH] chore: redirect the user to application is user is navigated to non logged in page (#1042) --- frontend/src/AppRoutes/Private.tsx | 66 ++++++++++--------- .../src/hooks/useIfNotLoggedInNavigate.ts | 27 -------- frontend/src/pages/Login/index.tsx | 4 -- frontend/src/pages/ResetPassword/index.tsx | 4 -- frontend/src/pages/SignUp/index.tsx | 1 - frontend/src/store/reducers/app.ts | 3 +- 6 files changed, 37 insertions(+), 68 deletions(-) delete mode 100644 frontend/src/hooks/useIfNotLoggedInNavigate.ts diff --git a/frontend/src/AppRoutes/Private.tsx b/frontend/src/AppRoutes/Private.tsx index 2426628430..3e97adec58 100644 --- a/frontend/src/AppRoutes/Private.tsx +++ b/frontend/src/AppRoutes/Private.tsx @@ -73,48 +73,52 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element { if (isPrivate) { const localStorageUserAuthToken = getInitialUserTokenRefreshToken(); - if (!isLoggedInState) { - if (localStorageUserAuthToken && localStorageUserAuthToken.refreshJwt) { - // localstorage token is present - const { refreshJwt } = localStorageUserAuthToken; + if ( + localStorageUserAuthToken && + localStorageUserAuthToken.refreshJwt && + isUserFetching + ) { + // localstorage token is present + const { refreshJwt } = localStorageUserAuthToken; - // renew web access token - const response = await loginApi({ - refreshToken: refreshJwt, - }); + // renew web access token + const response = await loginApi({ + refreshToken: refreshJwt, + }); - if (response.statusCode === 200) { - const route = routePermission[key]; + if (response.statusCode === 200) { + const route = routePermission[key]; - // get all resource and put it over redux - const userResponse = await afterLogin( - response.payload.userId, - response.payload.accessJwt, - response.payload.refreshJwt, - ); + // get all resource and put it over redux + const userResponse = await afterLogin( + response.payload.userId, + response.payload.accessJwt, + response.payload.refreshJwt, + ); - if ( - userResponse && - route.find((e) => e === userResponse.payload.role) === undefined - ) { - history.push(ROUTES.UN_AUTHORIZED); - } - } else { - history.push(ROUTES.SOMETHING_WENT_WRONG); - - notification.error({ - message: response.error || t('something_went_wrong'), - }); + if ( + userResponse && + route.find((e) => e === userResponse.payload.role) === undefined + ) { + history.push(ROUTES.UN_AUTHORIZED); } } else { - // user does have localstorage values - navigateToLoginIfNotLoggedIn(isLocalStorageLoggedIn); + history.push(ROUTES.SOMETHING_WENT_WRONG); + + 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: { diff --git a/frontend/src/hooks/useIfNotLoggedInNavigate.ts b/frontend/src/hooks/useIfNotLoggedInNavigate.ts deleted file mode 100644 index 3da7fcf3da..0000000000 --- a/frontend/src/hooks/useIfNotLoggedInNavigate.ts +++ /dev/null @@ -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((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; diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx index 95d869adce..5a1adc4b99 100644 --- a/frontend/src/pages/Login/index.tsx +++ b/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((state) => state.app); const { t } = useTranslation(); - useLoggedInNavigate(ROUTES.APPLICATION); - const versionResult = useQuery({ queryFn: getUserVersion, queryKey: 'getUserVersion', diff --git a/frontend/src/pages/ResetPassword/index.tsx b/frontend/src/pages/ResetPassword/index.tsx index a3e14b5375..f45e7d15f3 100644 --- a/frontend/src/pages/ResetPassword/index.tsx +++ b/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((state) => state.app); - useLoggedInNavigate(ROUTES.APPLICATION); - const [versionResponse] = useQueries([ { queryFn: getUserVersion, diff --git a/frontend/src/pages/SignUp/index.tsx b/frontend/src/pages/SignUp/index.tsx index de821bfaf5..beb57ad08c 100644 --- a/frontend/src/pages/SignUp/index.tsx +++ b/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'; diff --git a/frontend/src/store/reducers/app.ts b/frontend/src/store/reducers/app.ts index d5877427ef..8c35b748b0 100644 --- a/frontend/src/store/reducers/app.ts +++ b/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: '',