Laboratoire 22

Author: MaximePelletier15

web/docs/03-labos/13-labo22.md

@@ -37,7 +37,7 @@ L'objectif de cette section sera d'afficher les données de l'utilisateur côté
 
 ### 4 - Modifier la connexion
 
-Côté serveur, dans l'action `Login`, ajoutez deux choses dans **l'objet JSON qui contient le token** :
+[💡](/notes/rencontre11.2#-données-de-connexion) Côté serveur, dans l'action `Login`, ajoutez deux choses dans **l'objet JSON qui contient le token** :
 
 * Le pseudonyme de l'utilisateur.
 * La liste de strings avec tous les rôles de l'utilisateur.
@@ -46,79 +46,60 @@ Ces deux informations ne sont pas censées être difficiles à trouver dans le c
 
 ### 5 - Afficher le profil
 
-Côté Angular, dans le `ReviewService`, sous la requête `Login`, on va maintenant attraper ces deux nouvelles informations. Avant de faire ça, nous allons préparer des variables dans le `ReviewService` pour **stocker le pseudo et le(s) rôle(s)** de l'utilisateur présentement connecté.
+[💡](/notes/rencontre11.2#-données-de-connexion) Côté client, dans le **hook** `useReviewAPI`, remarquez que la requête `Login` retourne `x.data`, qui contient maintenant deux informations supplémentaires. Trouvez où la fonction `login()` est appelée dans le composant `Home`, et stockez le **pseudo** et les **rôles** à deux endroits :
 
-[💡](/cours/rencontre11.1#-signal-pour-plusieurs-composants) Créez deux paires de signaux (la version composée d'un signal modifiable **privé** + un signal non-modifiable) :
+1. Dans les états `username` et `roles`. (Serviront pour des **affichages conditionnels**)
+2. Dans le stockage de session. (Permettra de faire perdurer les données si on réactualise la page)
 
-* Un signal privé de type `string|null` initialisé avec la valeur `null`.
-* Un signal privé de type `string[]` initialisé avec un tableau vide `[]`.
+✍ Modifiez le HTML de `Home` ... :
 
-N'oubliez pas de créer les signaux non-modifiables associés ! (Comme ça on pourra accéder à ces valeurs en dehors du service)
-
-💾 Toujours dans le `ReviewService`, dans la fonction `Login()`, en plus du **token** qui est déjà stocké dans le stockage local :
-
-* Stockez le pseudo de l'utilisateur **dans le stockage local** ET **dans le signal de type `string|null`**.
-* Stockez les rôles de l'utilisateur **dans le stockage local** ET **dans le signal de type `string[]`**.
-
-:::warning
-
-[💡](/cours/rencontre4.1#-sauvegarder-une-donnée-dun-autre-type-que-string) Comme la liste des rôles **n'est pas un `string`**, N'oubliez pas d'utiliser `JSON.parse(...)`.
-
-:::
-
-✍ Modifiez le HTML de `AppComponent` ... :
-
-* Affichez le pseudo de l'utilisateur connecté à l'aide du bon signal.
-* Affichez les rôles de l'utilisateur connecté à l'aide du bon signal. (Pas besoin de `*ngFor`)
+* Affichez le pseudo de l'utilisateur connecté.
+* Affichez les rôles de l'utilisateur connecté. (Pas besoin de `.map()`, juste `{roles}`)
 * Cacher toute la boîte du profil lorsque le pseudo de l'utilisateur est `null`.
 
+<center>![Profil de l'utilisateur](../../static/img/labo21/profile.png)</center>
+
 :::note
 
-Hélas, ce fonctionnement est brisé si on réactualise la page. Pas de panique : c'est pour ça qu'on a stocké le pseudo et les rôles dans le **stockage local** !
+Hélas, ce fonctionnement est brisé si on réactualise la page. Pas de panique : c'est pour ça qu'on a stocké le pseudo et les rôles dans le **stockage de session** !
 
 :::
 
-⚙ Ajoutez les deux fonctions suivantes dans votre `ReviewService`. Elles permettront au `AppComponent` de modifier les valeurs des signaux :
+⏰ Ajoutez un `useEffect()` dans `Home` pour :
 
-```ts showLineNumbers
-setUsername(username : string | null){
-    this.SIGNAL_DU_PSEUDO.set(username);
-}
+* Récupérer le pseudo et les rôles, qui sont dans le **stockage de session**.
+* Modifier les deux états appropriés pour restaurer les données identitaires.
 
-setRoles(roles : string[]){
-    this.SIGNAL_DES_ROLES.set(roles);
-}
-```
+Désormais, le panneau du profil devrait être fonctionnel en tout temps, même si on réactualise la page !
 
-⏰ Finalement, modifiez la fonction `ngOnInit()` dans le `AppComponent` pour qu'elle :
+🔌 Un dernier détail important : la déconnexion ! Modifiez la fonction `logoff()` dans `Home` :
 
-* Récupère le pseudo et les rôles, qui sont dans le **stockage local**.
-* Modifie les signaux pour indiquer le pseudo et les rôles à l'aide des deux fonctions qu'on vient d'ajouter.
+* Elle doit supprimer le **token**, le **pseudo** et les **rôles** du stockage de sessuib.
+* Elle doit réinitialiser les deux états appropriés.
 
-Désormais, le panneau du profil devrait être fonctionnel en tout temps, même si on réactualise la page : 
-
-<center>![Profil de l'utilisateur](../../static/img/labo21/profile.png)</center>
-
-🔌 Un dernier détail important : la déconnexion ! Modifiez la fonction `logout()` dans le `ReviewService` :
-
-* Elle doit supprimer le **token**, le **pseudo** et les **rôles** du stockage local.
-* Elle doit réinitialiser les signaux avec les valeurs `null` et `[]`.
-
-Assurez-vous qu'en vous déconnectant, le panneau du profil devienne invisible.
+Assurez-vous qu'en vous déconnectant, le panneau du profil devienne invisible. (Et qu'il le reste lorsqu'on réactualise la page)
 
 ## 👀 Ce qu'on ne voit pas ne nous fait pas de mal
 
 ### 6 - Cacher des éléments selon le profil
 
-À l'aide de `*ngIf` et des **signaux** qu'on a créés, vous devrez cacher certains éléments dans la page Web.
+À l'aide de la forme `{ condition && élément HTML }` et des **états** qu'on a remplis, vous devrez cacher certains éléments dans la page Web.
 
 <center>![Créer un review](../../static/img/labo21/studentOnly.png)</center>
 
 📝 La zone pour créer un `Review` doit seulement être visible pour les utilisateurs avec le rôle `student`. (L'instruction en JavaScript `monTableau.includes(valeur)`, qui retourne un booléen, sera utile !)
 
 <center>![Supprimer un review](../../static/img/labo21/authorOnly.png)</center>
 
-❌ Le bouton pour supprimer un `Review` doit seulement être visible pour l'auteur du `Review` ET pour tous les `corruptedTeacher`. (Comparez le pseudo dans le signal avec le nom de l'auteur du `Review`...)
+❌ Le bouton pour supprimer un `Review` doit seulement être visible pour l'auteur du `Review` ET pour tous les `corruptedTeacher`. (Comparez le pseudo dans l'état avec le nom de l'auteur du `Review`...)
+
+:::tip
+
+> Un instant ! L'affichage des `Reviews` est dans un autre composant.
+
+Ce n'est pas un problème : il y a un **Context** qui permet de partager les valeurs des états `username` et `roles` au composant `Post`.
+
+:::
 
 Testez avec les quatre types d'utilisateurs (aucun rôle, corruptedTeacher, student auteur et student pas auteur) si tous les éléments graphiques sont bien cachés au bon moment.