Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 115x 115x 115x 115x 10x 10x 1x 115x 6x 6x 6x 1x 1x 1x 5x 5x 3x 3x 3x 2x 2x 115x | import { useEffect, useState } from 'react';
import NavLink from '../components/NavLink/NavLink';
import PageNavigation from '../components/PageNavigation/PageNavigation';
import RegistrationForm from '../components/RegistrationForm/RegistrationForm';
import RegistrationsList from '../components/RegistrationsList/RegistrationsList';
import Toast from '../components/Toast/Toast';
import { DOCS_URL } from '../constants/navigation';
import { useRegistrationForm } from '../hooks/useRegistrationForm';
import { useToast } from '../hooks/useToast';
import { getRegistrations, handleSubmit } from '../module/module';
import './LegacyPage.css';
function LegacyPage() {
const {
formValues,
fieldErrors,
setFieldErrors,
onChange,
resetForm,
validateAllFields,
isSubmitDisabled
} = useRegistrationForm();
const { toastMessage, toastType, showToast } = useToast();
const [registrations, setRegistrations] = useState([]);
useEffect(() => {
try {
setRegistrations(getRegistrations());
} catch (error) {
showToast(error.message || 'Une erreur est survenue', 'error');
}
}, [showToast]);
const onSubmit = (e) => {
const nextErrors = validateAllFields();
setFieldErrors(nextErrors);
if (Object.keys(nextErrors).length > 0) {
e.preventDefault();
showToast('Veuillez corriger les erreurs du formulaire.', 'error');
return;
}
try {
const savedRegistration = handleSubmit(e);
setRegistrations((previousRegistrations) => [
...previousRegistrations,
savedRegistration
]);
resetForm();
showToast('Formulaire valide et enregistre.', 'success');
} catch (error) {
e.preventDefault();
showToast(error.message || 'Une erreur est survenue', 'error');
}
};
return (
<div className="legacy-page" data-testid="legacy-page">
<header className="legacy-page-header">
<h1>Mode legacy</h1>
<p>Formulaire et liste des inscrits sur une seule page (comportement initial).</p>
<PageNavigation variant="on-dark" ariaLabel="Navigation legacy">
<NavLink to="/" theme="dark" testId="go-to-home">
Accueil
</NavLink>
<NavLink to="/register" theme="dark" variant="primary" testId="go-to-registration">
Inscription
</NavLink>
<NavLink to="/list" theme="dark" testId="go-to-list">
Liste
</NavLink>
<NavLink href={DOCS_URL} external theme="dark" testId="go-to-docs">
Documentation
</NavLink>
</PageNavigation>
</header>
<RegistrationForm
formValues={formValues}
fieldErrors={fieldErrors}
isSubmitDisabled={isSubmitDisabled}
onChange={onChange}
onSubmit={onSubmit}
/>
<RegistrationsList
registrations={registrations}
title="Liste des inscrits"
headingLevel="h2"
testId="legacy-registrations-list"
/>
<Toast message={toastMessage} type={toastType} />
</div>
);
}
export default LegacyPage;
|