utilize error handling from registration provider

dump-hr · Jan 31, 2025 · 2b9cdae · 2b9cdae
1 parent e6d5170
commit 2b9cdae
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 53 deletions.
diff --git a/apps/app/src/components/ProgressBar/ProgressBar.tsx b/apps/app/src/components/ProgressBar/ProgressBar.tsx
@@ -1,3 +1,4 @@
+import { useRegistration } from '../../providers/RegistrationContext';
 import c from './ProgressBar.module.scss';
 import { ProgressBarTab } from './ProgressBarTab';
 import React from 'react';
@@ -11,17 +12,15 @@ export const ProgressBar = ({
   currentStep,
   setCurrentStep,
 }: ProgressBarProps) => {
-  const isAllowedForNextStep = () => {
-    return true;
-  };
+  const { isStepValid } = useRegistration();
 
   const handleStepClick = (clickedStep: number) => {
     const isGoingBackwards = clickedStep <= currentStep;
     const isGoingForward = clickedStep === currentStep + 1;
-
+    console.log(isStepValid(currentStep));
     if (isGoingBackwards) {
       setCurrentStep(clickedStep);
-    } else if (isGoingForward && isAllowedForNextStep()) {
+    } else if (isGoingForward && isStepValid(currentStep)) {
       setCurrentStep(clickedStep);
     }
   };

diff --git a/.../src/components/RegistrationForms/FirstStepRegistrationForm/FirstStepRegistrationForm.tsx b/.../src/components/RegistrationForms/FirstStepRegistrationForm/FirstStepRegistrationForm.tsx
@@ -1,10 +1,11 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, useEffect } from 'react';
 import { Input } from '../../Input';
 import c from './FirstStepRegistrationForm.module.scss';
 import { Checkbox } from '../../Checkbox';
 import { RegistrationFormErrors } from '../../../types/errors/errors.dto';
 import { validateField } from '../../../helpers/validateInput';
 import { UserDataFields } from '../../../types/user/user.dto';
+import { useRegistration } from '../../../providers/RegistrationContext';
 
 type UserData = {
   firstName: string;
@@ -28,7 +29,16 @@ export const FirstStepRegistrationForm = ({
   updateUserData,
   isSubmitted,
 }: Props) => {
-  const [errors, setErrors] = useState<RegistrationFormErrors>({});
+  const { errors, clearStepErrors, setStepErrors } = useRegistration();
+
+  const firstStepFields: (keyof UserData)[] = [
+    UserDataFields.FirstName,
+    UserDataFields.LastName,
+    UserDataFields.Email,
+    UserDataFields.Password,
+    UserDataFields.RepeatedPassword,
+    UserDataFields.TermsAndConditionsEnabled,
+  ];
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -40,26 +50,52 @@ export const FirstStepRegistrationForm = ({
     updateUserData({ [name]: checked });
   };
 
-  useEffect(() => {
-    if (isSubmitted) {
-      const newErrors: RegistrationFormErrors = {};
+  const validateFirstStep = () => {
+    const newErrors: Partial<RegistrationFormErrors> = {};
 
-      Object.keys(userData).forEach((key) => {
-        const error = validateField(
-          key as keyof UserData,
-          userData[key as keyof UserData],
-          userData,
-        );
+    firstStepFields.forEach((key) => {
+      const error = validateField(key, userData[key], userData);
 
-        if (error) {
-          newErrors[key as keyof RegistrationFormErrors] = error;
-        }
-      });
+      if (error) {
+        newErrors[key] = error;
+      } else {
+        newErrors[key] = '';
+      }
+    });
+
+    if (Object.keys(newErrors).length > 0) {
+      setStepErrors(1, newErrors);
+    } else {
+      clearStepErrors(1);
+    }
+  };
 
-      setErrors(newErrors);
+  useEffect(() => {
+    if (isSubmitted) {
+      validateFirstStep();
     }
   }, [isSubmitted, userData]);
 
+  // useEffect(() => {
+  //   if (isSubmitted) {
+  //     const newErrors: Partial<RegistrationFormErrors> = {};
+
+  //     firstStepFields.forEach((key) => {
+  //       const error = validateField(key, userData[key], userData);
+
+  //       if (error) {
+  //         newErrors[key] = error;
+  //       }
+  //     });
+
+  //     if (Object.keys(newErrors).length > 0) {
+  //       setStepErrors(1, newErrors);
+  //     } else {
+  //       clearStepErrors(1);
+  //     }
+  //   }
+  // }, [isSubmitted, userData, setStepErrors, clearStepErrors]);
+
   return (
     <>
       <div className={c.inputFieldsWrapper}>
@@ -68,36 +104,36 @@ export const FirstStepRegistrationForm = ({
           value={userData.firstName}
           placeholder='Ime'
           onChange={handleInputChange}
-          error={errors.firstName}
+          error={errors[1]?.firstName}
         />
         <Input
           name={UserDataFields.LastName}
           value={userData.lastName}
           placeholder='Prezime'
           onChange={handleInputChange}
-          error={errors.lastName}
+          error={errors[1]?.lastName}
         />
         <Input
           name={UserDataFields.Email}
           value={userData.email}
           placeholder='Email'
           onChange={handleInputChange}
-          error={errors.email}
+          error={errors[1]?.email}
         />
         <Input
           name={UserDataFields.Password}
           value={userData.password}
           placeholder='Lozinka'
           onChange={handleInputChange}
-          error={errors.password}
+          error={errors[1]?.password}
           type='password'
         />
         <Input
           name={UserDataFields.RepeatedPassword}
           value={userData.repeatedPassword}
           placeholder='Potvrdite lozinku'
           onChange={handleInputChange}
-          error={errors.repeatedPassword}
+          error={errors[1]?.repeatedPassword}
           type='password'
         />
       </div>
@@ -108,23 +144,23 @@ export const FirstStepRegistrationForm = ({
           checked={userData.newsletterEnabled}
           name={UserDataFields.NewsletterEnabled}
           onChange={handleCheckboxChange}
-          error={errors.termsAndConditionsEnabled}
+          error={errors[1]?.termsAndConditionsEnabled}
           key={1}
         />
         <Checkbox
           label='Želim primati novosti o tvrtkama i otvorenim radnim pozicijama.'
           checked={userData.companiesNewsEnabled}
           name={UserDataFields.CompaniesNewsEnabled}
           onChange={handleCheckboxChange}
-          error={errors.termsAndConditionsEnabled}
+          error={errors[1]?.termsAndConditionsEnabled}
           key={2}
         />
         <Checkbox
           label='Slažem se s uvjetima i odredbama.'
           checked={userData.termsAndConditionsEnabled}
           name={UserDataFields.TermsAndConditionsEnabled}
           onChange={handleCheckboxChange}
-          error={errors.termsAndConditionsEnabled}
+          error={errors[1]?.termsAndConditionsEnabled}
           key={3}
         />
       </div>

diff --git a/...onents/RegistrationForms/SecondStepRegistrationForm/SecondStepRegistrationForm.module.tsx b/...onents/RegistrationForms/SecondStepRegistrationForm/SecondStepRegistrationForm.module.tsx
@@ -1,11 +1,12 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, useEffect } 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';
 import { UserDataFields } from '../../../types/user/user.dto';
+import { useRegistration } from '../../../providers/RegistrationContext';
 
 type UserData = {
   phoneNumber: string;
@@ -25,7 +26,14 @@ export const SecondStepRegistrationForm = ({
   updateUserData,
   isSubmitted,
 }: Props) => {
-  const [errors, setErrors] = useState<RegistrationFormErrors>({});
+  const { errors, clearStepErrors, setStepErrors } = useRegistration();
+
+  const secondStepFields: (keyof UserData)[] = [
+    UserDataFields.PhoneNumber,
+    UserDataFields.BirthYear,
+    UserDataFields.EducationDegree,
+    UserDataFields.Occupation,
+  ];
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -49,28 +57,54 @@ export const SecondStepRegistrationForm = ({
     });
   };
 
+  const validateFirstStep = () => {
+    const newErrors: Partial<RegistrationFormErrors> = {};
+
+    secondStepFields.forEach((key) => {
+      const error = validateField(key, userData[key], userData);
+
+      if (error) {
+        newErrors[key] = error;
+      } else {
+        newErrors[key] = '';
+      }
+    });
+
+    if (Object.keys(newErrors).length > 0) {
+      setStepErrors(2, newErrors);
+    } else {
+      clearStepErrors(2);
+    }
+  };
+
   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);
+      validateFirstStep();
     }
   }, [isSubmitted, userData]);
 
+  // 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;
+  //       }
+  //     });
+
+  //     setStepErrors(2, newErrors);
+  //   }
+  // }, [isSubmitted, userData, setStepErrors]);
+
   const educationDegreeOptions: DropdownOption[] = [
     { value: 'A', label: 'A' },
     { value: 'B', label: 'B' },
@@ -91,15 +125,15 @@ export const SecondStepRegistrationForm = ({
           value={userData.phoneNumber}
           placeholder='Broj mobitela'
           onChange={handleInputChange}
-          error={errors.phoneNumber}
+          error={errors[2]?.phoneNumber}
         />
 
         <Input
           name={UserDataFields.BirthYear}
           value={userData.birthYear?.toString() || ''}
           placeholder='Godina rođenja'
           onChange={handleInputChange}
-          error={errors.birthYear}
+          error={errors[2]?.birthYear}
         />
 
         <Dropdown
@@ -112,7 +146,7 @@ export const SecondStepRegistrationForm = ({
           selectedOption={educationDegreeOptions.find(
             (option) => option.value === userData.educationDegree,
           )}
-          errorLabel={errors.educationDegree}
+          errorLabel={errors[2]?.educationDegree}
         />
 
         <Dropdown
@@ -125,7 +159,7 @@ export const SecondStepRegistrationForm = ({
           selectedOption={occupationOptions.find(
             (option) => option.value === userData.occupation,
           )}
-          errorLabel={errors.occupation}
+          errorLabel={errors[2]?.occupation}
         />
       </div>
     </>

diff --git a/apps/app/src/pages/RegisterPage/RegisterPage.tsx b/apps/app/src/pages/RegisterPage/RegisterPage.tsx
@@ -1,9 +1,12 @@
 import { GeneralRegistrationForm } from '../../components/RegistrationForms/GeneralRegistrationForm/GeneralRegistrationForm';
+import { RegistrationProvider } from '../../providers/RegistrationContext';
 
 export const RegisterPage = () => {
   return (
     <div>
-      <GeneralRegistrationForm />
+      <RegistrationProvider>
+        <GeneralRegistrationForm />
+      </RegistrationProvider>
     </div>
   );
 };