Afin de simplifier l'organisation du code dans l'application, vous allez mettre en place un routeur de navigation. Vous pourrez utiliser wouter par exemple, qui est un routeur simple et léger.

Vous commencerez par ajouter le routeur principal de l'application dans le fichier « src/router/Main.jsx », que vous ajouterez au centre de votre application afin qu'il puisse afficher les routes entre la tête et le pied de l'application.

Ce routeur ne comportera pour l'instant qu'une seule route, celle de la page d'accueil de l'application (« / »). Vous ajouterez une première route Home dans le sous-répertoire src/router/routes.

Pour commencer, vous ajouterez à la route de la page d'accueil un bouton permettant d'ajouter une nouvelle liste de tâche.

Ce bouton utilisera un composant Popover de la bibliothèque MUI afin d'afficher un formulaire permettant de saisir le titre de la liste de tâches et d'envoyer une requête AJAX à l'API de gestion de listes de tâches lors de la soumission du formulaire.

Vous gérerez la requête AJAX en ajoutant un nouveau « endpoint » à la tranche de données de l'API de gestion de listes de tâches.

Toujours sur la route de la page d'accueil, vous ajouterez une liste des listes de tâches de l'utilisateur obtenue à l'aide du « endpoint » de l'API : « /api/me/checklists ».

Pour chaque liste de tâches, vous afficherez le titre de la liste, les avatars des contributeurs (à l'aide d'un groupe d'avatars par exemple), ainsi que des icônes si l'utilisateur est propriétaire de la liste et si celle-ci est en lecture seul (ces informations sont rattachées à la collaboration de l'utilisateur).

Vous rendrez chaque liste de tâches cliquable et support d'un lien vers la route « checklists/:id » permettant l'affichage détaillé de la liste de tâches, que vous allez réaliser dans la section suivante.

Par défaut, vous devriez constater que la liste de listes des tâches ne se met pas à jour lorsqu'une nouvelle liste est créée. Vous allez régler ce problème, mais avant cela, vous allez vous donner la possibilité de supprimer une liste de tâches.

Vous ajouteerez une nouvelle route à votre routeur permettant d'acceder au détail d'une liste de tâches. Cette route prendra en paramètre l'identifiant de la liste de tâches à afficher, en vous conformant à la documentation du composant Route, vous récupérerez cette identifiant que vous transmettrez à un composant réalisant l'affichage détaillé de la liste de tâches.

Dans un premier temps, vous afficherez simplement le titre de la liste de tâches ainsi qu'un bouton permettant de supprimer la liste de tâches.

Lors du clic sur le bouton de suppression, vous enverrez une requête AJAX à l'API de gestion de listes de tâches afin de supprimer la liste de tâches. Vous gérerez cette requête en ajoutant un nouveau « endpoint » à la tranche de données de l'API de gestion de listes de tâches.

Vous prendrez soin de demander la confirmation de l'utilisateur avant de supprimer la liste de tâches en utilisant un composant Dialog de MUI par exemple.

Après avoir réalisé la suppression, vous redirigerez l'utilisateur vers la page d'accueil de l'application.

Comme vous l'avez vu, RTK, gére une mise en cache des données qui ne sont pas rafraîchies automatiquement lors des interactions avec l'API. Pour palier à ce problème, aprés avoir lu la section de la documentation relative au rafraîchissement automatique des données, vous ajouterez une étiquette sur les requêtes concernant les listes de tâches.

Vous préciserez ensuite que les requêtes de type « query » produisent ce type de données et que les requettes de type « mutation » invalident ce type de données.

L'ajout d'une nouvelle liste de tâches devrait maintenant provoquer la mise à jour automatique de l'affichage de la liste des listes de tâches de l'utilisateur.

Vous allez revenir sur l'édition du détail d'une liste de tâches pour faire en sorte d'afficher un bouton d'édition si l'utilisateur est propriétaire de la liste de tâches et qu'elle n'est pas en lecture seule.

L'appuie sur ce bouton basculera la vue en mode édition et affichera alors le bouton de suppression de la liste des tâches.

De plus, en mode d'édition, vous afficherez un formulaire permettant d'éditer le titre le de la liste lors du double clic sur celui-ci. Vous pourrez créer pour l'occasion un nouveau composant permettant d'éditer une zone de texte en faisant apparaitre un Popover par exemple.

La validation de la modification provoquera une requête vers l'API permettant de mettre à jour le titre de la liste. Vous prendrez soin de préciser les entêtes de données supportées par Api Platform : « application/merge-patch+json ».

Toujours dans la vue détaillée d'une liste de tâches, vous allez afficher la liste des collaborateurs de la liste de tâches. Pour chaque collaborateur, vous afficherez ses permissions (s'il est propriétaire et/ou en lecture seul).

Lors du mode d'édition de la liste de tâches, vous afficherez un formulaire contenant un composant MUI Autocomplete permettant de sélectionner les collaborateurs à ajouter et un bouton de soumission réalisant l'ajout des collaborateurs à la tâche.

Le composant MUI Autocomplete pourra recevoir de multiples valeurs et être chargé à l'aide de requêtes AJAX.

Pour obtenir la liste des utilisateurs, vous pourrez utiliser le « endpoint » de l'API : « /api/users ». Afin de ne pas proposer à nouveau des utilisateurs déjà présents, vous pourrez utiliser le filtre except qui reçoit une liste d'identifiants d'utilisateurs à exclure, séparé par une virgule.

La création d'une nouvelle collaboration sera réalisé à l'aide d'une requête AJAX vers le « endpoint » de l'API : « /api/collaborations » avec la méthode POST.

Toujours en mode d'édition, vous ajouterez un bouton permettant de supprimer une collaboration, vous prendrez soin de demander la confirmation à l'utilisateur.

Lors de l'édition d'une liste de tâches, vous modifierez l'affichage des collaborateurs afin que l'utilisateur puisse modifier les permissions d'un collaborateur.