Auth Wrapper is updated (#1028)

This commit is contained in:
palash-signoz 2022-05-03 16:01:41 +05:30 committed by GitHub
parent d52308c9b5
commit c81b0b2a8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 61 deletions

View File

@ -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<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({
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 <Redirect to={ROUTES.SOMETHING_WENT_WRONG} />;

View File

@ -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);
}}
>