From 4be9de1269fad4aa5aa4da19e19af7f60aae623e Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 6 Oct 2023 15:58:05 +0100
Subject: [PATCH] Stream Latest Invoices (#202)

Co-authored-by: Stephanie Dietz <49788645+StephDietz@users.noreply.github.com>
---
 .../15-final/app/dashboard/(overview)/page.tsx     | 14 ++++++++------
 .../15-final/app/ui/dashboard/latest-invoices.tsx  | 12 +++++-------
 .../15-final/app/ui/dashboard/revenue-chart.tsx    |  3 ++-
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/dashboard/15-final/app/dashboard/(overview)/page.tsx b/dashboard/15-final/app/dashboard/(overview)/page.tsx
index 1730bba..0f31a71 100644
--- a/dashboard/15-final/app/dashboard/(overview)/page.tsx
+++ b/dashboard/15-final/app/dashboard/(overview)/page.tsx
@@ -2,14 +2,14 @@ import Card from '@/app/ui/dashboard/card';
 import RevenueChart from '@/app/ui/dashboard/revenue-chart';
 import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
 import { lusitana } from '@/app/ui/fonts';
-import { fetchLatestInvoices, fetchCardData } from '@/app/lib/data';
+import { fetchCardData } from '@/app/lib/data';
 import { Suspense } from 'react';
-import { RevenueChartSkeleton } from '@/app/ui/dashboard/skeletons';
-
-export const dynamic = 'force-dynamic';
+import {
+  RevenueChartSkeleton,
+  LatestInvoicesSkeleton,
+} from '@/app/ui/dashboard/skeletons';
 
 export default async function Page() {
-  const latestInvoices = await fetchLatestInvoices();
   const {
     numberOfInvoices,
     numberOfCustomers,
@@ -36,7 +36,9 @@ export default async function Page() {
         <Suspense fallback={<RevenueChartSkeleton />}>
           <RevenueChart />
         </Suspense>
-        <LatestInvoices latestInvoices={latestInvoices} />
+        <Suspense fallback={<LatestInvoicesSkeleton />}>
+          <LatestInvoices />
+        </Suspense>
       </div>
     </main>
   );
diff --git a/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx b/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx
index 5b18d86..8326797 100644
--- a/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx
+++ b/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx
@@ -1,14 +1,12 @@
-import { LatestInvoice } from '@/app/lib/definitions';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Image from 'next/image';
 import { lusitana } from '@/app/ui/fonts';
+import { fetchLatestInvoices } from '@/app/lib/data';
+
+export default async function LatestInvoices() {
+  const latestInvoices = await fetchLatestInvoices();
 
-export default async function LatestInvoices({
-  latestInvoices,
-}: {
-  latestInvoices: LatestInvoice[];
-}) {
   return (
     <div className="flex w-full flex-col md:col-span-4 lg:col-span-4">
       <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
@@ -45,7 +43,7 @@ export default async function LatestInvoices({
                   </div>
                 </div>
                 <p
-                  className={`${lusitana.className} md:text-base, truncate text-sm font-medium`}
+                  className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
                 >
                   {invoice.amount}
                 </p>
diff --git a/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx b/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx
index 72dadd2..63b4726 100644
--- a/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx
+++ b/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx
@@ -1,7 +1,8 @@
 import { generateYAxis } from '@/app/lib/utils';
-import { fetchRevenue } from '@/app/lib/data';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
+import { fetchRevenue } from '@/app/lib/data';
+
 // This component is representational only.
 // For data visualization UI, check out:
 // https://www.tremor.so/