-
-
-
-
- {error.startDate && (
-
{error.startDate}
- )}
-
+
+
EDUCATION
+
Tell us about your educational background.
+
+
+
+ {errors.education?.[0]?.institution && (
+
+ {errors.education[0].institution.message}
+
+ )}
+
+
+
+ {errors.education?.[0]?.program && (
+
{errors.education[0].program.message}
+ )}
+
+
+
+
+
+ {errors.education?.[0]?.startDate && (
+
+ {errors.education[0].startDate.message}
+
+ )}
+
-
-
-
- {error.endDate &&
{error.endDate}
}
-
+
+
+
+ {errors.education?.[0]?.endDate && (
+
+ {errors.education[0].endDate.message}
+
+ )}
-
+
);
};
+
export default Education;
diff --git a/src/components/MultiFormPage/MultiFormPage.jsx b/src/components/MultiFormPage/MultiFormPage.jsx
index a223b08..d36c658 100644
--- a/src/components/MultiFormPage/MultiFormPage.jsx
+++ b/src/components/MultiFormPage/MultiFormPage.jsx
@@ -1,4 +1,8 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useNavigate } from 'react-router-dom';
+
import Header from '../Header/Header.jsx';
import LeftPane from '../LeftPane/LeftPane.jsx';
import PersonalInfoForm from '../PersonalInfo/PersonalInfoForm.jsx';
@@ -11,11 +15,17 @@ import IconSlide from '../IconSlide/IconSlide.jsx';
import Button from '../Button/Button.jsx';
import ApiKeyInput from '../ApiKeyInput/ApiKeyInput.jsx';
import ErrorState from '../ErrorState/ErrorState.jsx';
+import LoadingState from '../LoadingState/LoadingState.jsx';
+
import { useSubmitPersonalInfo } from '../../hooks/useSubmitPersonalInfo.js';
+import {
+ getFormData,
+ saveFormData,
+ getSettings,
+} from '../../utils/saveData.js';
+import cvSchema from '../../../netlify/utils/schemaValidation.js';
+
import styles from './MultiFormPage.module.css';
-import { getFormData, saveFormData } from '../../utils/saveData.js';
-import LoadingState from '../LoadingState/LoadingState.jsx';
-import { useNavigate } from 'react-router';
const steps = [
'PERSONAL INFO',
@@ -25,159 +35,73 @@ const steps = [
'PROJECTS',
'PROFILE VS JOB CRITERIA',
];
+
+const fieldPaths = {
+ 'PERSONAL INFO': [
+ 'personalInfo.fullName',
+ 'personalInfo.email',
+ 'personalInfo.phone',
+ 'personalInfo.github',
+ 'personalInfo.linkedin',
+ 'personalInfo.portfolio',
+ ],
+ 'PROFESSIONAL SUMMARY': ['professionalSummary.summary'],
+ EXPERIENCE: ['transferableExperience.experience'],
+ EDUCATION: ['education'],
+ PROJECTS: ['projects'],
+ 'PROFILE VS JOB CRITERIA': ['profileVsJobCriteria.jobcriteria'],
+};
+
const MultiFormPage = () => {
+ const navigate = useNavigate();
const savedData = getFormData();
- const [apiKey, setApiKey] = useState(savedData.apiKey || null);
+
const [currentStepIndex, setCurrentStepIndex] = useState(0);
- const [formData, setFormData] = useState(() => {
- return {
- apiKey: savedData.apiKey || '',
- personalInfo: savedData.personalInfo || {},
- professionalSummary: savedData.professionalSummary || {},
- transferableExperience: savedData.transferableExperience || {},
- education: savedData.education || [
- {
- institution: '',
- program: '',
- startDate: '',
- endDate: '',
- },
- ],
- projects: savedData.projects || [
- {
- name: '',
- description: '',
- deployedWebsite: '',
- githubLink: '',
- },
- ],
- profileVsJobCriteria: savedData.profileVsJobCriteria || {},
- };
- });
+ const [hasApiKey, setHasApiKey] = useState(null);
- const [formErrors, setFormErrors] = useState({
- personalInfo: false,
- professionalSummary: false,
- transferableExperience: false,
- education: false,
- projects: false,
- profileVsJobCriteria: false,
+ const methods = useForm({
+ mode: 'onBlur',
+ defaultValues: savedData || {},
+ resolver: yupResolver(cvSchema),
});
- useEffect(() => {
- const handleVisibilityChange = () => {
- if (document.visibilityState === 'hidden') {
- saveFormData(formData);
- }
- };
-
- document.addEventListener('visibilitychange', handleVisibilityChange);
-
- return () => {
- document.removeEventListener('visibilitychange', handleVisibilityChange);
- };
- }, [formData]);
-
- useEffect(() => {
- saveFormData(formData);
- }, [formData]);
+ const { trigger, getValues, watch } = methods;
+ const watchedValues = watch();
const { submitPersonalInfo, loading, error, successMessage, clearError } =
useSubmitPersonalInfo();
- const navigate = useNavigate();
-
- const updateFormError = (step, hasError) => {
- setFormErrors((prev) => ({ ...prev, [step]: hasError }));
- };
const currentStep = steps[currentStepIndex];
- const isStepValid = () => {
- switch (currentStep) {
- case 'PERSONAL INFO': {
- const info = formData.personalInfo;
- return (
- info.fullName &&
- info.email &&
- info.phone &&
- info.github &&
- info.linkedin &&
- info.portfolio &&
- !formErrors.personalInfo
- );
- }
-
- case 'PROFESSIONAL SUMMARY': {
- return (
- formData.professionalSummary.summary?.trim().length >= 150 &&
- !formErrors.professionalSummary
- );
- }
-
- case 'EXPERIENCE': {
- const experienceText =
- formData.transferableExperience?.experience || '';
- return (
- experienceText.trim().length >= 200 &&
- !formErrors.transferableExperience
- );
- }
-
- case 'EDUCATION': {
- const isValidData = formData.education.every((edu) => {
- return (
- edu.institution.trim() &&
- edu.program.trim() &&
- edu.startDate &&
- edu.endDate
- );
- });
- return isValidData && !formErrors.education;
- }
-
- case 'PROJECTS': {
- const isValidData = formData.projects.every((project) => {
- return (
- project.name.trim() &&
- project.description.trim() &&
- project.githubLink.trim() &&
- !formErrors.projects
- );
- });
- return isValidData;
- }
+ useEffect(() => {
+ const settings = getSettings();
+ setHasApiKey(!!settings?.apiKey?.trim());
+ }, []);
- case 'PROFILE VS JOB CRITERIA': {
- const criteria = formData.profileVsJobCriteria?.jobcriteria;
- return (
- criteria?.trim().length > 200 && !formErrors.profileVsJobCriteria
- );
- }
+ const onApiKeySaved = () => setHasApiKey(true);
- default:
- return true;
- }
- };
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ saveFormData(watchedValues);
+ }, 500);
+ return () => clearTimeout(timer);
+ }, [watchedValues]);
useEffect(() => {
if (error) {
setCurrentStepIndex(0);
- const timer = setTimeout(() => {
- clearError();
- }, 3000);
-
+ const timer = setTimeout(() => clearError(), 3000);
return () => clearTimeout(timer);
}
}, [error, clearError]);
- const handleNext = () => {
- if (!isStepValid()) {
- alert('Please fill in all required fields before proceeding.');
+ const handleNext = async () => {
+ const valid = await trigger(fieldPaths[currentStep]);
+ if (!valid) {
+ alert('Please fix the errors before continuing.');
return;
}
- if (currentStepIndex < steps.length - 1) {
- setCurrentStepIndex((prev) => prev + 1);
- }
+ setCurrentStepIndex((prev) => prev + 1);
};
const handlePrevious = () => {
@@ -187,183 +111,101 @@ const MultiFormPage = () => {
};
const handleSubmit = async () => {
- if (!isStepValid()) {
- alert('Please fill in all required fields before proceeding.');
+ const valid = await trigger(fieldPaths[currentStep]);
+ if (!valid) {
+ alert('Please fix the errors before submitting.');
return;
}
+
try {
- await submitPersonalInfo(formData, (cvData) => {
- navigate('/preview', { state: { cvData, formData } });
+ const data = getValues();
+ const settings = getSettings();
+ await submitPersonalInfo(data, (cvData) => {
+ navigate('/preview', {
+ state: {
+ cvData,
+ formData: data,
+ settings,
+ },
+ });
});
- } catch (error) {
- console.error('Form submission failed:', error);
+ } catch (err) {
+ console.error('Form submission failed:', err);
alert('There was an issue submitting the form. Please try again.');
}
};
- const handleProjectChange = useCallback(
- (data) => {
- setFormData((prev) => ({
- ...prev,
- projects: Array.isArray(data) ? data : [data],
- }));
- },
- [setFormData]
- );
-
- const handleEducationChange = useCallback(
- (data) => {
- setFormData((prev) => ({
- ...prev,
- education: Array.isArray(data) ? data : [data],
- }));
- },
- [setFormData]
- );
-
const renderStep = () => {
switch (currentStep) {
case 'PERSONAL INFO':
- return (
-
- setFormData((prev) => ({ ...prev, personalInfo: data }))
- }
- onErrorChange={(hasError) =>
- updateFormError('personalInfo', hasError)
- }
- />
- );
+ return ;
case 'PROFESSIONAL SUMMARY':
- return (
-
- setFormData((prev) => ({ ...prev, professionalSummary: data }))
- }
- onErrorChange={(hasError) =>
- updateFormError('professionalSummary', hasError)
- }
- />
- );
+ return ;
case 'EXPERIENCE':
- return (
-
- setFormData((prev) => ({ ...prev, transferableExperience: data }))
- }
- onErrorChange={(hasError) =>
- updateFormError('transferableExperience', hasError)
- }
- />
- );
+ return ;
case 'EDUCATION':
- return (
-
- );
+ return ;
case 'PROJECTS':
- return (
-
- );
-
+ return ;
case 'PROFILE VS JOB CRITERIA':
- return (
-
- setFormData((prev) => ({ ...prev, profileVsJobCriteria: data }))
- }
- onErrorChange={(hasError) =>
- updateFormError('profileVsJobCriteria', hasError)
- }
- />
- );
+ return ;
default:
return null;
}
};
- const Overlay = (
-
-
-
- );
+
+ if (hasApiKey === null) return null;
return (
-
- {!apiKey && (
-
{
- setApiKey(key);
- setFormData((prev) => ({
- ...prev,
- apiKey: key,
- }));
- }}
- />
- )}
- {apiKey && (
- <>
-
+
+
+ {!hasApiKey ? (
+
+ ) : (
+ <>
+
+
+ {error && (
+
+
+
+ )}
- {error && (
-
-
-
- )}
+
+
+
+
-
-
-
-
+
+
+
-
-
+
+ {renderStep()}
+
+
+ {currentStepIndex > 0 && (
+
+ )}
+ {currentStepIndex < steps.length - 1 ? (
+
+ ) : (
+
+ )}
+
+
-
- {renderStep()}
-
-
- {currentStepIndex > 0 && (
-
- )}
- {currentStepIndex < steps.length - 1 ? (
-
- ) : (
-
- )}
+ {loading && (
+
+
-
-
- {loading && Overlay}
- {successMessage &&
{successMessage}
}
-
- )}
- ;
-
+ )}
+ {successMessage &&
{successMessage}
}
+
+ )}
+
+
);
};
diff --git a/src/components/PersonalInfo/PersonalInfoForm.jsx b/src/components/PersonalInfo/PersonalInfoForm.jsx
index fe69c77..4510979 100644
--- a/src/components/PersonalInfo/PersonalInfoForm.jsx
+++ b/src/components/PersonalInfo/PersonalInfoForm.jsx
@@ -1,142 +1,88 @@
-import React, { useState } from 'react';
import styles from './PersonalInfo.module.css';
-import isValidUrl from '../../utils/validation.js';
+import { useFormContext } from 'react-hook-form';
-const PersonalInfoForm = ({ data, onPersonalInfoChange, onErrorChange }) => {
- const [personalData, setPersonalData] = useState({
- fullName: data?.fullName || '',
- email: data?.email || '',
- phone: data?.phone || '',
- github: data?.github || '',
- linkedin: data?.linkedin || '',
- portfolio: data?.portfolio || '',
- });
-
- const [error, setError] = useState('');
-
- const handleChange = (e) => {
- const updatedData = { ...personalData, [e.target.name]: e.target.value };
- setPersonalData(updatedData);
- };
-
- const validateInputs = () => {
- if (
- !personalData.fullName.trim() ||
- !personalData.email.trim() ||
- !personalData.phone.trim() ||
- !personalData.github.trim() ||
- !personalData.linkedin.trim() ||
- !personalData.portfolio.trim()
- ) {
- return 'All fields are required.';
- }
- if (!isValidUrl(personalData.github)) {
- return 'Please enter a valid GitHub URL.';
- }
- if (!isValidUrl(personalData.linkedin)) {
- return 'Please enter a valid LinkedIn URL.';
- }
-
- if (!isValidUrl(personalData.portfolio)) {
- return 'Please enter a valid Portfolio URL.';
- }
- return '';
- };
-
- const handleBlur = () => {
- const validationError = validateInputs();
- setError(validationError);
- onErrorChange(!!validationError);
-
- if (!validationError) {
- onPersonalInfoChange(personalData);
- }
- };
+const PersonalInfoForm = () => {
+ const {
+ register,
+ formState: { errors },
+ } = useFormContext();
return (
-