Pratique et Défi : Récupération de Données

Concentrons-nous sur le prochain composant, LatestInvoices. Son objectif est d'afficher les cinq dernières factures, triées chronologiquement par date.

Vous pourriez penser que réaliser cela avec JavaScript est simple. Cependant, à mesure que l'application se développe et que plus de données apparaissent, il est préférable de gérer le tri et la limitation des factures en utilisant SQL. Cette approche évite de surcharger le frontend avec des calculs inutiles.

Pour inspecter la fonction fetchLatestInvoices, veuillez visiter app/lib/data.ts.

Retour au Projet

Nous utiliserons la fonction fetchLatestInvoices sur la page du tableau de bord pour récupérer les factures les plus récentes et les afficher en utilisant le composant LatestInvoices.

N'oubliez pas de visiter app/ui/dashboard/latest-invoices.tsx et de décommenter l'interface utilisateur fournie.

Défi

Maintenant, c'est votre chance de récupérer les données et de présenter l'information à l'utilisateur.

Principalement, nous avons un composant Card sur la page du tableau de bord. Votre tâche est d'importer la fonction fetchCardData, qui fournit :

• numberOfSellers;
• numberOfInvoices;
• totalFulfilledInvoices;
• totalAwaitingInvoices.

En fonction des données récupérées, décommentez le composant Card correspondant.

Résultat

En Pratique