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 composant devrait être comme fils de votre composant Main qui réalise le contrôle de l'authentification de l'utilisateur.

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 Modal 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/task_lists ».

Pour chaque liste de tâches, vous afficherez le titre de la liste, ainsi qu'une icône si l'utilisateur est propriétaire de la liste.

Vous rendrez chaque liste de tâches cliquable et support d'un lien vers la route de l'application « lists/: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 ajouterez une nouvelle route à votre routeur, correspondant à la route que vous venez d'utiliser (« lists/:id »). Cette route permet d'accéder au détail d'une liste de tâches. Elle 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 cet 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 requêtes 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.

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 l'affichage des collaborateurs, vous utiliserez le composant AvatarGroup de MUI.

Le chargement de cette partie étant asynchrone, vous penserez à afficher un indicateur de chargement lors du chargement des données.

Lors du mode d'édition de la liste de tâches, vous proposerez un bouton permettant d'afficher un formulaire contenant un composant MUI Autocomplete avec la propriété multiple 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/task_list/{id}/collaborators ».

La création ou la suppression de nouvelles collaborations sera réalisée à l'aide de requêtes AJAX vers les « endpoint » de l'API : « /api/task_lists/{id}/collaborators/{user_id} » avec les méthodes POST ou DELETE.

Dans la vue du détail d'une liste de tâches, vous finaliserez l'affichage avec la liste des tâches lui étant attachée. En mode d'édition, vous proposerez à l'utilisateur d'ajouter une nouvelle tâche, d'éditer ou supprimer une tâche existante.

Le chargement de cette partie étant asynchrone, vous penserez à afficher un indicateur de chargement lors du chargement des données.