fix: isLogged is now accounted into the reducer and redirection logic is moved to the AppLayout (#322)

frontend/src/AppRoutes/index.tsx

@@ -1,12 +1,10 @@
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
-import { IS_LOGGED_IN } from 'constants/auth';
-import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import AppLayout from 'modules/AppLayout';
 import { RouteProvider } from 'modules/RouteProvider';
 import React, { Suspense } from 'react';
-import { Redirect, Route, Router, Switch } from 'react-router-dom';
+import { Route, Router, Switch } from 'react-router-dom';
 
 import routes from './routes';
 
@@ -21,19 +19,6 @@ const App = (): JSX.Element => (
 								<Route key={index} exact={exact} path={path} component={component} />
 							);
 						})}
-
-						{/* This logic should be moved to app layout */}
-						<Route
-							path="/"
-							exact
-							render={(): JSX.Element => {
-								return localStorage.getItem(IS_LOGGED_IN) === 'yes' ? (
-									<Redirect to={ROUTES.APPLICATION} />
-								) : (
-									<Redirect to={ROUTES.SIGN_UP} />
-								);
-							}}
-						/>
 						<Route path="*" exact component={NotFound} />
 					</Switch>
 				</Suspense>

frontend/src/modules/AppLayout.tsx

@@ -1,7 +1,12 @@
 import { Layout } from 'antd';
 import SideNav from 'components/SideNav';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
 import React, { ReactNode, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { AppState } from 'store/reducers';
+import AppReducer from 'types/reducer/app';
 
 import TopNav from './Nav/TopNav';
 import { useRoute } from './RouteProvider';
@@ -16,11 +21,20 @@ const BaseLayout: React.FC<BaseLayoutProps> = ({ children }) => {
 	const location = useLocation();
 	const { dispatch } = useRoute();
 	const currentYear = new Date().getFullYear();
+	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
 
 	useEffect(() => {
 		dispatch({ type: 'ROUTE_IS_LOADED', payload: location.pathname });
 	}, [location, dispatch]);
 
+	useEffect(() => {
+		if (isLoggedIn) {
+			history.push(ROUTES.APPLICATION);
+		} else {
+			history.push(ROUTES.SIGN_UP);
+		}
+	}, [isLoggedIn]);
+
 	return (
 		<Layout style={{ minHeight: '100vh' }}>
 			<SideNav />

frontend/src/store/reducers/app.ts

@@ -1,8 +1,10 @@
+import { IS_LOGGED_IN } from 'constants/auth';
 import { AppAction, SWITCH_DARK_MODE } from 'types/actions/app';
 import InitialValueTypes from 'types/reducer/app';
 
 const InitialValue: InitialValueTypes = {
 	isDarkMode: true,
+	isLoggedIn: localStorage.getItem(IS_LOGGED_IN) === 'yes',
 };
 
 const appReducer = (

frontend/src/types/reducer/app.ts

@@ -1,3 +1,4 @@
 export default interface AppReducer {
 	isDarkMode: boolean;
+	isLoggedIn: boolean;
 }