From d5c7f0156b00a27114f1b71e2c969ca327eee594 Mon Sep 17 00:00:00 2001 From: treejamie Date: Wed, 9 Apr 2025 07:49:15 +0100 Subject: [PATCH 1/3] Updated the readme --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a0fa470..8575d23 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t 6. [Setting Up Your Database ♻️][2-6] 7. [Fetching Data ♻️][2-7] 8. [Static and Dynamic Rendering ♻️][2-8] -9. Streaming 🚧 +9. [Streaming ♻️][2-9] 10. Partial Prerendering ️🚧 11. Adding Search and Pagination 🚧 12. Mutating Data 🚧 @@ -57,4 +57,5 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t [2-5]: https://github.com/treejamie/next-js-learn/pull/12 [2-6]: https://github.com/treejamie/next-js-learn/pull/13 [2-7]: https://github.com/treejamie/next-js-learn/pull/15 -[2-8]: https://github.com/treejamie/next-js-learn/pull/16 \ No newline at end of file +[2-8]: https://github.com/treejamie/next-js-learn/pull/16 +[2-9]: https://github.com/treejamie/next-js-learn/pull/16 \ No newline at end of file From 6ac78b2e536f4f9e6ba6758e4cd0dad18ca59425 Mon Sep 17 00:00:00 2001 From: treejamie Date: Wed, 9 Apr 2025 08:21:47 +0100 Subject: [PATCH 2/3] Added back in the delay into the data.ts file. It was important to simulate the streaming nature --- README.md | 2 +- app-router/nextjs-dashboard/app/lib/data.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8575d23..b4c63c1 100644 --- a/README.md +++ b/README.md @@ -58,4 +58,4 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t [2-6]: https://github.com/treejamie/next-js-learn/pull/13 [2-7]: https://github.com/treejamie/next-js-learn/pull/15 [2-8]: https://github.com/treejamie/next-js-learn/pull/16 -[2-9]: https://github.com/treejamie/next-js-learn/pull/16 \ No newline at end of file +[2-9]: https://github.com/treejamie/next-js-learn/pull/17 \ No newline at end of file diff --git a/app-router/nextjs-dashboard/app/lib/data.ts b/app-router/nextjs-dashboard/app/lib/data.ts index 58698d1..1f5a6ee 100644 --- a/app-router/nextjs-dashboard/app/lib/data.ts +++ b/app-router/nextjs-dashboard/app/lib/data.ts @@ -16,8 +16,11 @@ export async function fetchRevenue() { // this is where chapter 8 inserted a delay. // it was to labour the point that with dynamic rendering // you can only be as fast as your slowest fetch. + console.log('Fetching revenue data...'); + await new Promise((resolve) => setTimeout(resolve, 3000)) // get the data and return it + console.log('Data fetch completed after 3 seconds.'); const data = await sql`SELECT * FROM revenue`; return data; } catch (error) { From 09a0640300e20073c924c26e967f91713f4a29c5 Mon Sep 17 00:00:00 2001 From: treejamie Date: Wed, 9 Apr 2025 08:42:34 +0100 Subject: [PATCH 3/3] 9 is now completed --- .../nextjs-dashboard/app/dashboard/page.tsx | 39 ------------------- app-router/nextjs-dashboard/app/lib/data.ts | 4 +- .../app/ui/dashboard/revenue-chart.tsx | 11 ++---- 3 files changed, 5 insertions(+), 49 deletions(-) delete mode 100644 app-router/nextjs-dashboard/app/dashboard/page.tsx diff --git a/app-router/nextjs-dashboard/app/dashboard/page.tsx b/app-router/nextjs-dashboard/app/dashboard/page.tsx deleted file mode 100644 index 2cd53e6..0000000 --- a/app-router/nextjs-dashboard/app/dashboard/page.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Card } from '@/app/ui/dashboard/cards'; -import RevenueChart from '@/app/ui/dashboard/revenue-chart'; -import LatestInvoices from '@/app/ui/dashboard/latest-invoices'; -import { lusitana } from '@/app/ui/fonts'; -import { fetchRevenue, fetchLatestInvoices, fetchCardData } from '@/app/lib/data'; - -export default async function Page() { - const revenue = await fetchRevenue(); - const latestInvoices = await fetchLatestInvoices(); - const { - numberOfCustomers, - numberOfInvoices, - totalPaidInvoices, - totalPendingInvoices, - - } = await fetchCardData(); - - return ( -
-

- Dashboard -

-
- - - - -
-
- - -
-
- ); -} \ No newline at end of file diff --git a/app-router/nextjs-dashboard/app/lib/data.ts b/app-router/nextjs-dashboard/app/lib/data.ts index 1f5a6ee..8a0b003 100644 --- a/app-router/nextjs-dashboard/app/lib/data.ts +++ b/app-router/nextjs-dashboard/app/lib/data.ts @@ -17,10 +17,10 @@ export async function fetchRevenue() { // it was to labour the point that with dynamic rendering // you can only be as fast as your slowest fetch. console.log('Fetching revenue data...'); - await new Promise((resolve) => setTimeout(resolve, 3000)) + await new Promise((resolve) => setTimeout(resolve, 1000)) // changed to one second // get the data and return it - console.log('Data fetch completed after 3 seconds.'); + console.log('Data fetch completed after 1 seconds.'); const data = await sql`SELECT * FROM revenue`; return data; } catch (error) { diff --git a/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx b/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx index 6a2be6e..b1cf525 100644 --- a/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx +++ b/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx @@ -1,7 +1,7 @@ import { generateYAxis } from '@/app/lib/utils'; import { CalendarIcon } from '@heroicons/react/24/outline'; import { lusitana } from '@/app/ui/fonts'; -import { Revenue } from '@/app/lib/definitions'; +import { fetchRevenue } from '@/app/lib/data'; // This component is representational only. // For data visualization UI, check out: @@ -9,14 +9,9 @@ import { Revenue } from '@/app/lib/definitions'; // https://www.chartjs.org/ // https://airbnb.io/visx/ -export default async function RevenueChart({ - revenue, -}: { - revenue: Revenue[]; -}) { +export default async function RevenueChart() { // Make component async, remove the props + const revenue = await fetchRevenue(); // Fetch data inside the component const chartHeight = 350; - // NOTE: Uncomment this code in Chapter 7 - const { yAxisLabels, topLabel } = generateYAxis(revenue); if (!revenue || revenue.length === 0) {