From ca596cfc5b64e2dd6d00df243fa8850d9c6896ad Mon Sep 17 00:00:00 2001
From: shoonia <alexanderz@wix.com>
Date: Sat, 20 Apr 2024 19:32:20 +0300
Subject: [PATCH] Fix the validation error when page is reload

---
 src/components/Jobs/FunctionInfo.tsx | 27 ++++++---------------------
 src/hooks/useValidator.ts            | 28 ++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 src/hooks/useValidator.ts

diff --git a/src/components/Jobs/FunctionInfo.tsx b/src/components/Jobs/FunctionInfo.tsx
index 3cb812f..262d6f6 100644
--- a/src/components/Jobs/FunctionInfo.tsx
+++ b/src/components/Jobs/FunctionInfo.tsx
@@ -1,28 +1,13 @@
-import type { JSX } from 'preact';
-
 import s from './styles.css';
 import { KEYS } from '../../constants';
 import { Label } from './Label';
 import { useFormScope } from '../../hooks/formScope';
-import { type TValidator, isValidFunctionLocation, isValidFunctionName } from '../../util/validator';
-
-const validatorListener = (validator: TValidator): JSX.InputEventHandler<HTMLInputElement> => {
-  return (event) => {
-    const el = event.currentTarget;
-    const value = el.value.trim();
-
-    if (el.value !== value) {
-      el.value = value;
-    }
-
-    el.setCustomValidity(validator(value) ? '' : 'error');
-  };
-};
-
-export const validatorFunctionName = validatorListener(isValidFunctionName);
-export const validatorFunctionLocation = validatorListener(isValidFunctionLocation);
+import { useValidator } from '../../hooks/useValidator';
+import { isValidFunctionLocation, isValidFunctionName } from '../../util/validator';
 
 export const FunctionInfo: FC = () => {
+  const locationRef = useValidator(isValidFunctionLocation);
+  const nameRef = useValidator(isValidFunctionName);
   const {
     functionLocation,
     functionName,
@@ -34,6 +19,7 @@ export const FunctionInfo: FC = () => {
       <div className={s.location}>
         <Label top="Function Location">
           <input
+            ref={locationRef}
             type="text"
             data-name={KEYS.functionLocation}
             data-fl
@@ -41,7 +27,6 @@ export const FunctionInfo: FC = () => {
             className={s.func_input}
             value={functionLocation}
             placeholder="Function Location"
-            onInput={validatorFunctionLocation}
             spellcheck={false}
             required
           />
@@ -51,6 +36,7 @@ export const FunctionInfo: FC = () => {
         </span>
         <Label top="Function Name">
           <input
+            ref={nameRef}
             type="text"
             data-name={KEYS.functionName}
             data-fl
@@ -58,7 +44,6 @@ export const FunctionInfo: FC = () => {
             className={s.func_input}
             value={functionName}
             placeholder="Function Name"
-            onInput={validatorFunctionName}
             spellcheck={false}
             required
           />
diff --git a/src/hooks/useValidator.ts b/src/hooks/useValidator.ts
new file mode 100644
index 0000000..c8fc629
--- /dev/null
+++ b/src/hooks/useValidator.ts
@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+import type { TValidator } from '../util/validator';
+
+export const useValidator = (validator: TValidator) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+
+    if (node) {
+      const listener = () => {
+        const value = node.value.trim();
+
+        if (node.value !== value) {
+          node.value = value;
+        }
+
+        node.setCustomValidity(validator(value) ? '' : 'error');
+      };
+
+      node.addEventListener('input', listener);
+      listener();
+    }
+  }, []);
+
+  return ref;
+};