From 73e3e061e037bb8a52f9ac9dece9ac75f9420e4b Mon Sep 17 00:00:00 2001
From: pal-sig <88981777+pal-sig@users.noreply.github.com>
Date: Fri, 22 Oct 2021 17:05:10 +0530
Subject: [PATCH] feat: signup logic is now fixed (#349)

---
 frontend/src/container/AppLayout/index.tsx    | 38 +++++++++----------
 frontend/src/pages/SignUp/index.tsx           | 11 +++---
 frontend/src/store/actions/app/index.ts       |  1 +
 .../src/store/actions/app/userLoggedIn.ts     | 13 +++++++
 frontend/src/store/reducers/app.ts            |  9 ++++-
 frontend/src/types/actions/app.ts             |  7 +++-
 6 files changed, 53 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/store/actions/app/userLoggedIn.ts

diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
index 66cc5f1fc4..f0df30aaa7 100644
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/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 === '/') {
-			history.push(ROUTES.APPLICATION);
-		}
-
-		if (!isLoggedIn && isLoggedInLocalStorage !== null) {
-			history.push(ROUTES.APPLICATION);
+		if (!isLoggedIn) {
+			setIsSignUpPage(true);
+			history.push(ROUTES.SIGN_UP);
 		} else {
-			if (isLoggedInLocalStorage === null) {
-				history.push(ROUTES.SIGN_UP);
+			if (isSignUpPage) {
+				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;
diff --git a/frontend/src/pages/SignUp/index.tsx b/frontend/src/pages/SignUp/index.tsx
index c9caedb7a5..c049c6d60d 100644
--- a/frontend/src/pages/SignUp/index.tsx
+++ b/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');
-					history.push(ROUTES.APPLICATION);
+					loggedIn();
 					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;
diff --git a/frontend/src/store/actions/app/index.ts b/frontend/src/store/actions/app/index.ts
index 036d1024cf..7a067e8542 100644
--- a/frontend/src/store/actions/app/index.ts
+++ b/frontend/src/store/actions/app/index.ts
@@ -1 +1,2 @@
 export * from './toggleDarkMode';
+export * from './userLoggedIn';
diff --git a/frontend/src/store/actions/app/userLoggedIn.ts b/frontend/src/store/actions/app/userLoggedIn.ts
new file mode 100644
index 0000000000..5476e54a7d
--- /dev/null
+++ b/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',
+		});
+	};
+};
diff --git a/frontend/src/store/reducers/app.ts b/frontend/src/store/reducers/app.ts
index 6910a20f1e..bc09b2c9ad 100644
--- a/frontend/src/store/reducers/app.ts
+++ b/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;
 	}
diff --git a/frontend/src/types/actions/app.ts b/frontend/src/types/actions/app.ts
index f70f8e0234..4a8495aafe 100644
--- a/frontend/src/types/actions/app.ts
+++ b/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;