Challenge: Retrieving and Displaying Data
Let's focus on the next component, LatestInvoices
. Its purpose is to display the last five invoices, sorted chronologically by date.
You might think that achieving this with JavaScript is straightforward. However, as the app grows and more data appears, it's preferable to handle the sorting and limiting of invoices using SQL. This approach prevents overloading the frontend with unnecessary calculations.
To inspect the fetchLatestInvoices
function, please visit app/lib/data.ts
.
Back to the Project
We'll employ the fetchLatestInvoices
function on the dashboard page to retrieve the most recent invoices and display them using the LatestInvoices
component.
Don't forget to visit app/ui/dashboard/latest-invoices.tsx
and uncomment the provided UI.
Challenge
Now, it's your chance to fetch the data and present the information to the user.
Primarily, we have a Card
component on the dashboard page. Your task is to import the fetchCardData
function, which provides:
numberOfSellers
;numberOfInvoices
;totalFulfilledInvoices
;totalAwaitingInvoices
.
Based on the retrieved data, uncomment the corresponding Card
component.
Result
In Practice
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.08
Challenge: Retrieving and Displaying Data
Stryg for at vise menuen
Let's focus on the next component, LatestInvoices
. Its purpose is to display the last five invoices, sorted chronologically by date.
You might think that achieving this with JavaScript is straightforward. However, as the app grows and more data appears, it's preferable to handle the sorting and limiting of invoices using SQL. This approach prevents overloading the frontend with unnecessary calculations.
To inspect the fetchLatestInvoices
function, please visit app/lib/data.ts
.
Back to the Project
We'll employ the fetchLatestInvoices
function on the dashboard page to retrieve the most recent invoices and display them using the LatestInvoices
component.
Don't forget to visit app/ui/dashboard/latest-invoices.tsx
and uncomment the provided UI.
Challenge
Now, it's your chance to fetch the data and present the information to the user.
Primarily, we have a Card
component on the dashboard page. Your task is to import the fetchCardData
function, which provides:
numberOfSellers
;numberOfInvoices
;totalFulfilledInvoices
;totalAwaitingInvoices
.
Based on the retrieved data, uncomment the corresponding Card
component.
Result
In Practice
Tak for dine kommentarer!