refactor code according to feedback

supertokens · Oct 5, 2023 · c9e0e74 · c9e0e74
1 parent 207e2be
commit c9e0e74
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 85 deletions.
diff --git a/build/static/js/bundle.js b/build/static/js/bundle.js
diff --git a/build/static/js/bundle.js.map b/build/static/js/bundle.js.map
diff --git a/server/index.ts b/server/index.ts
@@ -21,7 +21,6 @@ import { errorHandler, middleware } from "supertokens-node/framework/express";
 import Dashboard from "supertokens-node/lib/build/recipe/dashboard/recipe";
 import AccountLinking from "supertokens-node/recipe/accountlinking";
 import EmailPassword from "supertokens-node/recipe/emailpassword";
-import EmailVerification from "supertokens-node/recipe/emailverification";
 import Passwordless from "supertokens-node/recipe/passwordless";
 import Session from "supertokens-node/recipe/session";
 import ThirdParty from "supertokens-node/recipe/thirdparty";
@@ -83,9 +82,9 @@ SuperTokens.init({
 				],
 			},
 		}),
-		EmailVerification.init({
-			mode: "REQUIRED",
-		}),
+		// EmailVerification.init({
+		// 	mode: "REQUIRED",
+		// }),
 		Session.init(),
 		AccountLinking.init(),
 	],

diff --git a/src/ui/components/userDetail/loginMethods/LoginMethods.tsx b/src/ui/components/userDetail/loginMethods/LoginMethods.tsx
@@ -1,19 +1,21 @@
 import React, { useCallback, useContext, useState } from "react";
 import useUserService, { UpdateUserInformationResponse, type IUpdateUserInformationArgs } from "../../../../api/user";
 import useDeleteUserService from "../../../../api/user/delete";
+import useVerifyUserEmail from "../../../../api/user/email/verify";
 import useVerifyUserTokenService from "../../../../api/user/email/verify/token";
 import usePasswordResetService from "../../../../api/user/password/reset";
 import useUnlinkService from "../../../../api/user/unlink";
 import { getImageUrl } from "../../../../utils";
 import { formatLongDate } from "../../../../utils/index";
 import { PopupContentContext } from "../../../contexts/PopupContentContext";
-import { UserRecipeType, type LoginMethod } from "../../../pages/usersList/types";
+import { FEATURE_NOT_ENABLED_TEXT, UserRecipeType, type LoginMethod } from "../../../pages/usersList/types";
 import CopyText from "../../copyText/CopyText";
 import { LayoutPanel } from "../../layout/layoutPanel";
 import TooltipContainer from "../../tooltip/tooltip";
 import { useUserDetailContext } from "../context/UserDetailContext";
 import {
 	getDeleteUserToast,
+	getInitlizeEmailVerificationRecipeTost,
 	getLoginMethodUnlinkConfirmationProps,
 	getSendEmailVerificationToast,
 	getUnlinkUserToast,
@@ -132,7 +134,6 @@ type MethodProps = {
 	updateContext: (val: LoginMethod, ind: number) => void;
 	index: number;
 	showUnlink: boolean;
-	isVerifyEmailFeatureEnabled: boolean;
 };
 
 const Methods: React.FC<MethodProps> = ({
@@ -145,11 +146,11 @@ const Methods: React.FC<MethodProps> = ({
 	updateContext,
 	index,
 	showUnlink,
-	isVerifyEmailFeatureEnabled,
 }) => {
 	const { sendUserEmailVerification: sendUserEmailVerificationApi } = useVerifyUserTokenService();
 	const { showModal, showToast } = useContext(PopupContentContext);
 	const [emailError, setEmailError] = useState("");
+	const { getUserEmailVerificationStatus } = useVerifyUserEmail();
 
 	const trim = (val: string) => {
 		const len = val.length;
@@ -158,6 +159,13 @@ const Methods: React.FC<MethodProps> = ({
 
 	const sendUserEmailVerification = useCallback(
 		async (userId: string, tenantId: string | undefined) => {
+			const res = await getUserEmailVerificationStatus(userId);
+
+			if (res.status === FEATURE_NOT_ENABLED_TEXT) {
+				showToast(getInitlizeEmailVerificationRecipeTost());
+				return;
+			}
+
 			const isSend = await sendUserEmailVerificationApi(userId, tenantId);
 			showToast(getSendEmailVerificationToast(isSend));
 			return isSend;
@@ -197,6 +205,12 @@ const Methods: React.FC<MethodProps> = ({
 		[showModal, loginMethod.recipeUserId, changePassword]
 	);
 	const changeEmailVerificationStatus = async () => {
+		const res = await getUserEmailVerificationStatus(loginMethod.recipeUserId);
+
+		if (res.status === FEATURE_NOT_ENABLED_TEXT) {
+			showToast(getInitlizeEmailVerificationRecipeTost());
+			return;
+		}
 		await onUpdateEmailVerificationStatusCallback(loginMethod.recipeUserId, !loginMethod.verified, undefined);
 		await refetchAllData();
 	};
@@ -281,35 +295,26 @@ const Methods: React.FC<MethodProps> = ({
 				<div>
 					Is Email Verified?:&nbsp;{" "}
 					<div className="pill-container">
-						{isVerifyEmailFeatureEnabled ? (
-							<>
-								<VerifiedPill isVerified={loginMethod.verified} />
-								{!isEditing && !loginMethod.verified && (
-									<TooltipContainer
-										tooltip="Send verification mail"
-										position="right"
-										tooltipWidth={170}>
-										<SendMailIcon
-											className="send-mail-icon"
-											onClick={() =>
-												sendUserEmailVerification(
-													loginMethod.recipeUserId,
-													loginMethod.tenantIds[0]
-												)
-											}
-										/>
-									</TooltipContainer>
-								)}
-								{isEditing && (
-									<span
-										onClick={changeEmailVerificationStatus}
-										className="password-link">
-										{loginMethod.verified ? "Set as Unverified" : "Set as Verified"}
-									</span>
-								)}
-							</>
-						) : (
-							<span className="not-verified">Feature not enabled</span>
+						<VerifiedPill isVerified={loginMethod.verified} />
+						{!isEditing && !loginMethod.verified && (
+							<TooltipContainer
+								tooltip="Send verification mail"
+								position="right"
+								tooltipWidth={170}>
+								<SendMailIcon
+									className="send-mail-icon"
+									onClick={() =>
+										sendUserEmailVerification(loginMethod.recipeUserId, loginMethod.tenantIds[0])
+									}
+								/>
+							</TooltipContainer>
+						)}
+						{isEditing && (
+							<span
+								onClick={changeEmailVerificationStatus}
+								className="password-link">
+								{loginMethod.verified ? "Set as Unverified" : "Set as Verified"}
+							</span>
 						)}
 					</div>
 				</div>
@@ -378,9 +383,9 @@ const Methods: React.FC<MethodProps> = ({
 	);
 };
 
-type LoginMethodProps = { refetchAllData: () => Promise<void>; isVerifyEmailFeatureEnabled: boolean };
+type LoginMethodProps = { refetchAllData: () => Promise<void> };
 
-export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData, isVerifyEmailFeatureEnabled }) => {
+export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData }) => {
 	const { userDetail, setUserDetails } = useUserDetailContext();
 	const { updateUserInformation } = useUserService();
 	const methods = userDetail.details.loginMethods;
@@ -449,7 +454,6 @@ export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData, isVer
 			header={<div className="title">Login Methods</div>}>
 			{methods.map((val, ind) => (
 				<Methods
-					isVerifyEmailFeatureEnabled={isVerifyEmailFeatureEnabled}
 					loginMethod={val}
 					onUpdateEmailVerificationStatusCallback={userDetail.func.onUpdateEmailVerificationStatusCallback}
 					key={ind}

diff --git a/src/ui/components/userDetail/userDetail.tsx b/src/ui/components/userDetail/userDetail.tsx
@@ -16,13 +16,12 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import { Tenant } from "../../../api/tenants/list";
 import { GetUserInfoResult, UpdateUserInformationResponse, useUserService } from "../../../api/user";
-import useVerifyUserEmail from "../../../api/user/email/verify";
 import useMetadataService from "../../../api/user/metadata";
 import useSessionsForUserService from "../../../api/user/sessions";
 import { getImageUrl, getRecipeNameFromid } from "../../../utils";
 import { getTenantsObjectsForIds } from "../../../utils/user";
 import { PopupContentContext } from "../../contexts/PopupContentContext";
-import { FEATURE_NOT_ENABLED_TEXT, User, UserRecipeType } from "../../pages/usersList/types";
+import { User, UserRecipeType } from "../../pages/usersList/types";
 import { getMissingTenantIdModalProps } from "../common/modals/TenantIdModals";
 import { OnSelectUserFunction } from "../usersListTable/UsersListTable";
 import { UserDetailContextProvider } from "./context/UserDetailContext";
@@ -54,38 +53,18 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 	const [sessionList, setSessionList] = useState<SessionInfo[] | undefined>(undefined);
 	const [userMetaData, setUserMetaData] = useState<string | undefined>(undefined);
 	const [shouldShowLoadingOverlay, setShowLoadingOverlay] = useState<boolean>(false);
-	const [isVerifyEmailFeatureEnabled, setIsVerifyEmailFeatureEnabled] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
 
 	const { getUser, updateUserInformation } = useUserService();
 	const { getUserMetaData } = useMetadataService();
 	const { getSessionsForUser } = useSessionsForUserService();
 	const { showModal } = useContext(PopupContentContext);
-	const { getUserEmailVerificationStatus } = useVerifyUserEmail();
 
 	const loadUserDetail = useCallback(async () => {
 		const userDetailsResponse = await getUser(user);
-		const parsedUserDetails = JSON.parse(JSON.stringify(userDetailsResponse)) as GetUserInfoResult;
-		try {
-			if (parsedUserDetails && parsedUserDetails.status === "OK") {
-				const res = await getUserEmailVerificationStatus(parsedUserDetails.user.loginMethods[0].recipeUserId);
-				if (res.status === "OK") {
-					setIsVerifyEmailFeatureEnabled(true);
-				}
-			}
-			// eslint-disable-next-line  @typescript-eslint/no-explicit-any
-		} catch (err: any) {
-			if (err.status === FEATURE_NOT_ENABLED_TEXT) {
-				setIsVerifyEmailFeatureEnabled(false);
-			}
-		} finally {
-			setUserDetail(parsedUserDetails);
-		}
+		setUserDetail(JSON.parse(JSON.stringify(userDetailsResponse)));
 	}, []);
 
-	useEffect(() => {
-		void loadUserDetail();
-	}, [loadUserDetail]);
-
 	const { showToast } = useContext(PopupContentContext);
 
 	const updateUser = useCallback(
@@ -162,10 +141,6 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		}
 	}, []);
 
-	useEffect(() => {
-		void fetchUserMetaData();
-	}, [fetchUserMetaData]);
-
 	const fetchSession = useCallback(async () => {
 		let response = await getSessionsForUser(user);
 
@@ -176,10 +151,6 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		setSessionList(response);
 	}, []);
 
-	useEffect(() => {
-		void fetchSession();
-	}, [fetchSession]);
-
 	const showLoadingOverlay = () => {
 		setShowLoadingOverlay(true);
 	};
@@ -188,7 +159,27 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		setShowLoadingOverlay(false);
 	};
 
-	if (userDetail === undefined) {
+	const fetchData = async () => {
+		setIsLoading(true);
+		await loadUserDetail();
+		await fetchUserMetaData();
+		await fetchSession();
+		setIsLoading(false);
+	};
+
+	const refetchAllData = async () => {
+		setShowLoadingOverlay(true);
+		await loadUserDetail();
+		await fetchUserMetaData();
+		await fetchSession();
+		setShowLoadingOverlay(false);
+	};
+
+	useEffect(() => {
+		void fetchData();
+	}, []);
+
+	if (userDetail === undefined || isLoading) {
 		return (
 			<div className="user-detail-page-loader">
 				<div className="loader"></div>
@@ -224,13 +215,6 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		);
 	}
 
-	const refetchAllData = async () => {
-		setShowLoadingOverlay(true);
-		await loadUserDetail();
-		await fetchUserMetaData();
-		await fetchSession();
-		setShowLoadingOverlay(false);
-	};
 	const userFunctions = {
 		refetchAllData: refetchAllData,
 		updateUser: updateUser,
@@ -270,10 +254,7 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 
 				<UserDetailInfoGrid {...props} />
 
-				<LoginMethods
-					isVerifyEmailFeatureEnabled={isVerifyEmailFeatureEnabled}
-					refetchAllData={refetchAllData}
-				/>
+				<LoginMethods refetchAllData={refetchAllData} />
 
 				<UserMetaDataSection />
 

diff --git a/src/ui/components/userDetail/userDetailForm.tsx b/src/ui/components/userDetail/userDetailForm.tsx
@@ -633,6 +633,14 @@ export const getSendEmailVerificationToast = (isSuccessfull: boolean) => {
 	} as ToastNotificationProps;
 };
 
+export const getInitlizeEmailVerificationRecipeTost = () => {
+	return {
+		iconImage: getImageUrl("form-field-error-icon.svg"),
+		toastType: "error",
+		children: <>{"EmailVerification feature is not enabled"}</>,
+	} as ToastNotificationProps;
+};
+
 export const getEmailVerifiedToast = (isSuccessfull: boolean) => {
 	return {
 		iconImage: getImageUrl(isSuccessfull ? "checkmark-green.svg" : "form-field-error-icon.svg"),