Desafio: Recuperar e Exibir Dados
Vamos focar no próximo componente, LatestInvoices. Seu objetivo é exibir as cinco últimas faturas, ordenadas cronologicamente por data.
Pode parecer que realizar isso com JavaScript é simples. No entanto, à medida que o aplicativo cresce e mais dados aparecem, é preferível lidar com a ordenação e a limitação das faturas utilizando SQL. Essa abordagem evita sobrecarregar o frontend com cálculos desnecessários.
Para inspecionar a função fetchLatestInvoices, acesse app/lib/data.ts.
De volta ao projeto
Utilizaremos a função fetchLatestInvoices na página do dashboard para recuperar as faturas mais recentes e exibi-las usando o componente LatestInvoices.
Não se esqueça de acessar app/ui/dashboard/latest-invoices.tsx e descomentar a interface fornecida.
Desafio
Agora, é sua vez de buscar os dados e apresentar as informações ao usuário.
Principalmente, temos um componente Card na página do painel. Sua tarefa é importar a função fetchCardData, que fornece:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Com base nos dados recuperados, descomente o componente Card correspondente.
Resultado
Na Prática
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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.08Desafio: Recuperar e Exibir Dados
Deslize para mostrar o menu
Vamos focar no próximo componente, LatestInvoices. Seu objetivo é exibir as cinco últimas faturas, ordenadas cronologicamente por data.
Pode parecer que realizar isso com JavaScript é simples. No entanto, à medida que o aplicativo cresce e mais dados aparecem, é preferível lidar com a ordenação e a limitação das faturas utilizando SQL. Essa abordagem evita sobrecarregar o frontend com cálculos desnecessários.
Para inspecionar a função fetchLatestInvoices, acesse app/lib/data.ts.
De volta ao projeto
Utilizaremos a função fetchLatestInvoices na página do dashboard para recuperar as faturas mais recentes e exibi-las usando o componente LatestInvoices.
Não se esqueça de acessar app/ui/dashboard/latest-invoices.tsx e descomentar a interface fornecida.
Desafio
Agora, é sua vez de buscar os dados e apresentar as informações ao usuário.
Principalmente, temos um componente Card na página do painel. Sua tarefa é importar a função fetchCardData, que fornece:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Com base nos dados recuperados, descomente o componente Card correspondente.
Resultado
Na Prática
Obrigado pelo seu feedback!
