Integration CRUD

On part de la base de code de l'exercice précédent.

Exercices

Stocker les tâches dans le localStorage

Stocker les tâches dans le localStorage. Lors du chargement de l'application, les tâches doivent être récupérées depuis le localStorage. Lors de l'ajout d'une tâche, les tâches doivent être mises à jour dans le localStorage.

		useEffect(() => {
  const tasks = JSON.parse(localStorage.getItem('tasks'));
  // ...
}, []);
	

Mettre le formulaire dans un composant Modal

Je vous conseille d'utiliser shadcn/ui pour avoir un composant modal déjà fonctionnel et stylisé. Pour l'installer avec react router, suffit de suivre ces instructions. PS: Faites attention et lisez bien ! La première commande proposée est une commande pour CRÉER un nouveau projet, et vous avez déjà un projet existant !

		npx shadcn@latest add dialog
	

Puis je vous laisse suivre cette documentation pour utiliser correctement le composant. Vous avez plusieurs exemples, servez vous en.

PS: Je ne sais pas pourquoi, mais sur la doc de shadcn, dans le premier exemple, le form est à l'intérieur de <Dialog>. Cela ne fonctionnera pas, il faut que le form soit à l'intérieur de <DialogContent>.

		<DialogContent>
  <form onSubmit={handleSubmit}>
    {/* ... */}
  </form>
</DialogContent>
	

Ajouter un ID unique à chaque tâche

À chaque tâche, il faut ajouter un ID unique. Pour ça, vous pouvez utiliser crypto.randomUUID(), qui génère un ID unique à chaque fois.

Ajouter un bouton pour modifier une tâche

Ajouter un bouton pour modifier une tâche. Lors du clic sur le bouton, le formulaire de modification doit s'ouvrir.

		setTasks((prevTasks) => {
  // On passe sur toutes les tâches
  return prevTasks.map((task) => {
    // Lorsque l'id de la tâche est le même que l'id de la tâche à modifier, on retourne la tâche modifiée
    if (task.id === id) {
      return { ...task, ...updatedTask };
    }
  });
});