chore: revamp the frontend architecture

frontend/src/AppRoutes/utils.ts

@@ -1,92 +1,28 @@
-import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import getUserApi from 'api/user/getUser';
-import { Logout } from 'api/utils';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import store from 'store';
-import AppActions from 'types/actions';
-import {
-	LOGGED_IN,
-	UPDATE_USER,
-	UPDATE_USER_ACCESS_REFRESH_ACCESS_TOKEN,
-	UPDATE_USER_IS_FETCH,
-} from 'types/actions/app';
-import { SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/user/getUser';
 
-const afterLogin = async (
+const afterLogin = (
 	userId: string,
 	authToken: string,
 	refreshToken: string,
-): Promise<SuccessResponse<PayloadProps> | undefined> => {
+	interceptorRejected?: boolean,
+): void => {
 	setLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN, authToken);
 	setLocalStorageApi(LOCALSTORAGE.REFRESH_AUTH_TOKEN, refreshToken);
-
-	store.dispatch<AppActions>({
-		type: UPDATE_USER_ACCESS_REFRESH_ACCESS_TOKEN,
-		payload: {
-			accessJwt: authToken,
-			refreshJwt: refreshToken,
-		},
-	});
-
-	const [getUserResponse] = await Promise.all([
-		getUserApi({
-			userId,
-			token: authToken,
-		}),
-	]);
-
-	if (getUserResponse.statusCode === 200 && getUserResponse.payload) {
-		store.dispatch<AppActions>({
-			type: LOGGED_IN,
-			payload: {
-				isLoggedIn: true,
-			},
-		});
-
-		const { payload } = getUserResponse;
-
-		store.dispatch<AppActions>({
-			type: UPDATE_USER,
-			payload: {
-				ROLE: payload.role,
-				email: payload.email,
-				name: payload.name,
-				orgName: payload.organization,
-				profilePictureURL: payload.profilePictureURL,
-				userId: payload.id,
-				orgId: payload.orgId,
-				userFlags: payload.flags,
-			},
-		});
-
-		const isLoggedInLocalStorage = getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN);
-
-		if (isLoggedInLocalStorage === null) {
-			setLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN, 'true');
-		}
-
-		store.dispatch({
-			type: UPDATE_USER_IS_FETCH,
-			payload: {
-				isUserFetching: false,
-			},
-		});
-
-		return getUserResponse;
+	setLocalStorageApi(LOCALSTORAGE.USER_ID, userId);
+	setLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN, 'true');
+
+	if (!interceptorRejected) {
+		window.dispatchEvent(
+			new CustomEvent('AFTER_LOGIN', {
+				detail: {
+					accessJWT: authToken,
+					refreshJWT: refreshToken,
+					id: userId,
+				},
+			}),
+		);
 	}
-
-	store.dispatch({
-		type: UPDATE_USER_IS_FETCH,
-		payload: {
-			isUserFetching: false,
-		},
-	});
-
-	Logout();
-
-	return undefined;
 };
 
 export default afterLogin;

frontend/src/api/index.ts

@@ -7,7 +7,6 @@ import afterLogin from 'AppRoutes/utils';
 import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import { ENVIRONMENT } from 'constants/env';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import store from 'store';
 
 import apiV1, {
 	apiAlertManager,
@@ -26,10 +25,7 @@ const interceptorsResponse = (
 const interceptorsRequestResponse = (
 	value: InternalAxiosRequestConfig,
 ): InternalAxiosRequestConfig => {
-	const token =
-		store.getState().app.user?.accessJwt ||
-		getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN) ||
-		'';
+	const token = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN) || '';
 
 	if (value && value.headers) {
 		value.headers.Authorization = token ? `Bearer ${token}` : '';
@@ -47,41 +43,36 @@ const interceptorRejected = async (
 			// reject the refresh token error
 			if (response.status === 401 && response.config.url !== '/login') {
 				const response = await loginApi({
-					refreshToken: store.getState().app.user?.refreshJwt,
+					refreshToken: getLocalStorageApi(LOCALSTORAGE.REFRESH_AUTH_TOKEN) || '',
 				});
 
 				if (response.statusCode === 200) {
-					const user = await afterLogin(
+					afterLogin(
 						response.payload.userId,
 						response.payload.accessJwt,
 						response.payload.refreshJwt,
+						true,
 					);
 
-					if (user) {
-						const reResponse = await axios(
-							`${value.config.baseURL}${value.config.url?.substring(1)}`,
-							{
-								method: value.config.method,
-								headers: {
-									...value.config.headers,
-									Authorization: `Bearer ${response.payload.accessJwt}`,
-								},
-								data: {
-									...JSON.parse(value.config.data || '{}'),
-								},
+					const reResponse = await axios(
+						`${value.config.baseURL}${value.config.url?.substring(1)}`,
+						{
+							method: value.config.method,
+							headers: {
+								...value.config.headers,
+								Authorization: `Bearer ${response.payload.accessJwt}`,
 							},
-						);
-
-						if (reResponse.status === 200) {
-							return await Promise.resolve(reResponse);
-						}
-						Logout();
+							data: {
+								...JSON.parse(value.config.data || '{}'),
+							},
+						},
+					);
 
-						return await Promise.reject(reResponse);
+					if (reResponse.status === 200) {
+						return await Promise.resolve(reResponse);
 					}
 					Logout();
-
-					return await Promise.reject(value);
+					return await Promise.reject(reResponse);
 				}
 				Logout();
 			}

frontend/src/api/licenses/getAll.ts

@@ -1,24 +1,18 @@
 import { ApiV2Instance as axios } from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps } from 'types/api/licenses/getAll';
 
 const getAll = async (): Promise<
 	SuccessResponse<PayloadProps> | ErrorResponse
 > => {
-	try {
-		const response = await axios.get('/licenses');
+	const response = await axios.get('/licenses');
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
 
 export default getAll;

frontend/src/api/user/getUser.ts

@@ -1,28 +1,18 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/user/getUser';
 
 const getUser = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.get(`/user/${props.userId}`, {
-			headers: {
-				Authorization: `bearer ${props.token}`,
-			},
-		});
+	const response = await axios.get(`/user/${props.userId}`);
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Success',
+		payload: response.data,
+	};
 };
 
 export default getUser;

frontend/src/api/utils.ts

@@ -2,14 +2,6 @@ import deleteLocalStorageKey from 'api/browser/localstorage/remove';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
-import store from 'store';
-import {
-	LOGGED_IN,
-	UPDATE_ORG,
-	UPDATE_USER,
-	UPDATE_USER_ACCESS_REFRESH_ACCESS_TOKEN,
-	UPDATE_USER_ORG_ROLE,
-} from 'types/actions/app';
 
 export const Logout = (): void => {
 	deleteLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN);
@@ -19,50 +11,9 @@ export const Logout = (): void => {
 	deleteLocalStorageKey(LOCALSTORAGE.LOGGED_IN_USER_EMAIL);
 	deleteLocalStorageKey(LOCALSTORAGE.LOGGED_IN_USER_NAME);
 	deleteLocalStorageKey(LOCALSTORAGE.CHAT_SUPPORT);
+	deleteLocalStorageKey(LOCALSTORAGE.USER_ID);
 
-	store.dispatch({
-		type: LOGGED_IN,
-		payload: {
-			isLoggedIn: false,
-		},
-	});
-
-	store.dispatch({
-		type: UPDATE_USER_ORG_ROLE,
-		payload: {
-			org: null,
-			role: null,
-		},
-	});
-
-	store.dispatch({
-		type: UPDATE_USER,
-		payload: {
-			ROLE: 'VIEWER',
-			email: '',
-			name: '',
-			orgId: '',
-			orgName: '',
-			profilePictureURL: '',
-			userId: '',
-			userFlags: {},
-		},
-	});
-
-	store.dispatch({
-		type: UPDATE_USER_ACCESS_REFRESH_ACCESS_TOKEN,
-		payload: {
-			accessJwt: '',
-			refreshJwt: '',
-		},
-	});
-
-	store.dispatch({
-		type: UPDATE_ORG,
-		payload: {
-			org: [],
-		},
-	});
+	window.dispatchEvent(new CustomEvent('LOGOUT'));
 
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -2,9 +2,9 @@ import { Button, Modal, Typography } from 'antd';
 import updateCreditCardApi from 'api/billing/checkout';
 import logEvent from 'api/common/logEvent';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { CreditCard, X } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
@@ -20,16 +20,16 @@ export default function ChatSupportGateway(): JSX.Element {
 		false,
 	);
 
-	const { data: licenseData, isFetching } = useLicense();
+	const { licenses, isFetchingLicenses } = useAppContext();
 
 	useEffect(() => {
-		const activeValidLicense =
-			licenseData?.payload?.licenses?.find(
-				(license) => license.isCurrent === true,
-			) || null;
+		if (!isFetchingLicenses && licenses) {
+			const activeValidLicense =
+				licenses.licenses?.find((license) => license.isCurrent === true) || null;
 
-		setActiveLicense(activeValidLicense);
-	}, [licenseData, isFetching]);
+			setActiveLicense(activeValidLicense);
+		}
+	}, [licenses, isFetchingLicenses]);
 
 	const handleBillingOnSuccess = (
 		data: ErrorResponse | SuccessResponse<CheckoutSuccessPayloadProps, unknown>,