update: making the validation of hashtag debounced

src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx

@@ -12,12 +12,13 @@ import { BsLightningChargeFill } from "react-icons/bs";
 import InfoCard from "src/Components/InfoCard/InfoCard";
 import TextInput from "src/Components/Inputs/TextInput/TextInput";
 import TextareaInput from "src/Components/Inputs/TextareaInput/TextareaInput";
+import { registerDebounceValidation } from "src/utils/validation";
 
 interface Props { }
 
 export default function ProjectDetailsTab(props: Props) {
 
-    const { register, formState: { errors, dirtyFields }, control, getValues } = useFormContext<IListProjectForm>();
+    const { register, formState: { errors, dirtyFields }, control, getValues, trigger } = useFormContext<IListProjectForm>();
 
     const isUpdating = !!getValues('id');
 
@@ -117,7 +118,7 @@ export default function ProjectDetailsTab(props: Props) {
                         placeholder='my_project_name'
                         inputClass="pl-8"
                         renderBefore={() => <span className="flex flex-col justify-center pl-16 shrink-0">#</span>}
-                        {...register("hashtag")}
+                        {...registerDebounceValidation("hashtag", 1000, trigger, register)}
                     />
                     {errors.hashtag && <p className="input-error">
                         {errors.hashtag.message}

src/utils/validation/misc.ts

@@ -1,4 +1,6 @@
 import * as yup from "yup";
+import { FieldPath, RegisterOptions, UseFormRegister, UseFormRegisterReturn, UseFormTrigger } from 'react-hook-form'
+import debounce from "lodash.debounce";
 
 export const imageSchema = yup.object().shape({
     id: yup.string().nullable(true),
@@ -10,3 +12,25 @@ export const tagSchema = yup.object().shape({
     title: yup.string().trim().min(2).required(),
 });
 
+
+
+export const registerDebounceValidation = <TFieldValues>(
+    name: FieldPath<TFieldValues>,
+    delay: number,
+    trigger: UseFormTrigger<TFieldValues>,
+    register: UseFormRegister<TFieldValues>,
+    options?: RegisterOptions<TFieldValues, FieldPath<TFieldValues>>
+) => {
+    const useFormRegisterReturn: UseFormRegisterReturn = register(name, options)
+    const { onChange } = useFormRegisterReturn
+    const debouncedValidate = debounce(() => {
+        trigger(name)
+    }, delay)
+    return {
+        ...useFormRegisterReturn,
+        onChange: (e: any) => {
+            onChange(e)
+            debouncedValidate()
+        },
+    }
+}