Skip to content

Améliorer la générisation des composants et la simplification du DOM

Salut,

C'est francois le freelance qui rejoint votre equipe vers la fin janvier. Luc m'a donné accès au GitLab afin que je pusise jeter un coup d'oeil a l'avancée du projet avant que j'arrive. Je ne savais pas si vous ecriviez vos issues en francais ou anglais, c'est samedi fin de journée, j'ai préféré opter pour le francais :) J'ai fait le tour du code et ca avance bien je trouve. Si je peux me permettre de vous donner des conseils sur quelques points que j'ai vu pour vous aider

Par exemple, dans la page SignUp je vois ca

<Select
labelId="structure-label"
id="structureSelect"
name="structureSelect"
value={formState.values.structureSelect || ''}
error={hasError('structureSelect')}
onChange={handleChange}
labelWidth={labelWidth}
>
  {/* FIXME : translate those items ? */}
  <MenuItem value="">
    <em>Aucune</em>
  </MenuItem>
  <MenuItem value="Ministère Education">Ministére Education</MenuItem>
  <MenuItem value="Education">Education</MenuItem>
  <MenuItem value="Auvergne-Rhône-Alpes">Région académique Auvergne-Rhône-Alpes</MenuItem>
  <MenuItem value="Bourgogne-Franche-Comté">Région académique Bourgogne-Franche-Comté</MenuItem>
  <MenuItem value="Bretagne">Région académique Bretagne</MenuItem>
  <MenuItem value="Centre-Val de Loire">Région académique Centre-Val de Loire</MenuItem>
  <MenuItem value="Corse">Région académique de Corse</MenuItem>
  <MenuItem value="Grand Est">Région académique Grand Est</MenuItem>
  <MenuItem value="Guadeloupe">Région académique de la Guadeloupe</MenuItem>
  <MenuItem value="Guyane">Région académique de la Guyane</MenuItem>
  <MenuItem value="Hauts-de-France">Région académique Hauts-de-France</MenuItem>
  <MenuItem value="Île-de-France">Région académique Île-de-France</MenuItem>
  <MenuItem value="Martinique">Région académique de Martinique</MenuItem>
  <MenuItem value="Normandie">Région académique Normandie</MenuItem>
  <MenuItem value="Nouvelle-Aquitaine">Région académique Nouvelle-Aquitaine</MenuItem>
  <MenuItem value="Occitanie">Région académique Occitanie</MenuItem>
  <MenuItem value="Pays de la Loire">Région académique Pays de la Loire</MenuItem>
  <MenuItem value="Provence-Alpes-Côte d'Azur">
    Région académique Provence-Alpes-Côte d&apos;Azur
  </MenuItem>
  <MenuItem value="La Réunion">Région académique de La Réunion</MenuItem>
  <MenuItem value="Collectivité">Collectivité</MenuItem>
  <MenuItem value="Autre">Autre</MenuItem>
</Select>

afin de simplifier le DOM du formulaire, il serait pas mal de créer un composant Select a part auquel on passe un Tableu d'objets detaillant les differentes option du select

const options = [
  {
    value: "Ministère Education",
    text: "Ministére Education" // a terme mettre du i18n si j'ai bien compris
  },
  {
    value: "Auvergne-Rhône-Alpes",
    text: "Région académique Auvergne-Rhône-Alpes"
  }
]

du coup, dans le formulaire on aurait plus que

<CustomSelect
  labelId="structure-label"
  id="structureSelect"
  name="structureSelect"
  value={formState.values.structureSelect || ''}
  error={hasError('structureSelect')}
  onChange={handleChange}
  labelWidth={labelWidth}
  options={options} // les options passées en props
/>

dans le DOM de ce nouveau composant, utiliser un options.map pour retourner un MenuItem pour chaque option. ca clarifie enormement le DOM

Pour le formulaire en lui meme, il y aura certainement plusieurs formulaires qui prendront la meme forme dans l'application donc peut etre faire un formulaire generique qui prend un JSON aussi comme props. Les actions peuvent rester dans le composant parent qui traitera les infos envoyées par le formulaire mais c'est le formulaire qui aura son etat interne et s'occupera de generer les Inputs. J'sais pas si j'suis vraiment, hesitez pas si vous voyez pas ce que je veux dire, je vous enverrai un exemple que j'ai fait récemment.

En général, en React, segmenter son code aide a le reutiliser et ne pas creer un composant pour chaque "use-case" sinon l'application devient très grosse et "lourde" sur le long terme.