feat: edit provider has client validation now

actions/providers.ts

@@ -76,8 +76,8 @@ export const updateProvider = async (formData: FormData) => {
   const keyServer = process.env.API_BASE_URL;
 
   const tenantId = session?.user.tenantId;
-  const providerId = formData.get("id");
-  const alias = formData.get("alias");
+  const providerId = formData.get("providerId");
+  const providerAlias = formData.get("alias");
 
   const url = new URL(`${keyServer}/providers/${providerId}`);
 
@@ -93,7 +93,7 @@ export const updateProvider = async (formData: FormData) => {
           type: "Provider",
           id: providerId,
           attributes: {
-            alias: alias,
+            alias: providerAlias,
           },
         },
       }),

components/providers/forms/EditForm.tsx

@@ -8,13 +8,9 @@ import * as z from "zod";
 
 import { updateProvider } from "@/actions";
 import { useToast } from "@/components/ui";
-import { CustomInput } from "@/components/ui/custom";
+import { CustomInputNew } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
-
-const formSchema = z.object({
-  alias: z.string(),
-  providerId: z.string(),
-});
+import { editProviderFormSchema } from "@/types";
 
 export const EditForm = ({
   providerId,
@@ -25,18 +21,26 @@ export const EditForm = ({
   providerAlias?: string;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }) => {
+  const formSchema = editProviderFormSchema(providerAlias ?? "");
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      alias: "",
+      providerId: providerId,
+      alias: providerAlias,
     },
   });
 
   const { toast } = useToast();
   const isLoading = form.formState.isSubmitting;
 
-  async function onSubmitClient(formData: FormData) {
-    // client-side validation
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+
     const data = await updateProvider(formData);
 
     if (data?.errors && data.errors.length > 0) {
@@ -54,18 +58,27 @@ export const EditForm = ({
         description: "The provider was updated successfully.",
       });
     }
-  }
+  };
 
   return (
     <Form {...form}>
       <form
-        action={onSubmitClient}
+        // action={onSubmitClient}
+        onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-2 sm:px-0 px-4"
       >
-        <input type="hidden" name="id" value={providerId} />
+        <input type="hidden" name="providerId" value={providerId} />
         <div>Current alias: {providerAlias}</div>
 
-        <CustomInput
+        {/* <CustomInput
+          control={form.control}
+          name="alias"
+          type="text"
+          label="Alias"
+          placeholder={providerAlias}
+        /> */}
+
+        <CustomInputNew
           control={form.control}
           name="alias"
           type="text"
@@ -90,13 +103,9 @@ export const EditForm = ({
             type="submit"
             disabled={isLoading}
             className="w-full"
-            onPress={() => setIsOpen(false)}
           >
             {isLoading ? (
-              <>
-                <CircularProgress aria-label="Loading..." size="sm" />
-                Saving...
-              </>
+              <CircularProgress aria-label="Loading..." size="md" />
             ) : (
               <span>Save</span>
             )}

components/ui/custom/CustomInputNew.tsx

@@ -0,0 +1,44 @@
+import { Input } from "@nextui-org/react";
+import { Control, FieldPath, FieldValues } from "react-hook-form";
+
+import { FormControl, FormField, FormMessage } from "@/components/ui/form";
+
+interface CustomInputNewProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  label: string;
+  type: string;
+  placeholder?: string;
+  isRequired?: boolean;
+}
+
+export const CustomInputNew = <T extends FieldValues>({
+  control,
+  name,
+  label,
+  type,
+  placeholder,
+  isRequired = false,
+}: CustomInputNewProps<T>) => {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <>
+          <FormControl>
+            <Input
+              isRequired={isRequired}
+              label={label}
+              placeholder={placeholder}
+              type={type}
+              variant="bordered"
+              {...field}
+            />
+          </FormControl>
+          <FormMessage className="text-system-error dark:text-system-error" />
+        </>
+      )}
+    />
+  );
+};

components/ui/custom/index.ts

@@ -2,4 +2,5 @@ export * from "./CustomAlertModal";
 export * from "./CustomBox";
 export * from "./CustomButtonClientAction";
 export * from "./CustomInput";
+export * from "./CustomInputNew";
 export * from "./CustomLoader";

types/formSchemas.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+export const editProviderFormSchema = (currentAlias: string) =>
+  z.object({
+    alias: z
+      .string()
+      .refine((val) => val === "" || val.length >= 3, {
+        message: "The alias must be empty or have at least 3 characters.",
+      })
+      .refine((val) => val !== currentAlias, {
+        message: "The new alias must be different from the current one.",
+      })
+      .optional(),
+    providerId: z.string(),
+  });

types/index.ts

@@ -1,2 +1,3 @@
-export * from "./auth";
+export * from "./authFormSchema";
 export * from "./components";
+export * from "./formSchemas";