App.cs

import './App.css';
import { useState } from 'react';
import InputCV from './components/inputCV.js'
import OutputCV from './components/outputCV.js'

export default function App() {
    // States
    const [introduction, setIntroduction] = useState({
        firstName: '',
        lastName: '',
        phoneNumber: '',
        email: '',
        linkedIn: '',
        website: '',
    })

    const [summary, setSummary] = useState('');

    const [workHistory, setWorkHistory] = useState([{
        id: 0,
        jobName: '',
        jobPosition: '',
        startDate: '',
        endDate: '',
        jobDescription: ''
    }]);

    const [educationHistory, setEducationHistory] = useState([{
        id: 0,
        educationName: '',
        certificateName: '',
        dateAcquired: '',
        educationDescription: ''
    }]);

    const [counters, setCounters] = useState([{
        workHistory: 1,
        educationHistory: 1
    }])
    // Helper Functions
    const onIntroductionChange = (event, toUpdate) => {
        let newIntroduction = introduction;
        switch (toUpdate) {
            case 'firstName':
                newIntroduction.firstName = event.target.value;
                break;
            case 'lastName':
                newIntroduction.lastName = event.target.value;
                break;
            case 'phoneNumber':
                newIntroduction.phoneNumber = event.target.value;
                break;
            case 'email':
                newIntroduction.email = event.target.value;
                break;
            case 'linkedIn':
                newIntroduction.linkedIn = event.target.value;
                break;
            case 'website':
                newIntroduction.website = event.target.value;
                break;
            default:
                throw new Error("There's something wrong with onIntroductionChange()");
        }
        return newIntroduction
    }

    const onWorkHistoryChange = (event, toUpdate, index) => {
        let newWorkHistory = workHistory;
        switch (toUpdate) {
            case 'jobName':
                newWorkHistory[index].jobName = event.target.value;
                break;
            case 'jobPosition':
                newWorkHistory[index].jobPosition = event.target.value;
                break;
            case 'startDate':
                newWorkHistory[index].startDate = event.target.value;
                break;
            case 'endDate':
                newWorkHistory[index].endDate = event.target.value;
                break;
            case 'jobDescription':
                newWorkHistory[index].jobDescription = event.target.value;
                break;
            default:
                throw new Error("There's something wrong with onWorkHistoryChange()");
        }
        return newWorkHistory;
    }

    const onEducationChange = (event, toUpdate, index) => {
        let newEducationHistory = educationHistory;
        switch (toUpdate) {
            case 'educationName':
                newEducationHistory[index].educationName = event.target.value;
                break;
            case 'certificateName':
                newEducationHistory[index].certificateName = event.target.value;
                break;
            case 'dateAcquired':
                newEducationHistory[index].dateAcquired = event.target.value;
                break;
            case 'educationDescription':
                newEducationHistory[index].educationDescription = event.target.value;
                break;
            default:
                throw new Error("There's something wrong with onEducationChange()");
        }
        return newEducationHistory;
    }

    return (
        <div className="App">
            <Header />
            <InputCV
                counter={counters}
                setCounter={setCounters}
                setIntroduction={setIntroduction}
                onIntroductionChange={onIntroductionChange}
                onWorkHistoryChange={onWorkHistoryChange}
                onEducationChange={onEducationChange}
                summary={summary}
                setSummary={setSummary}
                />
            <OutputCV
                introduction={introduction}
                summary={summary}
                workHistory={workHistory}
                educationHistory={educationHistory}
            />
        </div>
    );
}

function Header() {
    return (
        <header>
            <h1>Simple-CV</h1>
        </header>
    )
}