Keskitytään seuraavaksi komponenttiin LatestInvoices. Sen tarkoituksena on näyttää viisi viimeisintä laskua, järjestettynä aikajärjestyksessä päivämäärän mukaan.

Saatat ajatella, että tämän toteuttaminen JavaScriptillä on yksinkertaista. Sovelluksen kasvaessa ja datamäärän lisääntyessä on kuitenkin suositeltavaa hoitaa laskujen järjestäminen ja rajaaminen SQL:n avulla. Näin vältetään tarpeettomat laskutoimitukset frontendissä.

Tutustuaksesi fetchLatestInvoices-funktioon, siirry tiedostoon app/lib/data.ts.

Takaisin projektiin

Käytämme fetchLatestInvoices-funktiota dashboard-sivulla hakeaksemme uusimmat laskut ja näytämme ne LatestInvoices-komponentilla.

Muista siirtyä tiedostoon app/ui/dashboard/latest-invoices.tsx ja poistaa kommenttimerkinnät annetusta käyttöliittymästä.

Haaste

Nyt on sinun vuorosi hakea data ja esittää tiedot käyttäjälle.

Pääasiassa käytössä on Card-komponentti kojelautasivulla. Tehtävänäsi on tuoda fetchCardData-funktio, joka tarjoaa:

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

Haetun datan perusteella poista kommentointi vastaavalta Card-komponentilta.

Tulos

Käytännössä