feat : part2e.md translate missing part in french

Author: Adam-Doria

src/content/2/fr/part2d.md

@@ -698,19 +698,19 @@ Le code de l'état actuel de notre application se trouve sur la branche <i>part2
 
 <div class="tasks">
 
-<h3>Exercices 2.15.-2.18.</h3>
+<h3>Exercices 2.12.-2.15.</h3>
 
-<h4>2.15: phonebook, étape7</h4>
+<h4>2.12: phonebook, étape7</h4>
 
 Revenons à notre application de répertoire.
 
 Actuellement, les numéros ajoutés au répertoire ne sont pas enregistrés sur un serveur principal. Corrigez cette situation.
 
-<h4>2.16: phonebook, étape8</h4>
+<h4>2.13: phonebook, étape8</h4>
 
 Extrayez le code qui gère la communication avec le backend dans son propre module en suivant l'exemple présenté précédemment dans cette partie du support de cours.
 
-<h4>2.17: phonebook étape9</h4>
+<h4>2.14: phonebook étape9</h4>
 
 Permettre aux utilisateurs de supprimer des entrées du répertoire. La suppression peut être effectuée via un bouton dédié pour chaque personne dans la liste du répertoire. Vous pouvez confirmer l'action de l'utilisateur en utilisant la méthode [window.confirm](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) :
 
@@ -729,7 +729,7 @@ const delete = (id) => {
 }
 ```
 
-<h4>2.18*: phonebook, étape10</h4>
+<h4>2.15*: phonebook, étape10</h4>
 
 Modifiez le code de sorte que si un numéro est ajouté à un utilisateur déjà existant, le nouveau numéro remplacera l'ancien numéro. Il est recommandé d'utiliser la méthode HTTP PUT pour mettre à jour le numéro de téléphone.
 

src/content/2/fr/part2e.md

@@ -282,15 +282,15 @@ Le code de la version finale de notre application se trouve sur la branche <i>pa
 
 <div class="tasks">
 
-<h3>Exercices 2.19.-2.20.</h3>
+<h3>Exercices 2.16.-2.17.</h3>
 
-<h4>2.19: phonebook, étape11</h4>
+<h4>2.16: phonebook, étape11</h4>
 
 Utilisez l'exemple de [message d'erreur amélioré](/en/part2/adding_styles_to_react_app#improved-error-message) de la partie 2 comme guide pour afficher une notification qui dure quelques secondes après l'exécution d'une opération réussie (une personne est ajoutée ou un nombre est modifié) :
 
 ![](../../images/2/27e.png)
 
-<h4>2.20*: phonebook, étape12</h4>
+<h4>2.17*: phonebook, étape12</h4>
 
 Ouvrez votre application dans deux navigateurs. **Si vous supprimez une personne dans le navigateur 1**, essayer de <i>modifier le numéro de téléphone de la personne</i> dans le navigateur 2, vous obtiendrez le message d'erreur suivant :
 
@@ -302,6 +302,266 @@ Corrigez le problème selon l'exemple présenté dans [promises et erreurs](/en/
 
 **Note** Même si vous gérez l'exception, le message d'erreur est affiché sur la console.
 
-C'était le dernier exercice de cette partie du cours. Il est temps de transmettre votre code à GitHub et de marquer tous vos exercices terminés dans le [système de soumission d'exercices](https://studies.cs.helsinki.fi/stats/courses/fullstackopen).
+</div>
+
+<div class="content">
+
+### Quelques remarques importantes
+
+À la fin de cette partie, vous trouverez quelques exercices plus difficiles. À ce stade, vous pouvez les ignorer s'ils vous semblent trop complexes. Nous y reviendrons plus tard. Quoi qu'il en soit, ce document mérite d'être lu.
+
+Nous avons fait, dans notre application, quelque chose qui masque une source d'erreur très courante.
+
+Nous avons initialisé l'etat de _notes_ à partir d'un tableau vide:
+
+```js
+const App = () => {
+  const [notes, setNotes] = useState([])
+
+  // ...
+}
+```
+
+C'est une valeur initiale tout à fait naturelle, puisque notes constitue un ensemble, c'est-à-dire qu'il y a de nombreuses notes que l'état va stocker.
+
+Si l'état ne devait sauvegarder  qu' " une seule chose ", une valeur initiale plus appropriée serait null, ce qui indique qu'il n'y a <i>rien</i> dans l'état au départ. Voyons ce qui se passe si nous utilisons cette valeur initiale :
+
+```js
+const App = () => {
+  const [notes, setNotes] = useState(null) // highlight-line
+
+  // ...
+}
+```
+
+L'application plante:
+
+![console typerror cannot read properties of null via map from App](../../images/2/31a.png)
+
+Le message d'erreur indique la raison et l'emplacement de l'erreur. Le code qui a provoqué le problème est le suivant :
+
+```js
+  // notesToShow gets the value of notes
+  const notesToShow = showAll
+    ? notes
+    : notes.filter(note => note.important)
+
+  // ...
+
+  {notesToShow.map(note =>  // highlight-line
+    <Note key={note.id} note={note} />
+  )}
+```
+
+Le message d'erreur est:
+
+```bash
+Cannot read properties of null (reading 'map')
+```
+
+La variable _notesToShow_ est d'abord assigné à la valeur de l'état _notes_ puis le code tente d'appeler la méthode _map_ sur un object inexistant, c'est à dire sur _null_.
+
+Pourquoi ?
+
+Le hook d'effet(useEffect) utilise la fonction _setNotes_ pour affecter à _notes_ les données renvoyées par le back-end
+
+```js
+  useEffect(() => {
+    noteService
+      .getAll()
+      .then(initialNotes => {
+        setNotes(initialNotes)  // highlight-line
+      })
+  }, [])
+```
+
+Cependant, le problème est que le hook d'effet n'est exécuté qu'<i>après le premier rendu</i>.
+Et puisque _notes_ a pour valeur initiale null:
+
+```js
+const App = () => {
+  const [notes, setNotes] = useState(null) // highlight-line
+
+  // ...
+```
+
+Lors du premier rendu, le code suivant est exécuté :
+
+```js
+notesToShow = notes
+
+// ...
+
+notesToShow.map(note => ...)
+```
+
+et cela fait planter l'application, car on ne peut pas appeler la méthode _map_ sur une valeur _null_.
+
+En initialisant _notes_ avec un tableau vide, il n'y a pas d'erreur puisqu'il est permis d'utiliser _map_ sur un tableau vide
+
+Ainsi, l'initialisation de l'état a  "masqué"  le problème lié au fait que les données ne sont pas encore récupérées depuis le backend
+
+une autre manière de contourner le problème aurait été d'utiliser un <i>rendu conditionnel</i> et de retourner null tant que l'état du composant n'est pas correctement initialisé :
+
+```js
+const App = () => {
+  const [notes, setNotes] = useState(null) // highlight-line
+  // ... 
+
+  useEffect(() => {
+    noteService
+      .getAll()
+      .then(initialNotes => {
+        setNotes(initialNotes)
+      })
+  }, [])
+
+  // do not render anything if notes is still null
+  // highlight-start
+  if (!notes) { 
+    return null 
+  }
+  // highlight-end
+
+  // ...
+} 
+```
+
+Donc, lors du premier rendu, rien n'est affiché. Lorsque les notes arrivent du backend, l'effet utilise la fonction _setNotes_ our mettre à jour la valeur de l'état _notes_. Cela provoque un nouveau rendu du composant, et lors de ce second rendu, les notes sont affichées à l'écran.
+
+Cette méthode basée sur le rendu conditionnel convient dans les cas où il est impossible de définir l'état de façon à permettre un rendu initial.
+
+L'autre point auquel il nous faut encore jeter un œil est le second paramètre de useEffect:
+
+```js
+  useEffect(() => {
+    noteService
+      .getAll()
+      .then(initialNotes => {
+        setNotes(initialNotes)  
+      })
+  }, []) // highlight-line
+```
+
+Le second paramètre de <em>useEffect</em> sert à [spécifier la fréquence d'exécution de l'effet](https://react.dev/reference/react/useEffect#parameters). Le principe est que l'effet s'exécute systématiquement après le premier rendu du composant <i>et</i> à chaque fois que la valeur de ce second paramètre change.
+
+Si ce second paramètre est un tableau vide <em>[]</em>, son contenu ne change jamais et l'effet n'est exécuté qu'après le premier rendu du composant. C'est exactement ce que l'on souhaite lorsqu'on initialise l'état de l'application depuis le serveur.
+
+Cependant, il existe des situations où l'on veut exécuter cet effet à d'autres moments, par exemple lorsque l'état du composant change de manière particulière.
+
+Considérons l'exemple d'une application simple pour interroger les taux de change via [l'Api de taux de change](https://www.exchangerate-api.com/):
+
+```js
+import { useState, useEffect } from 'react'
+import axios from 'axios'
+
+const App = () => {
+  const [value, setValue] = useState('')
+  const [rates, setRates] = useState({})
+  const [currency, setCurrency] = useState(null)
+
+  useEffect(() => {
+    console.log('effect run, currency is now', currency)
+
+    // skip if currency is not defined
+    if (currency) {
+      console.log('fetching exchange rates...')
+      axios
+        .get(`https://open.er-api.com/v6/latest/${currency}`)
+        .then(response => {
+          setRates(response.data.rates)
+        })
+    }
+  }, [currency])
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  const onSearch = (event) => {
+    event.preventDefault()
+    setCurrency(value)
+  }
+
+  return (
+    <div>
+      <form onSubmit={onSearch}>
+        currency: <input value={value} onChange={handleChange} />
+        <button type="submit">exchange rate</button>
+      </form>
+      <pre>
+        {JSON.stringify(rates, null, 2)}
+      </pre>
+    </div>
+  )
+}
+
+export default App
+```
+
+L'interface utilisateur de l'application comporte un formulaire dont le champ de saisie reçoit le code de la devise désirée. Si la devise existe, l'application affiche ses taux de change par rapport aux autres monnaies :
+
+![navigateur affichant les taux de change avec eur saisi et console indiquant fetching exchange rates](../../images/2/32new.png)
+
+Lorsque l’on appuie sur le bouton, l’application stocke la devise saisie dans l’état _currency_.
+
+Dès que la valeur de  _currency_ change, l’application récupère ses taux de change depuis l’API dans la fonction d’effet :
+
+```js
+const App = () => {
+  // ...
+  const [currency, setCurrency] = useState(null)
+
+  useEffect(() => {
+    console.log('effect run, currency is now', currency)
+
+    // skip if currency is not defined
+    if (currency) {
+      console.log('fetching exchange rates...')
+      axios
+        .get(`https://open.er-api.com/v6/latest/${currency}`)
+        .then(response => {
+          setRates(response.data.rates)
+        })
+    }
+  }, [currency]) // highlight-line
+  // ...
+}
+```
+
+Le hook useEffect prend désormais  _[currency]_ comme second paramètre. La fonction d’effet s’exécute donc après le premier rendu et <i>à chaque fois</i> que la valeur de ce second paramètre  _[currency]_ change. Autrement dit, lorsque l’état _currency_ reçoit une nouvelle valeur, le contenu du tableau est mis à jour et la fonction d’effet est relancée.
+
+Il est normal de choisir _null_ comme valeur initiae pour la variable _currency_, puisque _currency_ ne stocke qu'un seul élément. la valeur _null_ indique qu’il n’y a encore rien dans l’état, et il est très simple, à l’aide d’un if, de vérifier si la variable a reçu une valeur. L’effet comporte donc la condition suivante :
+
+```js
+if (currency) { 
+  // exchange rates are fetched
+}
+```
+
+ce qui empêche de requêter les taux de change juste après le premier rendu lorsque la variable _currency_ a encore sa valeur initiale, c’est-à-dire _null_.
+
+Ainsi, si l’utilisateur saisit par exemple <i>eur</i> dans le champ de recherche, l’application utilise Axios pour effectuer une requête HTTP GET vers l’adresse <https://open.er-api.com/v6/latest/eur> et stocke la réponse dans l’état _rates_.
+
+Lorsque l’utilisateur saisit ensuite une autre valeur dans le champ de recherche, par exemple <i>usd</i>, la fonction d’effet est de nouveau exécutée et les taux de change de la nouvelle devise sont récupérés depuis l’API.
+
+La méthode présentée ici pour effectuer les requêtes API peut sembler un peu lourde. Cette application particulière aurait pu être réalisée entièrement sans utiliser useEffect en effectuant les requêtes directement dans le gestionnaire de soumission du formulaire :
+
+```js
+const onSearch = (event) => {
+  event.preventDefault()
+  axios
+    .get(`https://open.er-api.com/v6/latest/${value}`)
+    .then(response => {
+      setRates(response.data.rates)
+    })
+}
+```
+
+Cependant, il existe des situations où cette technique ne fonctionnerait pas. Par exemple, vous <i>pourriez</i> rencontrer un tel cas dans l’exercice 2.20 où l’utilisation de _useEffect_ pourrait apporter une solution. Notez que cela dépend beaucoup de l’approche choisie ; par exemple, la solution modèle n’utilise pas toujours cette astuce.
 
 </div>
+
+
+
+