Défi : Récupération et Affichage des Données
Concentrons-nous sur le composant suivant, LatestInvoices. Son objectif est d'afficher les cinq dernières factures, triées chronologiquement par date.
Vous pourriez penser qu'il est simple de réaliser cela avec JavaScript. Cependant, à mesure que l'application se développe et que davantage de données apparaissent, il est préférable de gérer le tri et la limitation des factures via SQL. Cette méthode évite de surcharger le frontend avec des calculs inutiles.
Pour examiner la fonction fetchLatestInvoices, veuillez consulter 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 à l'aide du composant LatestInvoices.
N'oubliez pas de visiter app/ui/dashboard/latest-invoices.tsx et de décommenter l'interface utilisateur fournie.
Défi
C'est maintenant à vous de récupérer les données et de présenter les informations à l'utilisateur.
Principalement, nous disposons d'un composant Card sur la page du tableau de bord. Votre tâche consiste à 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
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.08Défi : Récupération et Affichage des Données
Glissez pour afficher le menu
Concentrons-nous sur le composant suivant, LatestInvoices. Son objectif est d'afficher les cinq dernières factures, triées chronologiquement par date.
Vous pourriez penser qu'il est simple de réaliser cela avec JavaScript. Cependant, à mesure que l'application se développe et que davantage de données apparaissent, il est préférable de gérer le tri et la limitation des factures via SQL. Cette méthode évite de surcharger le frontend avec des calculs inutiles.
Pour examiner la fonction fetchLatestInvoices, veuillez consulter 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 à l'aide du composant LatestInvoices.
N'oubliez pas de visiter app/ui/dashboard/latest-invoices.tsx et de décommenter l'interface utilisateur fournie.
Défi
C'est maintenant à vous de récupérer les données et de présenter les informations à l'utilisateur.
Principalement, nous disposons d'un composant Card sur la page du tableau de bord. Votre tâche consiste à 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
Merci pour vos commentaires !
