<aside> 💡

Exercice 5

Implémenter le CRUD permettant la gestion des UEs. Ça implique:

• Création d’UE
• Modifications
• Suppressions </aside>

Préparation de l’architecture

Il est important de garder une structure de dossier similaire dans chaque fonctionnalité.

Créer un dossier features/ues qui contiendra les dossiers et fichiers

• hooks
• components
• UesPage.tsx

Une fois réalisé, vous pouvez vous rendre dans le fichier index.tsx et ajouter la nouvelle route qui pointera vers la page d’ues. Ajoutez une nouvelle entrée dans la Sidebar qui pointe vers cette route.

Ajout du hook de création

En gardant la même logique que dans parcours, créer les types ainsi que les hooks nécessaires à la création d’une UE.

Création d’une modal

Ajoutez une modal permettant de créer une UE

Ajout de l’optimistic

Au succès de la création, ajouter la nouvelle UE dans la liste.

Reste du CRUD

Implémentez le reste du CRUD comme fait précédemment.

Transformer en composant du code dupliqué

Le principe même de React est d’écrire du code ré-utilisable tout en gardant des composants à une taille raisonnable et en n’ayant pas de logique métier à l’intérieur.

Commençons à identifier des morceaux de code pour lesquels nous ré-écrivons beaucoup de tailwindcss et pour lesquels une abstraction en un composant serait nécessaire.