Utmaning: Hämta och Visa Data
Låt oss fokusera på nästa komponent, LatestInvoices. Dess syfte är att visa de fem senaste fakturorna, sorterade kronologiskt efter datum.
Det kan verka enkelt att uppnå detta med JavaScript. Men när applikationen växer och mer data tillkommer är det att föredra att hantera sortering och begränsning av fakturor med SQL. Detta förhindrar att frontend belastas med onödiga beräkningar.
För att granska funktionen fetchLatestInvoices, besök app/lib/data.ts.
Tillbaka till projektet
Vi kommer att använda funktionen fetchLatestInvoices på instrumentpanelsidan för att hämta de senaste fakturorna och visa dem med komponenten LatestInvoices.
Glöm inte att besöka app/ui/dashboard/latest-invoices.tsx och avkommentera den tillhandahållna UI:n.
Utmaning
Nu är det din tur att hämta data och presentera informationen för användaren.
På dashboardsidan har vi främst en Card-komponent. Din uppgift är att importera funktionen fetchCardData, som tillhandahåller:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Baserat på den hämtade datan, avkommentera motsvarande Card-komponent.
Resultat
I praktiken
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Can you explain how the fetchLatestInvoices function works?
Where can I find the LatestInvoices component code?
What should I do if the LatestInvoices component doesn't display any data?
Awesome!
Completion rate improved to 2.08Utmaning: Hämta och Visa Data
Svep för att visa menyn
Låt oss fokusera på nästa komponent, LatestInvoices. Dess syfte är att visa de fem senaste fakturorna, sorterade kronologiskt efter datum.
Det kan verka enkelt att uppnå detta med JavaScript. Men när applikationen växer och mer data tillkommer är det att föredra att hantera sortering och begränsning av fakturor med SQL. Detta förhindrar att frontend belastas med onödiga beräkningar.
För att granska funktionen fetchLatestInvoices, besök app/lib/data.ts.
Tillbaka till projektet
Vi kommer att använda funktionen fetchLatestInvoices på instrumentpanelsidan för att hämta de senaste fakturorna och visa dem med komponenten LatestInvoices.
Glöm inte att besöka app/ui/dashboard/latest-invoices.tsx och avkommentera den tillhandahållna UI:n.
Utmaning
Nu är det din tur att hämta data och presentera informationen för användaren.
På dashboardsidan har vi främst en Card-komponent. Din uppgift är att importera funktionen fetchCardData, som tillhandahåller:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Baserat på den hämtade datan, avkommentera motsvarande Card-komponent.
Resultat
I praktiken
Tack för dina kommentarer!
