Chapter 8 - use dynamic rendering and simulate timeout

Chapter 7 - fetch data from server
Chapter 5 - Highlight navigation
2023-12-30 14:57:12 +01:00 · 2023-12-30 14:57:11 +01:00 · 2023-12-27 14:28:32 +01:00 · 2023-12-27 14:24:09 +01:00 · 2023-12-27 14:21:42 +01:00 · 2023-12-27 14:17:41 +01:00
14 changed files with 134 additions and 30 deletions
--- a/app/dashboard/customers/page.tsx
+++ b/app/dashboard/customers/page.tsx
@@ -0,0 +1,3 @@
+export default function CustomersPage() {
+    return <p>Customers page</p>
+}
--- a/app/dashboard/invoices/page.tsx
+++ b/app/dashboard/invoices/page.tsx
@@ -0,0 +1,3 @@
+export default function InvoicesPage() {
+    return <p>Invoices page</p>
+}
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -0,0 +1,12 @@
+import SideNav from '@/app/ui/dashboard/sidenav';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
+            <div className="w-full flex-none md:w-64">
+                <SideNav />
+            </div>
+            <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+        </div>
+    );
+}
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -0,0 +1,39 @@
+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 {
+        numberOfInvoices,
+        numberOfCustomers,
+        totalPaidInvoices,
+        totalPendingInvoices,
+    } = await fetchCardData();
+    return (
+        <main>
+            <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
+                Dashboard
+            </h1>
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                <Card title="Collected" value={totalPaidInvoices} type="collected" />
+                <Card title="Pending" value={totalPendingInvoices} type="pending" />
+                <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
+                <Card
+                  title="Total Customers"
+                  value={numberOfCustomers}
+                  type="customers"
+                />
+            </div>
+            <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
+                 <RevenueChart revenue={revenue}  />
+                 <LatestInvoices latestInvoices={latestInvoices} />
+            </div>
+        </main>
+    );
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,3 +1,6 @@
+import '@/app/ui/global.css';
+import { inter } from '@/app/ui/fonts';
+
 export default function RootLayout({
  children,
 }: {
@@ -5,7 +8,7 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en">
-      <body>{children}</body>
+    <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
 }
--- a/app/lib/data.ts
+++ b/app/lib/data.ts
@@ -9,21 +9,23 @@ import {
  Revenue,
 } from './definitions';
 import { formatCurrency } from './utils';
+import {unstable_noStore as noStore} from "next/cache";

 export async function fetchRevenue() {
  // Add noStore() here prevent the response from being cached.
  // This is equivalent to in fetch(..., {cache: 'no-store'}).
+  noStore()

  try {
    // Artificially delay a response for demo purposes.
    // Don't do this in production :)

-    // console.log('Fetching revenue data...');
-    // await new Promise((resolve) => setTimeout(resolve, 3000));
+    console.log('Fetching revenue data...');
+    await new Promise((resolve) => setTimeout(resolve, 3000));

    const data = await sql<Revenue>`SELECT * FROM revenue`;

-    // console.log('Data fetch completed after 3 seconds.');
+    console.log('Data fetch completed after 3 seconds.');

    return data.rows;
  } catch (error) {
@@ -33,6 +35,7 @@ export async function fetchRevenue() {
 }

 export async function fetchLatestInvoices() {
+  noStore();
  try {
    const data = await sql<LatestInvoiceRaw>`
      SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id
@@ -53,6 +56,7 @@ export async function fetchLatestInvoices() {
 }

 export async function fetchCardData() {
+  noStore();
  try {
    // You can probably combine these into a single SQL query
    // However, we are intentionally splitting them to demonstrate
@@ -92,6 +96,7 @@ export async function fetchFilteredInvoices(
  query: string,
  currentPage: number,
 ) {
+  noStore();
  const offset = (currentPage - 1) * ITEMS_PER_PAGE;

  try {
@@ -124,6 +129,7 @@ export async function fetchFilteredInvoices(
 }

 export async function fetchInvoicesPages(query: string) {
+  noStore();
  try {
    const count = await sql`SELECT COUNT(*)
    FROM invoices
@@ -145,6 +151,7 @@ export async function fetchInvoicesPages(query: string) {
 }

 export async function fetchInvoiceById(id: string) {
+  noStore();
  try {
    const data = await sql<InvoiceForm>`
      SELECT
@@ -170,6 +177,7 @@ export async function fetchInvoiceById(id: string) {
 }

 export async function fetchCustomers() {
+  noStore();
  try {
    const data = await sql<CustomerField>`
      SELECT
@@ -188,6 +196,7 @@ export async function fetchCustomers() {
 }

 export async function fetchFilteredCustomers(query: string) {
+  noStore();
  try {
    const data = await sql<CustomersTableType>`
 		SELECT
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,16 +1,21 @@
+import styles from '@/app/ui/home.module.css';
 import AcmeLogo from '@/app/ui/acme-logo';
 import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
+import {lusitana} from "@/app/ui/fonts";
+import Image from 'next/image';

 export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
-        {/* <AcmeLogo /> */}
+         <AcmeLogo />
      </div>
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
-          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
+          <div className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"/>
+          <div className={styles.shape}></div>
+          <p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
            <strong>Welcome to Acme.</strong> This is the example for the{' '}
            <a href="https://nextjs.org/learn/" className="text-blue-500">
              Next.js Learn Course
@@ -26,6 +31,13 @@ export default function Page() {
        </div>
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
          {/* Add Hero Images Here */}
+            <Image
+                src="/hero-desktop.png"
+                width={1000}
+                height={760}
+                className="hidden md:block"
+                alt="Screenshots of the dashboard project showing desktop version"
+            />
        </div>
      </div>
    </main>
--- a/app/ui/dashboard/latest-invoices.tsx
+++ b/app/ui/dashboard/latest-invoices.tsx
@@ -16,7 +16,7 @@ export default async function LatestInvoices({
      <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
        {/* NOTE: comment in this code when you get to this point in the course */}

-        {/* <div className="bg-white px-6">
+        <div className="bg-white px-6">
          {latestInvoices.map((invoice, i) => {
            return (
              <div
@@ -53,7 +53,7 @@ export default async function LatestInvoices({
              </div>
            );
          })}
-        </div> */}
+        </div>
        <div className="flex items-center pb-2 pt-6">
          <ArrowPathIcon className="h-5 w-5 text-gray-500" />
          <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
--- a/app/ui/dashboard/nav-links.tsx
+++ b/app/ui/dashboard/nav-links.tsx
@@ -1,9 +1,14 @@
+'use client'
 import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
 } from '@heroicons/react/24/outline';

+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import clsx from 'clsx';
+
 // Map of links to display in the side navigation.
 // Depending on the size of the application, this would be stored in a database.
 const links = [
@@ -17,19 +22,24 @@ const links = [
 ];

 export default function NavLinks() {
+  const pathname = usePathname();
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
-          <a
+          <Link
            key={link.name}
            href={link.href}
-            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
-          >
+            className={clsx(
+                'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
+                {
+                  'bg-sky-100 text-blue-600': pathname === link.href,
+                },
+            )}          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
-          </a>
+          </Link>
        );
      })}
    </>
--- a/app/ui/dashboard/revenue-chart.tsx
+++ b/app/ui/dashboard/revenue-chart.tsx
@@ -17,11 +17,11 @@ export default async function RevenueChart({
  const chartHeight = 350;
  // NOTE: comment in this code when you get to this point in the course

-  // const { yAxisLabels, topLabel } = generateYAxis(revenue);
+  const { yAxisLabels, topLabel } = generateYAxis(revenue);

-  // if (!revenue || revenue.length === 0) {
-  //   return <p className="mt-4 text-gray-400">No data available.</p>;
-  // }
+  if (!revenue || revenue.length === 0) {
+    return <p className="mt-4 text-gray-400">No data available.</p>;
+  }

  return (
    <div className="w-full md:col-span-4">
@@ -30,7 +30,7 @@ export default async function RevenueChart({
      </h2>
      {/* NOTE: comment in this code when you get to this point in the course */}

-      {/* <div className="rounded-xl bg-gray-50 p-4">
+       <div className="rounded-xl bg-gray-50 p-4">
        <div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
          <div
            className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
@@ -59,7 +59,7 @@ export default async function RevenueChart({
          <CalendarIcon className="h-5 w-5 text-gray-500" />
          <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
        </div>
-      </div> */}
+      </div>
    </div>
  );
 }
--- a/app/ui/fonts.ts
+++ b/app/ui/fonts.ts
@@ -0,0 +1,5 @@
+import { Inter, Lusitana } from 'next/font/google';
+
+export const inter = Inter({ subsets: ['latin'] });
+
+export const lusitana = Lusitana({weight: "400", subsets: ['latin']});
--- a/app/ui/home.module.css
+++ b/app/ui/home.module.css
@@ -0,0 +1,7 @@
+.shape {
+    height: 0;
+    width: 0;
+    border-bottom: 30px solid black;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-dashboard2",
+  "name": "nextjs-dashboard",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
@@ -1534,12 +1534,12 @@
      "dev": true
    },
    "node_modules/@vercel/postgres": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@vercel/postgres/-/postgres-0.5.0.tgz",
-      "integrity": "sha512-MFWp9SZmADqBe2x2mzEvwmGLiwOd8PVkUxYeBZx/RqdHl0bd8/1BH0zBR+zSimGyi9P/MVtZoJLdf5dkWw9m5Q==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@vercel/postgres/-/postgres-0.5.1.tgz",
+      "integrity": "sha512-JKl8QOBIDnifhkxAhIKtY0A5Tb8oWBf2nzZhm0OH7Ffjsl0hGVnDL2w1/FCfpX8xna3JAWM034NGuhZfTFdmiw==",
      "dependencies": {
        "@neondatabase/serverless": "0.6.0",
-        "bufferutil": "4.0.7",
+        "bufferutil": "4.0.8",
        "utf-8-validate": "6.0.3",
        "ws": "8.14.2"
      },
@@ -2037,9 +2037,9 @@
      }
    },
    "node_modules/bufferutil": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
-      "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
      "hasInstallScript": true,
      "dependencies": {
        "node-gyp-build": "^4.3.0"
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
    "dev": "next dev",
    "prettier": "prettier --write --ignore-unknown .",
    "prettier:check": "prettier --check --ignore-unknown .",
-    "start": "next start"
+    "start": "next start",
+    "seed": "node -r dotenv/config ./scripts/seed.js"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.18",
Author	SHA1	Message	Date
Jakub Knetl	62b58918d0	Chapter 8 - use dynamic rendering and simulate timeout	2023-12-30 14:57:12 +01:00
Jakub Knetl	48c24de676	Chapter 7 - fetch data from server	2023-12-30 14:57:11 +01:00
Jakub Knetl	938c783e0f	Chapter 5 - Highlight navigation	2023-12-27 14:28:32 +01:00
Jakub Knetl	e534c6d727	Chapter 5 - use next Link for navigation	2023-12-27 14:24:09 +01:00
Jakub Knetl	396e81bd41	Chapter 4 - add layout	2023-12-27 14:21:42 +01:00
Jakub Knetl	8b8b67b62c	Chapter 4 - add routers for dashboard pages	2023-12-27 14:17:41 +01:00
Jakub Knetl	eb493e7893	Chapter 3 - add responsive image	2023-12-27 14:11:58 +01:00
Jakub Knetl	961cd66754	Chapter 3 - add fonts	2023-12-27 13:04:51 +01:00
Jakub Knetl	982169d4b0	Chapter 2 - add css module	2023-12-27 12:52:00 +01:00
Jakub Knetl	5a2b499001	Chapter 2 - add global CSS styles with tailwind to root layout	2023-12-27 07:35:47 +01:00