Refactor step handlers in CustomDomainDialog

Author: richiemcilroy

apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/CustomDomainDialog.tsx

@@ -11,7 +11,7 @@ import { faGlobe, faRefresh } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
-import { useEffect, useReducer, useRef, useState } from "react";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { toast } from "sonner";
 import { checkOrganizationDomain } from "@/actions/organization/check-domain";
 import { removeOrganizationDomain } from "@/actions/organization/remove-domain";
@@ -141,7 +141,6 @@ const CustomDomainDialog = ({
 
 	const pollInterval = useRef<NodeJS.Timeout | undefined>(undefined);
 
-	// Mutation for updating domain
 	const updateDomainMutation = useMutation({
 		mutationFn: async ({
 			domain,
@@ -159,7 +158,7 @@ const CustomDomainDialog = ({
 			);
 		},
 		onSuccess: (data) => {
-			handleNext();
+			dispatch({ type: "NEXT_STEP" });
 			toast.success("Domain settings updated");
 			router.refresh();
 			if (data) {
@@ -175,7 +174,6 @@ const CustomDomainDialog = ({
 		},
 	});
 
-	// Mutation for checking domain verification
 	const checkDomainMutation = useMutation({
 		mutationFn: async ({
 			orgId,
@@ -196,10 +194,9 @@ const CustomDomainDialog = ({
 			setDomainConfig(data.config);
 
 			if (data.verified) {
-				handleNext();
+				dispatch({ type: "NEXT_STEP" });
 			}
 
-			// Only show toasts if explicitly requested
 			if (showToasts) {
 				if (data.verified) {
 					toast.success("Domain is verified!");
@@ -243,29 +240,49 @@ const CustomDomainDialog = ({
 	}));
 
 	const currentStep = steps[stepState.currentIndex];
-	const canGoNext = stepState.currentIndex < STEP_CONFIGS.length - 1;
-
-	if (!currentStep) {
-		return null;
-	}
 
-	// Step navigation handlers
-	const handleNext = () => {
-		if (canGoNext) {
-			dispatch({ type: "NEXT_STEP" });
-		}
-	};
+	const handleNext = useCallback(() => {
+		dispatch({ type: "NEXT_STEP" });
+	}, []);
 
 	const handleStepClick = (index: number) => {
 		dispatch({ type: "GO_TO_STEP", payload: index });
 	};
 
-	const handleReset = () => {
+	const handleReset = useCallback(() => {
 		dispatch({ type: "RESET" });
 		setDomain("");
-	};
+	}, []);
+
+	const handleClose = useCallback(() => {
+		handleReset();
+		onClose();
+	}, [handleReset, onClose]);
+
+	const checkVerification = useCallback(
+		(showToasts = true) => {
+			if (
+				!activeOrganization?.organization.id ||
+				!activeOrganization?.organization.customDomain
+			)
+				return;
+
+			checkDomainMutation.mutate({
+				orgId: activeOrganization.organization.id,
+				showToasts,
+			});
+		},
+		[
+			activeOrganization?.organization.id,
+			activeOrganization?.organization.customDomain,
+			checkDomainMutation,
+		],
+	);
+
+	if (!currentStep) {
+		return null;
+	}
 
-	// Step-specific handlers
 	const handleDomainSubmit = async () => {
 		if (!domain.trim()) {
 			dispatch({
@@ -319,24 +336,6 @@ const CustomDomainDialog = ({
 		});
 	};
 
-	const checkVerification = async (showToasts = true) => {
-		if (
-			!activeOrganization?.organization.id ||
-			!activeOrganization?.organization.customDomain
-		)
-			return;
-
-		checkDomainMutation.mutate({
-			orgId: activeOrganization.organization.id,
-			showToasts,
-		});
-	};
-
-	const handleClose = () => {
-		handleReset();
-		onClose();
-	};
-
 	useEffect(() => {
 		//if current step is success, close dialog in 8 seconds
 		if (stepState.currentIndex === 2) {