feat: signup logic is now fixed (#349)

frontend/src/container/AppLayout/index.tsx

@@ -1,45 +1,41 @@
 import { Layout } from 'antd';
-import get from 'api/browser/localstorage/get';
 import ROUTES from 'constants/routes';
 import TopNav from 'container/Header';
 import SideNav from 'container/SideNav';
 import history from 'lib/history';
-import React, { ReactNode, useEffect } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
 
 const { Content, Footer } = Layout;
-interface BaseLayoutProps {
-	children: ReactNode;
-}
 
-const BaseLayout: React.FC<BaseLayoutProps> = ({ children }) => {
+const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
-	const isLoggedInLocalStorage = get('isLoggedIn');
+
+	const [isSignUpPage, setIsSignUpPage] = useState(
+		ROUTES.SIGN_UP === location.pathname,
+	);
 
 	useEffect(() => {
-		if (isLoggedIn && history.location.pathname === '/') {
+		if (!isLoggedIn) {
-			history.push(ROUTES.APPLICATION);
+			setIsSignUpPage(true);
-		}
+			history.push(ROUTES.SIGN_UP);
-
-		if (!isLoggedIn && isLoggedInLocalStorage !== null) {
-			history.push(ROUTES.APPLICATION);
 		} else {
-			if (isLoggedInLocalStorage === null) {
+			if (isSignUpPage) {
-				history.push(ROUTES.SIGN_UP);
+				setIsSignUpPage(false);
 			}
 		}
-	}, [isLoggedIn, isLoggedInLocalStorage]);
+	}, [isLoggedIn, isSignUpPage]);
 
 	const currentYear = new Date().getFullYear();
 
 	return (
 		<Layout style={{ minHeight: '100vh' }}>
-			<SideNav />
+			{!isSignUpPage && <SideNav />}
 			<Layout className="site-layout">
 				<Content style={{ margin: '0 16px' }}>
-					<TopNav />
+					{!isSignUpPage && <TopNav />}
 					{children}
 				</Content>
 				<Footer style={{ textAlign: 'center', fontSize: 10 }}>
@@ -50,4 +46,8 @@ const BaseLayout: React.FC<BaseLayoutProps> = ({ children }) => {
 	);
 };
 
-export default BaseLayout;
+interface AppLayoutProps {
+	children: ReactNode;
+}
+
+export default AppLayout;

frontend/src/pages/SignUp/index.tsx

@@ -1,18 +1,17 @@
 import { Button, Input, Typography } from 'antd';
 import signup from 'api/user/signup';
-import { IS_LOGGED_IN } from 'constants/auth';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
-import { GlobalTimeLoading } from 'store/actions';
+import { GlobalTimeLoading, UserLoggedIn } from 'store/actions';
 import AppActions from 'types/actions';
 
 import { ButtonContainer, Container, FormWrapper, Title } from './styles';
 
-const Signup = ({ globalLoading }: SignupProps): JSX.Element => {
+const Signup = ({ globalLoading, loggedIn }: SignupProps): JSX.Element => {
 	const [state, setState] = useState({ submitted: false });
 	const [formState, setFormState] = useState({
 		firstName: { value: '' },
@@ -53,9 +52,9 @@ const Signup = ({ globalLoading }: SignupProps): JSX.Element => {
 				});
 
 				if (response.statusCode === 200) {
-					localStorage.setItem(IS_LOGGED_IN, 'yes');
+					loggedIn();
-					history.push(ROUTES.APPLICATION);
 					globalLoading();
+					history.push(ROUTES.APPLICATION);
 				} else {
 					// @TODO throw a error notification here
 				}
@@ -121,12 +120,14 @@ const Signup = ({ globalLoading }: SignupProps): JSX.Element => {
 
 interface DispatchProps {
 	globalLoading: () => void;
+	loggedIn: () => void;
 }
 
 const mapDispatchToProps = (
 	dispatch: ThunkDispatch<unknown, unknown, AppActions>,
 ): DispatchProps => ({
 	globalLoading: bindActionCreators(GlobalTimeLoading, dispatch),
+	loggedIn: bindActionCreators(UserLoggedIn, dispatch),
 });
 
 type SignupProps = DispatchProps;

frontend/src/store/actions/app/index.ts

@@ -1 +1,2 @@
 export * from './toggleDarkMode';
+export * from './userLoggedIn';

frontend/src/store/actions/app/userLoggedIn.ts

@@ -0,0 +1,13 @@
+import { IS_LOGGED_IN } from 'constants/auth';
+import { Dispatch } from 'redux';
+import AppActions from 'types/actions';
+
+export const UserLoggedIn = (): ((dispatch: Dispatch<AppActions>) => void) => {
+	return (dispatch: Dispatch<AppActions>): void => {
+		localStorage.setItem(IS_LOGGED_IN, 'yes');
+
+		dispatch({
+			type: 'LOGGED_IN',
+		});
+	};
+};

frontend/src/store/reducers/app.ts

@@ -1,5 +1,5 @@
 import { IS_LOGGED_IN } from 'constants/auth';
-import { AppAction, SWITCH_DARK_MODE } from 'types/actions/app';
+import { AppAction, LOGGED_IN, SWITCH_DARK_MODE } from 'types/actions/app';
 import InitialValueTypes from 'types/reducer/app';
 
 const InitialValue: InitialValueTypes = {
@@ -19,6 +19,13 @@ const appReducer = (
 			};
 		}
 
+		case LOGGED_IN: {
+			return {
+				...state,
+				isLoggedIn: true,
+			};
+		}
+
 		default:
 			return state;
 	}

frontend/src/types/actions/app.ts

@@ -1,7 +1,12 @@
 export const SWITCH_DARK_MODE = 'SWITCH_DARK_MODE';
+export const LOGGED_IN = 'LOGGED_IN';
 
 export interface SwitchDarkMode {
 	type: typeof SWITCH_DARK_MODE;
 }
 
-export type AppAction = SwitchDarkMode;
+export interface LoggedInUser {
+	type: typeof LOGGED_IN;
+}
+
+export type AppAction = SwitchDarkMode | LoggedInUser;