refactor: Rename certain variables + tidy validity funcs

Pensive1 · Apr 13, 2024 · bb4eb88 · bb4eb88
1 parent 1dbfe6a
commit bb4eb88
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/src/components/DobInput/DobInput.tsx b/src/components/DobInput/DobInput.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { DOBInput } from "../../types/ComponentProps";
 import detailedAge from "../../utils/AgeCalc";
 import {
@@ -7,6 +7,7 @@ import {
   dateCheck,
   monthCheck,
   yearCheck,
+  clearErrors,
 } from "../../utils/Validations";
 import "./DobInput-styles.scss";
 
@@ -19,10 +20,31 @@ const DobInput = ({
   const dobMonth = useRef<HTMLInputElement>(null);
   const dobDay = useRef<HTMLInputElement>(null);
 
+  const yearField = dobYear.current;
+  const monthField = dobMonth.current;
+  const dayField = dobDay.current;
+
   const [dateErr, setDateErr] = useState("");
   const [monthErr, setMonthErr] = useState("");
   const [yearErr, setYearErr] = useState("");
 
+  const allValidFields = [
+    dayField?.validity.valid,
+    monthField?.validity.valid,
+    yearField?.validity.valid,
+  ].every((field) => field === true);
+
+  const checkAllFields = () => {
+    if (allValidFields) {
+      //Final check to clear date error : "Must be a valid date" (added onSubmit through handleSubmit)
+      clearErrors(dobDay, setDateErr);
+    }
+  };
+
+  useEffect(() => {
+    checkAllFields();
+  }, [yearField?.value, monthField?.value, dayField?.value]);
+
   // Auto-switch fields
   const nextFieldFocus = (
     currentFieldEl: React.RefObject<HTMLInputElement>,
@@ -37,22 +59,11 @@ const DobInput = ({
 
   const handleSubmit = (e: React.SyntheticEvent): void => {
     e.preventDefault();
-
-    const yearField = dobYear.current;
-    const monthField = dobMonth.current;
-    const dayField = dobDay.current;
-
-    const fieldCollection = yearField && monthField && dayField;
-    const allValidFields = [
-      dayField?.validity.valid,
-      monthField?.validity.valid,
-      yearField?.validity.valid,
-    ].every((fieldIsValid) => fieldIsValid === true);
-    const noErrors = fieldCollection && allValidFields;
-
+    const noEmptyFields = yearField && monthField && dayField;
     const isValidDate =
-      fieldCollection &&
+      noEmptyFields &&
       checkFullDate(dayField?.value, monthField?.value, yearField?.value);
+    const noErrors = noEmptyFields && allValidFields;
 
     if (noErrors && isValidDate) {
       const yearVal = +yearField.value;
@@ -131,6 +142,9 @@ const DobInput = ({
           onInput={() => {
             yearCheck(dobYear, setYearErr);
           }}
+          onChange={() => {
+            yearCheck(dobYear, setYearErr);
+          }}
           onKeyDown={blockInvalidChars}
         ></input>
         <label className="dob__field-label" htmlFor="dobYear">

diff --git a/src/utils/Validations.tsx b/src/utils/Validations.tsx
@@ -27,7 +27,7 @@ export const blockInvalidChars = (e: React.KeyboardEvent) => {
   ["e", "E", "+", "-"].includes(e.key) && e.preventDefault();
 };
 
-const clearErrors = (fieldRef: fieldRef, fnShowErr: fnShowErr) => {
+export const clearErrors = (fieldRef: fieldRef, fnShowErr: fnShowErr) => {
   const field = fieldRef.current;
 
   field?.setCustomValidity("");
@@ -96,6 +96,18 @@ export const yearCheck = (fieldRef: fieldRef, fnShowErr: fnShowErr) => {
   if (yearVal <= 0) {
     return invalidValueErr(fieldRef, fnShowErr, "Invalid year");
   }
+
+  if (
+    yearField?.value &&
+    yearField?.value.length > 1 &&
+    yearField?.value.charAt(0) === "0"
+  ) {
+    return invalidValueErr(
+      fieldRef,
+      fnShowErr,
+      "Years shouldn't start with zero"
+    );
+  }
   clearErrors(fieldRef, fnShowErr);
 };