feat(user-update-form): display field errors in user update form ✨

actions/user-actions.ts

@@ -129,18 +129,19 @@ export type UpdateUserFormState = {
 	payload?: FormData;
 };
 
+
 export async function updateUser(
 	_prevState: UpdateUserFormState,
 	formData: FormData,
 ): Promise<UpdateUserFormState> {
 	const userId = formData.get("userId") as string;
 	const data: Record<string, string | number | boolean> = {};
+
 	for (const [key, value] of formData.entries()) {
 		if (value !== undefined && value !== "") {
 			data[key] = typeof value === "number" ? value : String(value);
 		}
 	}
-	console.log("data in update user action", data);
 
 	const session = await getServerSession(authOptions);
 	const response = await fetch(
@@ -154,29 +155,42 @@ export async function updateUser(
 			body: JSON.stringify(data),
 		},
 	);
-	console.log("response in update user action", response);
+
+	const json = await response.json();
 
 	if (!response.ok) {
-		const errorData = await response.json();
+		const isFieldErrorObject =
+			json &&
+			typeof json === "object" &&
+			!Array.isArray(json) &&
+			Object.values(json).every(
+				(val) => Array.isArray(val) && val.every((v) => typeof v === "string"),
+			);
+
 		return {
 			message:
-				errorData.message ||
-				errorData.detail ||
-				"An error occurred while updating the user.",
-			fieldErrors: errorData.field_errors || {},
+				json.message ||
+				json.detail ||
+				(isFieldErrorObject
+					? "Please correct the highlighted fields."
+					: "An error occurred while updating the user."),
+			fieldErrors: isFieldErrorObject ? json : json.field_errors || {},
 			payload: formData,
 		};
 	}
 
-	const updatedUser = (await response.json()) as User;
+	// Successful update
+	const updatedUser = json as User;
 	revalidatePath("/users/[userId]/update", "page");
 	revalidatePath("/users/[userId]/verify", "page");
+
 	return {
 		...updatedUser,
 		message: "User updated successfully",
 	};
 }
 
+
 export async function updateUserAgreement(
 	_prevState: UpdateUserFormState,
 	formData: FormData,