Fix tests & improve pre-register

src/components/AddEnvie/__tests__/__snapshots__/AddEnvie.tsx.snap

@@ -9,52 +9,52 @@ exports[`<AddEnvie /> renders 1`] = `
   </h2>
   <form>
     <label
-      for="postDomaine"
+      for="postDomain"
     >
       Domaine:
       <input
-        id="postDomaine"
-        name="postDomaine"
+        id="postDomain"
+        name="postDomain"
         type="text"
         value=""
       />
     </label>
     <label
-      for="postEnvies"
+      for="postWish"
     >
       Envies:
       <textarea
-        id="postEnvies"
-        name="postEnvies"
+        id="postWish"
+        name="postWish"
       />
     </label>
     <label
-      for="postPrecisions"
+      for="postDetails"
     >
       Precisions:
       <textarea
-        id="postPrecisions"
-        name="postPrecisions"
+        id="postDetails"
+        name="postDetails"
       />
     </label>
     <label
-      for="postEquipes"
+      for="postTeams"
     >
       Equipes:
       <input
-        id="postEquipes"
-        name="postEquipes"
+        id="postTeams"
+        name="postTeams"
         type="text"
         value=""
       />
     </label>
     <label
-      for="postDateAjout"
+      for="postAddedDate"
     >
-      DateAjout:
+      Date dajout:
       <input
-        id="postDateAjout"
-        name="postDateAjout"
+        id="postAddedDate"
+        name="postAddedDate"
         type="date"
         value=""
       />

src/components/AddEnvie/index.tsx

@@ -1,50 +1,49 @@
 import React, { useState, memo } from "react"
 import { toast } from "react-toastify"
+import styles from "./styles.module.scss"
 
 import { AppDispatch } from "../../store"
-
 import { fetchEnvieAdd } from "../../store/envieAdd"
-import styles from "./styles.module.scss"
 
 interface Props {
     dispatch: AppDispatch
 }
 
 const AddEnvie = ({ dispatch }: Props) => {
-    const [domaine, setDomaine] = useState("")
-    const [envies, setEnvies] = useState("")
-    const [precisions, setPrecisions] = useState("")
-    const [equipes, setEquipes] = useState([""])
-    const [dateAjout, setDateAjout] = useState("")
+    const [domain, setDomain] = useState("")
+    const [wish, setWish] = useState("")
+    const [details, setDetails] = useState("")
+    const [teams, setTeams] = useState([""])
+    const [addedDate, setAddedDate] = useState("")
 
-    const onDomaineChanged = (e: React.ChangeEvent<HTMLInputElement>) => setDomaine(e.target.value)
-    const onEnviesChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => setEnvies(e.target.value)
-    const onPrecisionsChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
-        setPrecisions(e.target.value)
-    const onEquipesChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
-        setEquipes(e.target.value.split(/, ?/))
-    const onDateAjoutChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
-        setDateAjout(e.target.value)
+    const onDomainChanged = (e: React.ChangeEvent<HTMLInputElement>) => setDomain(e.target.value)
+    const onWishChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => setWish(e.target.value)
+    const onDetailsChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+        setDetails(e.target.value)
+    const onTeamsChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setTeams(e.target.value.split(/, ?/))
+    const onAddedDateChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setAddedDate(e.target.value)
 
     const onSavePostClicked = () => {
-        if (domaine && envies) {
+        if (domain && wish) {
             dispatch(
                 fetchEnvieAdd({
-                    domaine,
-                    envies,
-                    precisions,
-                    equipes,
-                    dateAjout,
+                    domain,
+                    wish,
+                    details,
+                    teams,
+                    addedDate,
                 })
             )
 
-            setDomaine("")
-            setEnvies("")
-            setPrecisions("")
-            setEquipes([""])
-            setDateAjout("")
+            setDomain("")
+            setWish("")
+            setDetails("")
+            setTeams([""])
+            setAddedDate("")
         } else {
-            toast.warning("Il faut au moins préciser un domaine et l'envie", {
+            toast.warning("Il faut au moins préciser un domain et l'envie", {
                 position: "top-center",
                 autoClose: 6000,
                 hideProgressBar: true,
@@ -59,52 +58,47 @@ const AddEnvie = ({ dispatch }: Props) => {
         <section className={styles.EnvieList}>
             <h2>Ajouter une nouvelle envie</h2>
             <form>
-                <label htmlFor="postDomaine">
+                <label htmlFor="postDomain">
                     Domaine:
                     <input
                         type="text"
-                        id="postDomaine"
-                        name="postDomaine"
-                        value={domaine}
-                        onChange={onDomaineChanged}
+                        id="postDomain"
+                        name="postDomain"
+                        value={domain}
+                        onChange={onDomainChanged}
                     />
                 </label>
-                <label htmlFor="postEnvies">
+                <label htmlFor="postWish">
                     Envies:
-                    <textarea
-                        id="postEnvies"
-                        name="postEnvies"
-                        value={envies}
-                        onChange={onEnviesChanged}
-                    />
+                    <textarea id="postWish" name="postWish" value={wish} onChange={onWishChanged} />
                 </label>
-                <label htmlFor="postPrecisions">
+                <label htmlFor="postDetails">
                     Precisions:
                     <textarea
-                        id="postPrecisions"
-                        name="postPrecisions"
-                        value={precisions}
-                        onChange={onPrecisionsChanged}
+                        id="postDetails"
+                        name="postDetails"
+                        value={details}
+                        onChange={onDetailsChanged}
                     />
                 </label>
-                <label htmlFor="postEquipes">
+                <label htmlFor="postTeams">
                     Equipes:
                     <input
                         type="text"
-                        id="postEquipes"
-                        name="postEquipes"
-                        value={equipes.join(", ")}
-                        onChange={onEquipesChanged}
+                        id="postTeams"
+                        name="postTeams"
+                        value={teams.join(", ")}
+                        onChange={onTeamsChanged}
                     />
                 </label>
-                <label htmlFor="postDateAjout">
-                    DateAjout:
+                <label htmlFor="postAddedDate">
+                    Date dajout:
                     <input
                         type="date"
-                        id="postDateAjout"
-                        name="postDateAjout"
-                        value={dateAjout}
-                        onChange={onDateAjoutChanged}
+                        id="postAddedDate"
+                        name="postAddedDate"
+                        value={addedDate}
+                        onChange={onAddedDateChanged}
                     />
                 </label>
                 <button type="button" onClick={onSavePostClicked}>

src/components/JeuJavList/__tests__/JeuJavList.tsx

@@ -28,21 +28,20 @@ describe("<List />", () => {
             entities: {
                 "5": {
                     id: 5,
-                    titre: "6 qui prend!",
-                    auteur: "Wolfgang Kramer",
-                    editeur: "(uncredited) , Design Edge , B",
-                    minJoueurs: 2,
-                    maxJoueurs: 10,
-                    duree: 45,
+                    title: "6 qui prend!",
+                    author: "Wolfgang Kramer",
+                    editor: "(uncredited) , Design Edge , B",
+                    playersMin: 2,
+                    playersMax: 10,
+                    duration: 45,
                     type: "Ambiance",
                     poufpaf: "0-9-2/6-qui-prend-6-nimmt",
-                    photo: "https://cf.geekdo-images.com/thumb/img/lzczxR5cw7an7tRWeHdOrRtLyes=/fit-in/200x150/pic772547.jpg",
-                    bggPhoto: "",
+                    bggPhoto:
+                        "https://cf.geekdo-images.com/thumb/img/lzczxR5cw7an7tRWeHdOrRtLyes=/fit-in/200x150/pic772547.jpg",
                     bggId: 432,
-                    exemplaires: 1,
-                    dispoPret: 1,
-                    nonRangee: 0,
-                    horodatage: "0000-00-00",
+                    copies: 1,
+                    lendAvailability: 1,
+                    notStored: 0,
                     ean: "3421272101313",
                 },
             },

src/components/JeuJavList/index.tsx

@@ -21,10 +21,10 @@ const JeuJavList = ({ ids }: Props) => {
                     if (!jeu) {
                         return <li key={id}>Le jeu #{id} n&apos;existe pas</li>
                     }
-                    const { titre, bggId } = jeu
+                    const { title, bggId } = jeu
                     return (
                         <li key={id}>
-                            {titre} - [{bggId}]
+                            {title} - [{bggId}]
                         </li>
                     )
                 })}

src/components/MembreInfo/__tests__/MembreInfo.tsx

@@ -13,18 +13,18 @@ describe("<MembreInfo />", () => {
                 <MembreInfo
                     item={{
                         id: 1,
-                        nom: "Aupeix",
-                        prenom: "Amélie",
-                        mail: "pakouille.lakouille@yahoo.fr",
-                        telephone: "0675650392",
+                        firstname: "Aupeix",
+                        lastname: "Amélie",
+                        email: "pakouille.lakouille@yahoo.fr",
+                        mobile: "0675650392",
                         photo: "images/membres/$taille/amélie_aupeix.jpg",
-                        alimentation: "Végétarien",
-                        majeur: 1,
-                        privilege: 0,
-                        actif: 0,
-                        commentaire: "",
-                        horodatage: "0000-00-00",
-                        passe: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPlobkyRrNIal8ASimSjNj4SR.9O",
+                        food: "Végétarien",
+                        adult: 1,
+                        privileges: 0,
+                        active: 0,
+                        comment: "",
+                        timestamp: "0000-00-00",
+                        password: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
                     }}
                 />
             </MemoryRouter>

src/components/MembreInfo/__tests__/__snapshots__/MembreInfo.tsx.snap

@@ -10,11 +10,11 @@ exports[`<MembreInfo /> renders 1`] = `
   <ul>
     <li>
       Prénom: 
-      Amélie
+      Aupeix
     </li>
     <li>
       Nom: 
-      Aupeix
+      Amélie
     </li>
   </ul>
 </div>

src/components/MembreInfo/index.tsx

@@ -11,8 +11,8 @@ const MembreInfo = ({ item }: Props) => (
     <div className={styles.MembreCard}>
         <h4>Membre Info</h4>
         <ul>
-            <li>Prénom: {item.prenom}</li>
-            <li>Nom: {item.nom}</li>
+            <li>Prénom: {item.firstname}</li>
+            <li>Nom: {item.lastname}</li>
         </ul>
     </div>
 )

src/components/MembreList/__tests__/MembreList.tsx

@@ -14,18 +14,19 @@ describe("<MembreList />", () => {
                     items={[
                         {
                             id: 1,
-                            nom: "Aupeix",
-                            prenom: "Amélie",
-                            mail: "pakouille.lakouille@yahoo.fr",
-                            telephone: "0675650392",
+                            firstname: "Aupeix",
+                            lastname: "Amélie",
+                            email: "pakouille.lakouille@yahoo.fr",
+                            mobile: "0675650392",
                             photo: "images/membres/$taille/amélie_aupeix.jpg",
-                            alimentation: "Végétarien",
-                            majeur: 1,
-                            privilege: 0,
-                            actif: 0,
-                            commentaire: "",
-                            horodatage: "0000-00-00",
-                            passe: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPlobkyRrNIal8ASimSjNj4SR.9O",
+                            food: "Végétarien",
+                            adult: 1,
+                            privileges: 0,
+                            active: 0,
+                            comment: "",
+                            timestamp: "0000-00-00",
+                            password:
+                                "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
                         },
                     ]}
                 />

src/components/MembreList/__tests__/__snapshots__/MembreList.tsx.snap

@@ -13,10 +13,10 @@ exports[`<MembreList /> renders 1`] = `
         href="/Membre/1"
       >
         <b>
-          Amélie
+          Aupeix
         </b>
          
-        Aupeix
+        Amélie
       </a>
     </li>
   </ul>

src/components/MembreList/index.tsx

@@ -12,10 +12,10 @@ const MembreList = ({ items }: Props) => (
     <div className={styles["user-list"]}>
         <h4>Membre List</h4>
         <ul>
-            {items.map(({ id, nom, prenom }) => (
+            {items.map(({ id, lastname, firstname }) => (
                 <li key={id}>
                     <Link to={`/Membre/${id}`}>
-                        <b>{prenom}</b> {nom}
+                        <b>{firstname}</b> {lastname}
                     </Link>
                 </li>
             ))}

src/components/MembreSet/__tests__/MembreSet.tsx

@@ -15,18 +15,18 @@ describe("<SetMembre />", () => {
                     dispatch={dispatch}
                     membre={{
                         id: 1,
-                        nom: "Aupeix",
-                        prenom: "Amélie",
-                        mail: "pakouille.lakouille@yahoo.fr",
-                        telephone: "0675650392",
+                        firstname: "Aupeix",
+                        lastname: "Amélie",
+                        email: "pakouille.lakouille@yahoo.fr",
+                        mobile: "0675650392",
                         photo: "images/membres/$taille/amélie_aupeix.jpg",
-                        alimentation: "Végétarien",
-                        majeur: 1,
-                        privilege: 0,
-                        actif: 0,
-                        commentaire: "",
-                        horodatage: "0000-00-00",
-                        passe: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPlobkyRrNIal8ASimSjNj4SR.9O",
+                        food: "Végétarien",
+                        adult: 1,
+                        privileges: 0,
+                        active: 0,
+                        comment: "",
+                        timestamp: "0000-00-00",
+                        password: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",
                     }}
                 />
             </MemoryRouter>

src/components/MembreSet/__tests__/__snapshots__/MembreSet.tsx.snap

@@ -9,34 +9,34 @@ exports[`<SetMembre /> renders 1`] = `
   </h2>
   <form>
     <label
-      for="postPrenom"
+      for="postFirstname"
     >
-      Prenom:
+      Prénom:
       <input
-        id="postPrenom"
-        name="postPrenom"
-        type="text"
-        value="Amélie"
-      />
-    </label>
-    <label
-      for="postNom"
-    >
-      Nom:
-      <input
-        id="postNom"
-        name="postNom"
+        id="postFirstname"
+        name="postFirstname"
         type="text"
         value="Aupeix"
       />
     </label>
     <label
-      for="postMajeur"
+      for="postName"
+    >
+      Nom:
+      <input
+        id="postName"
+        name="postName"
+        type="text"
+        value="Amélie"
+      />
+    </label>
+    <label
+      for="postAdult"
     >
       Majeur:
       <input
-        id="postMajeur"
-        name="postMajeur"
+        id="postAdult"
+        name="postAdult"
         type="text"
         value="1"
       />

src/components/MembreSet/index.tsx

@@ -13,22 +13,23 @@ interface Props {
 }
 
 const MembreSet = ({ dispatch, membre }: Props) => {
-    const [prenom, setPrenom] = useState(membre.prenom)
-    const [nom, setNom] = useState(membre.nom)
-    const [majeur, setMajeur] = useState(membre.majeur)
+    const [firstname, setFirstname] = useState(membre.firstname)
+    const [lastname, setName] = useState(membre.lastname)
+    const [adult, setAdult] = useState(membre.adult)
 
-    const onPrenomChanged = (e: React.ChangeEvent<HTMLInputElement>) => setPrenom(e.target.value)
-    const onNomChanged = (e: React.ChangeEvent<HTMLInputElement>) => setNom(e.target.value)
-    const onMajeurChanged = (e: React.ChangeEvent<HTMLInputElement>) => setMajeur(+e.target.value)
+    const onFirstnameChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setFirstname(e.target.value)
+    const onNameChanged = (e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)
+    const onAdultChanged = (e: React.ChangeEvent<HTMLInputElement>) => setAdult(+e.target.value)
 
     const onSavePostClicked = () => {
-        if (prenom && nom) {
+        if (firstname && lastname) {
             dispatch(
                 fetchMembreSet({
                     ...membre,
-                    prenom,
-                    nom,
-                    majeur,
+                    firstname,
+                    lastname,
+                    adult,
                 })
             )
         } else {
@@ -47,34 +48,34 @@ const MembreSet = ({ dispatch, membre }: Props) => {
         <section className={styles.MembreList}>
             <h2>Modifier un membre</h2>
             <form>
-                <label htmlFor="postPrenom">
-                    Prenom:
+                <label htmlFor="postFirstname">
+                    Prénom:
                     <input
                         type="text"
-                        id="postPrenom"
-                        name="postPrenom"
-                        value={prenom}
-                        onChange={onPrenomChanged}
+                        id="postFirstname"
+                        name="postFirstname"
+                        value={firstname}
+                        onChange={onFirstnameChanged}
                     />
                 </label>
-                <label htmlFor="postNom">
+                <label htmlFor="postName">
                     Nom:
                     <input
                         type="text"
-                        id="postNom"
-                        name="postNom"
-                        value={nom}
-                        onChange={onNomChanged}
+                        id="postName"
+                        name="postName"
+                        value={lastname}
+                        onChange={onNameChanged}
                     />
                 </label>
-                <label htmlFor="postMajeur">
+                <label htmlFor="postAdult">
                     Majeur:
                     <input
                         type="text"
-                        id="postMajeur"
-                        name="postMajeur"
-                        value={majeur}
-                        onChange={onMajeurChanged}
+                        id="postAdult"
+                        name="postAdult"
+                        value={adult}
+                        onChange={onAdultChanged}
                     />
                 </label>
                 <button type="button" onClick={onSavePostClicked}>

src/components/RegisterForm/RegisterForm.tsx

@@ -1,28 +1,93 @@
-import React, { memo, useCallback } from "react"
+import React, { memo, useState } from "react"
+import { useSelector, shallowEqual } from "react-redux"
+import { toast } from "react-toastify"
+import _ from "lodash"
 import styles from "./styles.module.scss"
 
-const RegisterForm = (): JSX.Element => {
-    const onSubmit = useCallback((event: React.SyntheticEvent): void => {
-        event.preventDefault()
-        const target = event.target as typeof event.target & {
-            firstname: { value: string }
-            lastname: { value: string }
-            email: { value: string }
-            phone: { value: string }
+import { fetchPreMemberAdd } from "../../store/preMemberAdd"
+import { AppDispatch, AppState } from "../../store"
+
+interface Props {
+    dispatch: AppDispatch
+}
+
+const RegisterForm = ({ dispatch }: Props): JSX.Element => {
+    const [firstname, setFirstname] = useState("")
+    const [lastname, setLastname] = useState("")
+    const [email, setEmail] = useState("")
+    const [mobile, setMobile] = useState("")
+    const [alreadyVolunteer, setAlreadyVolunteer] = useState(false)
+    const [comment, setComment] = useState("")
+    const [sending, setSending] = useState(false)
+
+    const onFirstnameChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setFirstname(e.target.value)
+    const onLastnameChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setLastname(e.target.value)
+    const onEmailChanged = (e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)
+    const onMobileChanged = (e: React.ChangeEvent<HTMLInputElement>) => setMobile(e.target.value)
+    const onAlreadyVolunteer = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setAlreadyVolunteer(!!e.target.value)
+    const onNotYesVolunteer = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setAlreadyVolunteer(!e.target.value)
+    const onCommentChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+        setComment(e.target.value)
+
+    const onSubmit = () => {
+        if (firstname && lastname && email && mobile && !sending) {
+            dispatch(
+                fetchPreMemberAdd({
+                    firstname,
+                    lastname,
+                    email,
+                    mobile,
+                    alreadyVolunteer,
+                    comment,
+                })
+            )
+
+            setSending(true)
+        } else {
+            toast.warning("Il faut remplir tous les champs (sauf le dernier)", {
+                position: "top-center",
+                autoClose: 6000,
+                hideProgressBar: true,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+            })
         }
-        const firstname = target.firstname.value
-        const lastname = target.lastname.value
-        const email = target.email.value
-        const phone = target.phone.value
+    }
 
-        console.log("register fields checked", firstname, lastname, email, phone)
+    const { error, entities: preMember } = useSelector(
+        (state: AppState) => state.preMemberAdd,
+        shallowEqual
+    )
 
-        // call service with fields
-    }, [])
+    let sendSuccess
+    if (!_.isEmpty(preMember)) {
+        if (sending) {
+            setSending(false)
+        }
+        sendSuccess = <span className={styles.success}>Formulaire envoyé !</span>
+    }
 
+    let sendError
+    if (error && _.isEmpty(preMember)) {
+        if (sending) {
+            setSending(false)
+        }
+        sendError = <span className={styles.error}>{error}</span>
+    }
+
+    let sendingElement
+    if (sending) {
+        sendingElement = <span className={styles.sending}>Envoi en cours...</span>
+    }
     /*
-    prenom
-    nom
+    firstname
+    lastname
     mail
     tel
     j'ai déjà été bénévole pour PEL
@@ -35,8 +100,8 @@ const RegisterForm = (): JSX.Element => {
                 <dt>Qu&apos;est-ce que Paris est Ludique ?</dt>
                 <dd>
                     <p>
-                        Cette grande fête est dédiée aux <b>jeux de société modernes</b> sous toutes
-                        leurs formes.
+                        Un festival en plein air dédiée aux <b>jeux de société modernes</b> sous
+                        toutes leurs formes.
                     </p>
                     <p>
                         En 2019 lors de la dernière édition, ce sont <b>16 000</b> joueurs qui se
@@ -53,60 +118,88 @@ const RegisterForm = (): JSX.Element => {
                 <dd>
                     <p>
                         L&apos;organisation du festival est <b>entièrement gérée par nous</b>, les
-                        bénévoles. À aucun moment ça ne doit devenir une corvée, donc nous faisons
-                        tout pour passer <b>un aussi bon moment que les visiteurs</b> :)
+                        bénévoles. À aucun moment ça ne ressemble à du travail : nous faisons tout
+                        pour passer <b>un aussi bon moment que les visiteurs</b> :)
                     </p>
                     <p>
-                        C&apos;est pour ça que chaque mois, ceux qui sont dispo prennent
-                        l&apos;apéro tous ensemble en jouant et discutant de l&apos;organisation.
+                        D&apos;ailleurs, un soir par mois nous nous réunissons pour un apéro ludique
+                        où discuter de l&apos;organisation ! On joue autant que les visiteurs, mais
+                        sur toute l&apos;année ^^
                     </p>
                     <p>
                         Pendant le festival de 2019, nous étions <b>187 bénévoles</b> organisés en
-                        équipes spécialisées qui chouchoutent les visiteurs en les accueillant, en
-                        s&apos;assurant que tout se passe bien, ou en expliquant des règles de jeux.
+                        équipes qui chouchoutent les visiteurs en les accueillant, en
+                        s&apos;assurant que tout se passe bien, ou encore en expliquant des règles
+                        de jeux.
                     </p>
                     <p>
-                        Une équipe s&apos;occupe même du bien être des bénévoles en leur servant à
-                        boire et à manger dans un espace à part où faire des pauses régulières.
+                        Une équipe est même dédiée au bien être des bénévoles en leur servant à
+                        boire et à manger dans un espace à part où faire des pauses régulières. Et
+                        puis nous hébergeons ceux d&apos;entre nous qui habitent loin de Paris. Le
+                        confort avant tout !
                     </p>
                     <p>
-                        Les deux jours avant et le jour après le festival, ceux qui le peuvent
-                        viennent tout préparer et ranger. Certains ne sont disponibles que ces jours
-                        là et c&apos;est déjà d&apos;une grande aide !
+                        Certains bénévoles sont visiteurs le samedi ou le dimanche pour vivre le
+                        festival de l&apos;intérieur. Les deux jours avant et le jour après le
+                        festival, ceux qui le peuvent viennent préparer et ranger. Bref, chacun
+                        participe à la hauteur de ses envies et disponibilités !
                     </p>
                     <p>
-                        Nous nous arrangeons pour héberger les bénévoles qui habitent loin de Paris,
-                        et certains ne viennent qu&apos;un seul jour du weekend pour être visiteur
-                        l&apos;autre.
-                    </p>
-                    <p>
-                        Le samedi soir, cerise sur le gâteau, nous prenons un{" "}
-                        <b>dîner avec les auteurs, illustrateurs et éditeurs</b> qui sont présents
-                        sur le festival !
+                        Le samedi soir quand les visiteurs sont partis, nous prolongeons la fête en
+                        dînant avec les auteurs, illustrateurs et éditeurs présents sur le festival.
                     </p>
                 </dd>
                 <dt>
-                    Si l&apos;expérience vous tente, n&apos;hésitez pas à remplir le formulaire
-                    suivant pour nous rencontrer lors d&apos;un des gros apéros mensuels !<br />
+                    Si l&apos;expérience pourrait vous tenter, remplissez le formulaire suivant pour
+                    en discuter lors d&apos;un des gros apéros mensuels !<br />
+                    Cette inscription ne vous oblige en rien il s&apos;agit juste d&apos;une prise
+                    de contact.
+                    <br />
                     Les prochains sont les 21 décembre et 27 janvier, mais nous vous appelerons
-                    d&apos;ici là pour discuter :)
+                    d&apos;ici là pour les détails :)
+                    <br />
+                    <span className={styles.lightTitle}>(Déjà au moins 8 inscrits !)</span>
                 </dt>
                 <dd>
                     <div className={styles.formLine} key="line-firstname">
                         <label htmlFor="firstname">Prénom</label>
-                        <input type="text" id="firstname" />
+                        <input
+                            type="text"
+                            id="firstname"
+                            required
+                            value={firstname}
+                            onChange={onFirstnameChanged}
+                        />
                     </div>
                     <div className={styles.formLine} key="line-lastname">
                         <label htmlFor="lastname">Nom</label>
-                        <input type="text" id="lastname" />
+                        <input
+                            type="text"
+                            id="lastname"
+                            required
+                            value={lastname}
+                            onChange={onLastnameChanged}
+                        />
                     </div>
                     <div className={styles.formLine} key="line-email">
                         <label htmlFor="email">Email</label>
-                        <input type="email" id="email" />
+                        <input
+                            type="email"
+                            id="email"
+                            required
+                            value={email}
+                            onChange={onEmailChanged}
+                        />
                     </div>
-                    <div className={styles.formLine} key="line-phone">
-                        <label htmlFor="phone">Téléphone</label>
-                        <input type="text" id="phone" />
+                    <div className={styles.formLine} key="line-mobile">
+                        <label htmlFor="mobile">Téléphone</label>
+                        <input
+                            type="text"
+                            id="mobile"
+                            required
+                            value={mobile}
+                            onChange={onMobileChanged}
+                        />
                     </div>
                     <div className={styles.formLine} key="line-already-volunteer">
                         <div>
@@ -116,6 +209,8 @@ const RegisterForm = (): JSX.Element => {
                                 name="alreadyVolunteer"
                                 id="alreadyVolunteer-yes"
                                 className={styles.inputRadio}
+                                checked={alreadyVolunteer}
+                                onChange={onAlreadyVolunteer}
                             />
                             <label htmlFor="alreadyVolunteer-yes">Oui</label>
                             <input
@@ -123,6 +218,8 @@ const RegisterForm = (): JSX.Element => {
                                 name="alreadyVolunteer"
                                 id="alreadyVolunteer-no"
                                 className={styles.inputRadio}
+                                checked={!alreadyVolunteer}
+                                onChange={onNotYesVolunteer}
                             />
                             <label htmlFor="alreadyVolunteer-no">Non</label>
                         </div>
@@ -132,10 +229,19 @@ const RegisterForm = (): JSX.Element => {
                             name="message"
                             id="message"
                             placeholder="Des petits mots sympas, questions, envies, des infos sur toi, des compétences dont tu aimerais te servir... ou rien de tout ça et nous en discuterons au téléphone :)"
+                            value={comment}
+                            onChange={onCommentChanged}
                         />
                     </div>
                     <div className={styles.formButtons}>
-                        <button type="submit">Envoyer</button>
+                        <button type="button" onClick={onSubmit} disabled={sending}>
+                            Envoyer
+                        </button>
+                    </div>
+                    <div className={styles.formReactions}>
+                        {sendingElement}
+                        {sendSuccess}
+                        {sendError}
                     </div>
                 </dd>
             </dl>

src/components/RegisterForm/styles.module.scss

@@ -16,6 +16,10 @@
     }
 }
 
+.lightTitle {
+    font-weight: normal;
+}
+
 .formLine {
     padding: 5px 0;
 
@@ -48,4 +52,25 @@
     margin-top: 10px;
     padding: 5px 0;
     text-align: center;
+
+    [disabled="true"] {
+        background-color: #333333c0;
+        color: #cccccce7;
+    }
+}
+
+.formReactions {
+    margin-top: 3px;
+    padding: 5px 0;
+    text-align: center;
+
+    .sending {
+        color: rgb(0, 0, 255);
+    }
+    .success {
+        color: rgb(0, 133, 0);
+    }
+    .error {
+        color: rgb(255, 0, 0);
+    }
 }