From 94eba806e3b1d1aeef7aa697ab0874ad164fe8a8 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 24 Sep 2024 08:40:48 +0200
Subject: [PATCH] feat: big refactor for CustomInput component

---
 components/auth/AuthForm.tsx            |  2 +-
 components/providers/forms/EditForm.tsx | 12 ++-----
 components/ui/custom/CustomInput.tsx    | 43 ++++++++----------------
 components/ui/custom/CustomInputNew.tsx | 44 -------------------------
 components/ui/custom/index.ts           |  1 -
 5 files changed, 17 insertions(+), 85 deletions(-)
 delete mode 100644 components/ui/custom/CustomInputNew.tsx

diff --git a/components/auth/AuthForm.tsx b/components/auth/AuthForm.tsx
index 797d076b5f..11176f0aab 100644
--- a/components/auth/AuthForm.tsx
+++ b/components/auth/AuthForm.tsx
@@ -126,7 +126,7 @@ export const AuthForm = ({ type }: { type: string }) => {
               placeholder="Enter your email"
             />
 
-            <CustomInput control={form.control} password />
+            <CustomInput control={form.control} name="password" password />
 
             {type === "sign-in" && (
               <div className="flex items-center justify-between px-1 py-2">
diff --git a/components/providers/forms/EditForm.tsx b/components/providers/forms/EditForm.tsx
index 1404382296..2b82b7116d 100644
--- a/components/providers/forms/EditForm.tsx
+++ b/components/providers/forms/EditForm.tsx
@@ -8,7 +8,7 @@ import * as z from "zod";
 
 import { updateProvider } from "@/actions";
 import { useToast } from "@/components/ui";
-import { CustomInputNew } from "@/components/ui/custom";
+import { CustomInput } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
 import { editProviderFormSchema } from "@/types";
 
@@ -70,15 +70,7 @@ export const EditForm = ({
         <input type="hidden" name="providerId" value={providerId} />
         <div>Current alias: {providerAlias}</div>
 
-        {/* <CustomInput
-          control={form.control}
-          name="alias"
-          type="text"
-          label="Alias"
-          placeholder={providerAlias}
-        /> */}
-
-        <CustomInputNew
+        <CustomInput
           control={form.control}
           name="alias"
           type="text"
diff --git a/components/ui/custom/CustomInput.tsx b/components/ui/custom/CustomInput.tsx
index 8a876eec62..9a62ed85ee 100644
--- a/components/ui/custom/CustomInput.tsx
+++ b/components/ui/custom/CustomInput.tsx
@@ -3,48 +3,33 @@
 import { Icon } from "@iconify/react";
 import { Input } from "@nextui-org/react";
 import React, { useState } from "react";
-import { Control, FieldPath } from "react-hook-form";
-import { z } from "zod";
+import { Control, FieldPath, FieldValues } from "react-hook-form";
 
 import { FormControl, FormField, FormMessage } from "@/components/ui/form";
-import { authFormSchema } from "@/types";
 
-const formSchema = authFormSchema("sign-up");
-
-type CustomInputProps = {
-  control: Control<z.infer<typeof formSchema>>;
+interface CustomInputProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  label?: string;
+  type?: string;
+  placeholder?: string;
   isRequired?: boolean;
-} & (
-  | {
-      password?: false;
-      name: FieldPath<z.infer<typeof formSchema>>;
-      label: string;
-      type: "text" | "email";
-      placeholder: string;
-    }
-  | {
-      password: true;
-      name?: never;
-      label?: never;
-      type?: never;
-      placeholder?: never;
-    }
-);
+  password?: boolean;
+}
 
-export const CustomInput = ({
+export const CustomInput = <T extends FieldValues>({
   control,
   name,
-  type,
-  label,
+  type = "text",
+  label = name,
   placeholder,
   password = false,
   isRequired = true,
-}: CustomInputProps) => {
+}: CustomInputProps<T>) => {
   const [isVisible, setIsVisible] = useState(false);
 
   const toggleVisibility = () => setIsVisible(!isVisible);
 
-  const inputName = password ? "password" : name!;
   const inputLabel = password ? "Password" : label;
   const inputType = password ? (isVisible ? "text" : "password") : type;
   const inputPlaceholder = password ? "Enter your password" : placeholder;
@@ -62,7 +47,7 @@ export const CustomInput = ({
   return (
     <FormField
       control={control}
-      name={inputName as FieldPath<z.infer<typeof formSchema>>}
+      name={name}
       render={({ field }) => (
         <>
           <FormControl>
diff --git a/components/ui/custom/CustomInputNew.tsx b/components/ui/custom/CustomInputNew.tsx
deleted file mode 100644
index a5f16436be..0000000000
--- a/components/ui/custom/CustomInputNew.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-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" />
-        </>
-      )}
-    />
-  );
-};
diff --git a/components/ui/custom/index.ts b/components/ui/custom/index.ts
index d36dafac6e..0520404750 100644
--- a/components/ui/custom/index.ts
+++ b/components/ui/custom/index.ts
@@ -2,5 +2,4 @@ export * from "./CustomAlertModal";
 export * from "./CustomBox";
 export * from "./CustomButtonClientAction";
 export * from "./CustomInput";
-export * from "./CustomInputNew";
 export * from "./CustomLoader";