From 465f2a6ceecdbfa38084fe35f1c898f312539ea9 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 29 Sep 2022 17:03:40 +0300
Subject: [PATCH] update: making the validation of hashtag debounced

---
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   |  5 ++--
 src/utils/validation/misc.ts                  | 24 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 9fcdb01..15b1054 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/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}
diff --git a/src/utils/validation/misc.ts b/src/utils/validation/misc.ts
index a13ad9e..1ad6308 100644
--- a/src/utils/validation/misc.ts
+++ b/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()
+        },
+    }
+}
\ No newline at end of file