Uitdaging: Gegevens Ophalen en Weergeven
Laten we ons richten op de volgende component, LatestInvoices. Het doel hiervan is om de laatste vijf facturen weer te geven, chronologisch gesorteerd op datum.
Het lijkt misschien eenvoudig om dit met JavaScript te realiseren. Naarmate de applicatie echter groeit en er meer gegevens bijkomen, is het beter om het sorteren en beperken van facturen met SQL uit te voeren. Deze aanpak voorkomt dat het frontend onnodig wordt belast met extra berekeningen.
Bekijk de functie fetchLatestInvoices in app/lib/data.ts.
Terug naar het project
We gebruiken de functie fetchLatestInvoices op de dashboardpagina om de meest recente facturen op te halen en deze weer te geven met de component LatestInvoices.
Vergeet niet om naar app/ui/dashboard/latest-invoices.tsx te gaan en de meegeleverde UI te decommentariëren.
Uitdaging
Nu is het jouw beurt om de gegevens op te halen en de informatie aan de gebruiker te tonen.
Op de dashboardpagina is er een Card-component aanwezig. De opdracht is om de functie fetchCardData te importeren, die het volgende aanlevert:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Op basis van de opgehaalde gegevens, de bijbehorende Card-component decommentariëren.
Resultaat
In de praktijk
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.08Uitdaging: Gegevens Ophalen en Weergeven
Veeg om het menu te tonen
Laten we ons richten op de volgende component, LatestInvoices. Het doel hiervan is om de laatste vijf facturen weer te geven, chronologisch gesorteerd op datum.
Het lijkt misschien eenvoudig om dit met JavaScript te realiseren. Naarmate de applicatie echter groeit en er meer gegevens bijkomen, is het beter om het sorteren en beperken van facturen met SQL uit te voeren. Deze aanpak voorkomt dat het frontend onnodig wordt belast met extra berekeningen.
Bekijk de functie fetchLatestInvoices in app/lib/data.ts.
Terug naar het project
We gebruiken de functie fetchLatestInvoices op de dashboardpagina om de meest recente facturen op te halen en deze weer te geven met de component LatestInvoices.
Vergeet niet om naar app/ui/dashboard/latest-invoices.tsx te gaan en de meegeleverde UI te decommentariëren.
Uitdaging
Nu is het jouw beurt om de gegevens op te halen en de informatie aan de gebruiker te tonen.
Op de dashboardpagina is er een Card-component aanwezig. De opdracht is om de functie fetchCardData te importeren, die het volgende aanlevert:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Op basis van de opgehaalde gegevens, de bijbehorende Card-component decommentariëren.
Resultaat
In de praktijk
Bedankt voor je feedback!
