utilize validation for 2nd step of registration form

dump-hr · Jan 29, 2025 · 95a7a05 · 95a7a05
1 parent 66ab186
commit 95a7a05
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 4 deletions.
diff --git a/.../app/src/components/RegistrationForms/GeneralRegistrationForm/GeneralRegistrationForm.tsx b/.../app/src/components/RegistrationForms/GeneralRegistrationForm/GeneralRegistrationForm.tsx
@@ -55,6 +55,7 @@ export const GeneralRegistrationForm = () => {
         <SecondStepRegistrationForm
           userData={userData}
           updateUserData={updateUserData}
+          isSubmitted={isSubmitted}
         />
       )}
 

diff --git a/...onents/RegistrationForms/SecondStepRegistrationForm/SecondStepRegistrationForm.module.tsx b/...onents/RegistrationForms/SecondStepRegistrationForm/SecondStepRegistrationForm.module.tsx
@@ -1,8 +1,10 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import c from './SecondStepRegistrationForm.module.scss';
 import { Input } from '../../Input/Input';
 import Dropdown from '../../Dropdown/Dropdown';
 import { DropdownOption } from '../../Dropdown/DropdownOption';
+import { validateField, validations } from '../../../helpers/validateInput';
+import { RegistrationFormErrors } from '../../../types/errors/errors.dto';
 
 type UserData = {
   phoneNumber: string;
@@ -14,17 +16,27 @@ type UserData = {
 type Props = {
   userData: UserData;
   updateUserData: (newData: Partial<UserData>) => void;
+  isSubmitted: boolean;
 };
 
 export const SecondStepRegistrationForm = ({
   userData,
   updateUserData,
+  isSubmitted,
 }: Props) => {
+  const [errors, setErrors] = useState<RegistrationFormErrors>({});
+
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    updateUserData({
-      [name]: name === 'birthYear' ? parseInt(value) || null : value,
-    });
+
+    if (name === 'phoneNumber') {
+      const formattedPhoneNumber = validations.formatPhoneNumber(value);
+      updateUserData({ [name]: formattedPhoneNumber });
+    } else {
+      updateUserData({
+        [name]: name === 'birthYear' ? parseInt(value) || null : value,
+      });
+    }
   };
 
   const handleDropdownChange = (
@@ -36,6 +48,28 @@ export const SecondStepRegistrationForm = ({
     });
   };
 
+  useEffect(() => {
+    if (isSubmitted) {
+      const newErrors: RegistrationFormErrors = {};
+
+      const fieldsToValidate: (keyof UserData)[] = [
+        'phoneNumber',
+        'birthYear',
+        'educationDegree',
+        'occupation',
+      ];
+
+      fieldsToValidate.forEach((field) => {
+        const error = validateField(field, userData[field], userData);
+        if (error) {
+          newErrors[field] = error;
+        }
+      });
+
+      setErrors(newErrors);
+    }
+  }, [isSubmitted, userData]);
+
   const educationDegreeOptions: DropdownOption[] = [
     { value: 'A', label: 'A' },
     { value: 'B', label: 'B' },
@@ -56,13 +90,15 @@ export const SecondStepRegistrationForm = ({
           value={userData.phoneNumber}
           placeholder='Broj mobitela'
           onChange={handleInputChange}
+          error={errors.phoneNumber}
         />
 
         <Input
           name='birthYear'
           value={userData.birthYear?.toString() || ''}
           placeholder='Godina rođenja'
           onChange={handleInputChange}
+          error={errors.birthYear}
         />
 
         <Dropdown
@@ -75,6 +111,7 @@ export const SecondStepRegistrationForm = ({
           selectedOption={educationDegreeOptions.find(
             (option) => option.value === userData.educationDegree,
           )}
+          errorLabel={errors.educationDegree}
         />
 
         <Dropdown
@@ -87,6 +124,7 @@ export const SecondStepRegistrationForm = ({
           selectedOption={occupationOptions.find(
             (option) => option.value === userData.occupation,
           )}
+          errorLabel={errors.occupation}
         />
       </div>
     </>

diff --git a/apps/app/src/helpers/validateInput.ts b/apps/app/src/helpers/validateInput.ts
@@ -89,6 +89,14 @@ export const validateField = (
         return 'Unesite ispravnu godinu rođenja';
       break;
 
+    case 'educationDegree':
+      if (!value) return 'Ovo polje je obavezno!';
+      break;
+
+    case 'occupation':
+      if (!value) return 'Ovo polje je obavezno';
+      break;
+
     case 'termsAndConditionsEnabled':
       if (!value) return 'Morate prihvatiti uvjete korištenja';
       break;