feat(users): user detail can be edited now properly (#6135)

ui/actions/users/users.ts

@@ -51,14 +51,28 @@ export const updateUser = async (formData: FormData) => {
   const session = await auth();
   const keyServer = process.env.API_BASE_URL;
 
-  const userId = formData.get("userId");
-  const userName = formData.get("name");
-  const userPassword = formData.get("password");
-  const userEmail = formData.get("email");
-  const userCompanyName = formData.get("company_name");
+  const userId = formData.get("userId") as string; // Ensure userId is a string
+  const userName = formData.get("name") as string | null;
+  const userPassword = formData.get("password") as string | null;
+  const userEmail = formData.get("email") as string | null;
+  const userCompanyName = formData.get("company_name") as string | null;
 
   const url = new URL(`${keyServer}/users/${userId}`);
 
+  // Prepare attributes to send based on changes
+  const attributes: Record<string, any> = {};
+
+  // Add only changed fields
+  if (userName !== null) attributes.name = userName;
+  if (userEmail !== null) attributes.email = userEmail;
+  if (userCompanyName !== null) attributes.company_name = userCompanyName;
+  if (userPassword !== null) attributes.password = userPassword;
+
+  // If no fields have changed, don't send the request
+  if (Object.keys(attributes).length === 0) {
+    return { error: "No changes detected" };
+  }
+
   try {
     const response = await fetch(url.toString(), {
       method: "PATCH",
@@ -71,15 +85,11 @@ export const updateUser = async (formData: FormData) => {
         data: {
           type: "users",
           id: userId,
-          attributes: {
-            name: userName,
-            password: userPassword,
-            email: userEmail,
-            company_name: userCompanyName,
-          },
+          attributes: attributes,
         },
       }),
     });
+
     const data = await response.json();
     revalidatePath("/users");
     return parseStringify(data);

ui/components/users/forms/edit-form.tsx

@@ -25,11 +25,7 @@ export const EditForm = ({
   userCompanyName?: string;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }) => {
-  const formSchema = editUserFormSchema(
-    userName ?? "",
-    userEmail ?? "",
-    userCompanyName ?? "",
-  );
+  const formSchema = editUserFormSchema();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -48,16 +44,26 @@ export const EditForm = ({
   const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
     const formData = new FormData();
 
-    Object.entries(values).forEach(
-      ([key, value]) => value !== undefined && formData.append(key, value),
-    );
+    // Check if the value is not undefined before appending to FormData
+    if (values.name !== undefined) {
+      formData.append("name", values.name);
+    }
+    if (values.email !== undefined) {
+      formData.append("email", values.email);
+    }
+    if (values.company_name !== undefined) {
+      formData.append("company_name", values.company_name);
+    }
+
+    // Always include userId
+    formData.append("userId", userId);
 
     const data = await updateUser(formData);
 
     if (data?.errors && data.errors.length > 0) {
       const error = data.errors[0];
       const errorMessage = `${error.detail}`;
-      // show error
+      // Show error
       toast({
         variant: "destructive",
         title: "Oops! Something went wrong",

ui/types/formSchemas.ts

@@ -160,36 +160,21 @@ export const editInviteFormSchema = z.object({
   expires_at: z.string().optional(),
 });
 
-export const editUserFormSchema = (
-  currentName: string,
-  currentEmail: string,
-  currentCompanyName: string,
-) =>
+export const editUserFormSchema = () =>
   z.object({
     name: z
       .string()
       .min(3, { message: "The name must have at least 3 characters." })
       .max(150, { message: "The name cannot exceed 150 characters." })
-      .refine((val) => val !== currentName, {
-        message: "The new name must be different from the current one.",
-      })
       .optional(),
     email: z
       .string()
       .email({ message: "Please enter a valid email address." })
-      .refine((val) => val !== currentEmail, {
-        message: "The new email must be different from the current one.",
-      })
       .optional(),
     password: z
       .string()
       .min(1, { message: "The password cannot be empty." })
       .optional(),
-    company_name: z
-      .string()
-      .refine((val) => val !== currentCompanyName, {
-        message: "The new company name must be different from the current one.",
-      })
-      .optional(),
+    company_name: z.string().optional(),
     userId: z.string(),
   });