-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Appel du back-end depuis le formulaire #207
Changes from 4 commits
4a3f3e5
b7a4f11
e9bb3a5
4787e1f
8f2119f
49aff14
f4cab3e
5dfd4eb
06c4822
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,17 @@ | ||||||
import React from 'react'; | ||||||
import PropTypes from 'prop-types'; | ||||||
|
||||||
export default function Alert({ children, titre }) { | ||||||
return ( | ||||||
<div className="fr-alert fr-alert--error"> | ||||||
<h3 className="fr-alert__title">{titre}</h3> | ||||||
<p>{children}</p> | ||||||
</div> | ||||||
); | ||||||
} | ||||||
|
||||||
Alert.propTypes = { | ||||||
children: PropTypes.node, | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Dans notre exemple, c'est une string, mais on veut pouvoir mettre du JSX |
||||||
titre: PropTypes.string, | ||||||
}; | ||||||
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -6,6 +6,7 @@ import Disponibilite from './Disponibilite'; | |||||
import Motivation from './Motivation'; | ||||||
import EnResume from './EnResume'; | ||||||
import { useScrollToSection } from '../../hooks/useScrollToSection'; | ||||||
import { useNavigate } from 'react-router-dom'; | ||||||
|
||||||
import '@gouvfr/dsfr/dist/component/form/form.min.css'; | ||||||
import '@gouvfr/dsfr/dist/component/input/input.min.css'; | ||||||
|
@@ -14,25 +15,46 @@ import '@gouvfr/dsfr/dist/component/radio/radio.min.css'; | |||||
import '@gouvfr/dsfr/dist/component/badge/badge.min.css'; | ||||||
import '@gouvfr/dsfr/dist/component/notice/notice.min.css'; | ||||||
import '@gouvfr/dsfr/dist/component/sidemenu/sidemenu.min.css'; | ||||||
import '@gouvfr/dsfr/dist/component/alert/alert.min.css'; | ||||||
import './CandidatureConseiller.css'; | ||||||
import { useApiAdmin } from './useApiAdmin'; | ||||||
import Alert from '../../components/commun/Alert'; | ||||||
|
||||||
export default function CandidatureConseiller() { | ||||||
const [dateDisponibilite, setDateDisponibilite] = useState(''); | ||||||
const [isSituationValid, setIsSituationValid] = useState(true); | ||||||
|
||||||
const [validationError, setValidationError] = useState(); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
const { buildConseillerData, creerCandidatureConseiller } = useApiAdmin(); | ||||||
const navigate = useNavigate(); | ||||||
useScrollToSection(); | ||||||
|
||||||
const validerLaCandidature = event => { | ||||||
const estSituationRemplie = formData => { | ||||||
const demandeurEmploi = formData.get('estDemandeurEmploi'); | ||||||
const enEmploi = formData.get('estEnEmploi'); | ||||||
const enFormation = formData.get('estEnFormation'); | ||||||
const diplome = formData.get('estDiplomeMedNum'); | ||||||
|
||||||
return demandeurEmploi || enEmploi || enFormation || diplome; | ||||||
}; | ||||||
|
||||||
const validerLaCandidature = async event => { | ||||||
event.preventDefault(); | ||||||
|
||||||
const formData = new FormData(event.currentTarget); | ||||||
const situations = formData.get('situations'); | ||||||
|
||||||
if (situations === null) { | ||||||
if (!estSituationRemplie(formData)) { | ||||||
setIsSituationValid(false); | ||||||
document.getElementById('situation-et-experience').scrollIntoView(); | ||||||
} else { | ||||||
event.currentTarget.submit(); | ||||||
const conseillerData = await buildConseillerData(formData); | ||||||
const resultatCreation = await creerCandidatureConseiller(conseillerData); | ||||||
if (resultatCreation.status >= 400) { | ||||||
const error = await resultatCreation.json(); | ||||||
setValidationError(error.message); | ||||||
window.scrollTo({ top: 0, behavior: 'smooth' }); | ||||||
Alezco marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
} else { | ||||||
navigate('/candidature-validee'); | ||||||
Alezco marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
} | ||||||
} | ||||||
}; | ||||||
|
||||||
|
@@ -45,7 +67,17 @@ export default function CandidatureConseiller() { | |||||
<div className="fr-col-12 fr-col-md-8 fr-py-12v"> | ||||||
<h1 className="cc-titre fr-mb-5w">Je veux devenir conseiller numérique</h1> | ||||||
<p className="fr-text--sm fr-hint-text">Les champs avec <span className="cc-obligatoire">*</span> sont obligatoires.</p> | ||||||
<form aria-label="Candidature conseiller" onSubmit={validerLaCandidature}> | ||||||
{validationError && | ||||||
<div className="fr-pb-2w"> | ||||||
<Alert titre="Erreur de validation"> | ||||||
{validationError} | ||||||
</Alert> | ||||||
Alezco marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
</div> | ||||||
} | ||||||
<form | ||||||
aria-label="Candidature conseiller" | ||||||
onSubmit={validerLaCandidature} | ||||||
> | ||||||
<InformationsDeContact /> | ||||||
<SituationEtExperience isSituationValid={isSituationValid} /> | ||||||
<Disponibilite setDateDisponibilite={setDateDisponibilite} /> | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -26,10 +26,10 @@ export default function InformationsDeContact() { | |
<Input | ||
id="telephone" | ||
type="tel" | ||
pattern="0[1-9]{9}" | ||
pattern="[+](33|590|596|594|262|269|687)[1-9]{9}" | ||
isRequired={false} | ||
> | ||
Téléphone <span className="fr-hint-text">Format attendu : 0122334455</span> | ||
Téléphone <span className="fr-hint-text">Format attendu : +33122334455</span> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. C'est une demande métier ?!? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Pour l'instant c'est pour matcher avec le back, mais on pourra modifier ça dans une prochaine PR si besoin |
||
</Input> | ||
<AddressChooser /> | ||
</fieldset> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,18 @@ | ||
export const situations = [ | ||
{ | ||
id: 'demandeurEmploi', | ||
id: 'estDemandeurEmploi', | ||
libelle: 'Demandeur d’emploi', | ||
}, | ||
{ | ||
id: 'enEmploi', | ||
id: 'estEnEmploi', | ||
libelle: 'En emploi', | ||
}, | ||
{ | ||
id: 'enFormation', | ||
id: 'estEnFormation', | ||
libelle: 'En formation', | ||
}, | ||
{ | ||
id: 'diplome', | ||
id: 'estDiplomeMedNum', | ||
libelle: 'Diplômé dans le secteur de la médiation numérique (formation certifiante ou non)', | ||
} | ||
]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
C'est bien un titre, et c'est ce qui est proposé par le DSFR