# Exercices: Promises, async/await, Axios

:::warning

**FIRST OF ALL**

Installez Axios :)

`npm install axios`
or
`yarn add axios`

--
**La documentation de Axios ici**
https://github.com/axios/axios

:::

### Exercice 1: Promises

#### 1.1 ---

**Étape 1:**
Créez un composant `RoomIsClean` qui:
* Aura une prop `isClean` qui sera un boolean
* Contiendra un `useState` qui sera une `String`
* Affichera le `Text` suivant: "Room is {votre state}"

<RoomIsClean isClean={false} />

**Étape 2:**
Dans le même fichier créez une fonction `isMyRoomClean` qui:
* Prendra en paramètre un boolean `isClean` (celui venu des props)
* Retournera une `Promise` résolue par `"clean"` si le boolean est vrai, rejeté par `"not clean"` s'il est faux
* **À l'intérieur** de cette `Promise` simuler la latence en imbriquant votre code dans un `setTimeout` de 3 secondes

const isMyRoomClean = (isClean) => {...}

**Étape 3:**
Dans votre composant appelez votre fonction `isMyRoomClean` à l'intérieur d'un `useEffect`, puis faites le nécessaire pour afficher le message quand la promesse est résolue ou rejeté

useEffect(() => {
    isMyRoomClean().then(res => {
        ...
    }).catch(err => {
    ...
    })
}, [props.isClean])

| Props isClean| `true` | `false` |
|---| -------- | -------- |
| `<RoomIsClean>`| |  |

#### 1.2 ---

Reprenez l'exercice 1.1, dans le `useEffect` déclarez une fonction `fetchData` et utilisez la notation **async/await**, **try/catch** pour faire appel à votre promesse `isMyRoomClean`

Si vous aviez utilisez cette notation dans l'exercice, utilisez la notation classique **then/catch**

---

### Exercice 2: Axios, Requête API

::: warning
Au cours des prochains exercices nous allons utiliser l'API externe de test, JSON Placholder.

--
**La documentation ici**
https://jsonplaceholder.typicode.com/
:::

#### 2.0 ---

Dans cet exercice 2 nous allons créer un composant `PostDetails` qui affichera les détails complet d'un post.

**Étape 1:**
* Créez ce composant `PostDetails`, il affichera un titre et une description
* Stylez votre composant rapidement.

**Étape 2:**
* Créez un `useState` `post` initialisé à un objet vide pour le moment.
* De même créez un `useEffect` vide avec un tableau vide comme dépendance

::: spoiler

Voici le style pour créer l'ombre autour de la `<View>`

shadowOpacity: 0.2,
shadowRadius: 10,
shadowOffset: {
    height: 0,
    width: 0,
},
backgroundColor: 'white',

:::


#### 2.1 --- Requête GET

Dans cette exercice nous allons récupérer le détail d'un post via son id.

Pour cela nous allons utiliser la route `/posts/1` de JSON placeholder.
Comme **spécifié dans la doc** cette route retourne comme résultat:

{
  "userId": 1,
  "id": 1,
  "title": "...",
  "body": "..."
}

**Étape 1:**
* Importez axios dans votre fichier
* Dans votre `useEffect` créez une fonction `fetchData` comme réalisé dans l'exercice 1.
* Cette fonction fera appel à `axios.get()` avec la requête complète qui utilisera donc la route mentionnée plus haut.

::: danger
N'oubliez pas la requête doit être une URL complète !
**Ex:** `https://....`

Vous pouvez vous aidez de **la doc** mais aussi du diaporama
:::

**Étape 2**
* Si la requête est résolue, faites appel à `setPost` (qui viens de votre useState) avec pour paramètres `result.data`
* Si elle est rejeté, afficher l'erreur dans la console et utilisez le mot clé `throw` avec l'erreur.
* Enfin, dans votre titre et votre description affichez, `title` et `body` contenu alors dans votre state `post`

`result` viens de:

const result = await axios.get(...)

**ou**

axios.get(...).then(result => {...})


#### 2.2 ---

Dans cet exercice, envoyez à votre composant une prop `id` qui sera l'id du post.
Changez la route `/posts/1` par l'id que vous récupérez depuis les props pour obtenir un détail d'article différent.

#### 2.3 ---

En vous servant du composant créé jusqu'ici, afficher la liste de tout les posts.

**Étape 1**
* Replacez la prop `id` par une prop `item`. Cette item sera l'objet qui représente un post.
* Vous pouvez désormais commenter/supprimer le useEffect qui récupère le détail d'un post via son id dans votre composant.
* Votre constante `post` deviendra l'item passé en props.
::: spoiler

const post = {...props.item}

:::
<br />

**Étape 2**

* Créez un composant `PostList` qui contiendra un `useState` nommé `posts`
* De la même manière que dans l'exercice **2.1, étape 1** créez un `useEffect` et faites appel à la route `/posts` (cette route vous retourne un tableau de post)
* Affichez cette liste en utilisant pour chaque itération votre composant `PostDetails` en lui passant comme propriété l'item du tableau courant.

:::info
Pour afficher la list vous pouvez utiliser la manière classique `array.map(...)` ou le composant `<FlatList>` de react-native
:::


---

### Exercice 3: Experimentations requête POST

#### 3.1 ---

::: danger

:warning: **Attention** :warning:

Dans cette exercice nous allons utiliser la méthode POST pour notre requête. **Cependant** *JSONPlaceholder* étant une API publique, il n'est pas concrètement possible de créer une ressource, celle-ci sera cependant "falsifié" comme si elle avait été.

:::

**Étape 1**
* Créez une fonction `createNewPost` vide pour le moment
* Dans le composant `PostList`, en dessous de votre liste, créez un bouton "New Post" qui appellera la fonction

**Étape 2**
* Dans la fonction, faite appelle à la route `/posts` **cette fois-ci avec la méthode POST** de axios.
* Si cette promise est rejeté afficher en console l'erreur.
* Si cette promise est résolue, afficher le retour de la réponse puis ajouter ce nouvelle élément comme premier élément de votre tableau `posts`