# Exercices: Mix Api & Navigation

:::warning

**FIRST OF ALL**

Installez les dépendences suivante :)

`npm install axios`

`expo install react-native-screens react-native-safe-area-context @react-navigation/native-stack`

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

**La documentation de React Navigation ici**
https://reactnavigation.org/docs/getting-started

:::

### Exercice 1: Promises

:::info
Dans utilsiez les promises via la méthode **async/await, try/catch**.
:::

#### 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>`| |  |

### Exercice 2: Very Basic Navigation

::: info
**DOC de react-navigation**: https://reactnavigation.org/docs/getting-started
:::

::: warning
D'abord installez react-navigation:
`expo install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated`
`npm install @react-navigation/native-stack`
:::

#### 1.1 ---

Créez une navigation composée de 3 pages:
* Home
* Details
* About

Depuis la page `Home` vous devez pouvoir aller sur la page `Details` et sur la page `About`. Il doit être possible de retourner sur la `Home` depuis ces pages via le bouton "back" situé en haut à gauche.

:::spoiler

> StackNavigator

:::

###### `Exemple:`

Home <-> Details
Home <-> About

::: warning
**->**: Aller à
**<-**: Retour vers
**<->**: Aller retour possible
:::

### Exercice 3: List all Users

Dans cette exercice nous allons lister tout les users disponibles dans la route suivante:

`https://jsonplaceholder.typicode.com/users`

Pour cela vous devrez effectuer une requête **GET** via axios (axios vous retourne une Promise). Une fois ce résultat obtenu l'afficher via un `votreDonnees.map(...)` pour parcourir toute la donnée et afficher un élément à chaque itération

**Étape 1:**
Créer un composant `User` qui permettra d'afficher toute les infos **d'un seul** utilisateur.
Libre à vous de le styler comme vous voulez

**Étape 2:**
Dans la page Home, récupérez les données de l'API fournie au montage de celle-ci, puis stockez les dans un state. Ce state doit évidemment être du même type que ce que vous renvoie la donnée de l'API :wink:

**Étape 3:**
Utilisez le mapping (`votreDonnees.map(...)`) pour afficher la liste de tout les utilisateurs. Bien entendu chaque item de cette liste doit être votre composant `User` créé au préalable.

:::spoiler

const {data} = await axios.get(...)

:::

### Exercice 4: List post of all Users

Dans cette exercice nous allons lister tout les post d'un user spécifique sur une autre page, la route est la suivante:

`https://jsonplaceholder.typicode.com/posts?userId=${id}`

**id**: L'id de l'utilisateur envoyé sur cette page

Pour cela vous devrez effectuer une requête **GET** via axios (axios vous retourne une Promise). Une fois ce résultat obtenu l'afficher dans un élément ReactNative appelé [FlatList](https://reactnative.dev/docs/flatlist). Tout comme avant en fait.

**Étape 1:**
Rendez votre composant `User` clickable, et faite en sorte qu'il renvoie sur la page `Details`. Vous devez envoyez dans les paramètres de cette page l'id de l'utilisateur sur lequel vous avez cliqué. Une fois sur la page affichez le au montage de la page.

**Étape 2:**
Créer un composant `Post` qui permettra d'afficher tout les details **d'un post** de l'utilisateur.
Libre à vous de le styler comme vous voulez

**Étape 3:**
Récupérez les données de l'API fournie au montage de la page Details, puis stockez les dans un state. Ce state doit évidemment être du même type que ce que vous renvoie la donnée de l'API :wink:

**Étape 4:**
Utilisez le composant [FlatList](https://reactnative.dev/docs/flatlist) de ReactNative pour afficher la liste de tout les post. Bien entendu item de cette liste doit être votre composant `Post` créé au préalable.