Learn run through 💅🏼

dashboard/final-example/app/dashboard/(overview)/loading.tsx

@@ -1,4 +1,4 @@
-import DashboardSkeleton from '@/app/ui/dashboard/skeletons';
+import DashboardSkeleton from '@/app/ui/skeletons';
 
 export default function Loading() {
   return <DashboardSkeleton />;

dashboard/final-example/app/dashboard/(overview)/page.tsx

@@ -7,7 +7,7 @@ import {
   RevenueChartSkeleton,
   LatestInvoicesSkeleton,
   CardsSkeleton,
-} from '@/app/ui/dashboard/skeletons';
+} from '@/app/ui/skeletons';
 
 export default async function Page() {
   return (

dashboard/final-example/app/dashboard/invoices/page.tsx

@@ -3,7 +3,7 @@ import Search from '@/app/ui/search';
 import Table from '@/app/ui/invoices/table';
 import { CreateInvoice } from '@/app/ui/invoices/buttons';
 import { lusitana } from '@/app/ui/fonts';
-import { InvoicesTableSkeleton } from '@/app/ui/dashboard/skeletons';
+import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
 import { Suspense } from 'react';
 import { fetchInvoicesPages } from '@/app/lib/data';
 import { Metadata } from 'next';

dashboard/final-example/app/lib/placeholder-data.js

@@ -61,13 +61,13 @@ const customers = [
   {
     id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9',
     name: 'Amy Burns',
-    email: 'amy.burns@vercel.com',
+    email: 'amy@burns.com',
     image_url: '/customers/amy-burns.png',
   },
   {
     id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB',
     name: 'Balazs Orban',
-    email: 'balazs.orban@vercel.com',
+    email: 'balazs@orban.com',
     image_url: '/customers/balazs-orban.png',
   },
 ];

dashboard/starter-example/.env.local.example → dashboard/starter-example/.env.example

@@ -1,2 +1,3 @@
 # `openssl rand -base64 32`
 AUTH_SECRET=
+AUTH_URL=http://localhost:3000/api/auth

dashboard/starter-example/app/lib/data.ts

@@ -165,7 +165,6 @@ export async function fetchInvoiceById(id: string) {
     return invoice[0];
   } catch (error) {
     console.error('Database Error:', error);
-    throw new Error('Failed to fetch invoice.');
   }
 }
 

dashboard/starter-example/app/lib/placeholder-data.js

@@ -61,13 +61,13 @@ const customers = [
   {
     id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9',
     name: 'Amy Burns',
-    email: 'amy.burns@vercel.com',
+    email: 'amy@burns.com',
     image_url: '/customers/amy-burns.png',
   },
   {
     id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB',
     name: 'Balazs Orban',
-    email: 'balazs.orban@vercel.com',
+    email: 'balazs@orban.com',
     image_url: '/customers/balazs-orban.png',
   },
 ];

dashboard/starter-example/app/page.tsx

@@ -1,4 +1,5 @@
 import AcmeLogo from '@/app/ui/acme-logo';
+
 import Link from 'next/link';
 export default function Page() {
   return (

dashboard/starter-example/app/ui/dashboard/cards.tsx

@@ -16,14 +16,16 @@ const iconMap = {
 export default async function Cards() {
   return (
     <>
-      <Card title="Collected" value={totalPaidInvoices} type="collected" />
+      {/* NOTE: comment in this code when you get to this point in the course */}
+
+      {/* <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"
-      />
+      /> */}
     </>
   );
 }

dashboard/starter-example/app/ui/dashboard/latest-invoices.tsx

@@ -2,14 +2,21 @@ import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Image from 'next/image';
 import { lusitana } from '@/app/ui/fonts';
-export default async function LatestInvoices() {
+import { LatestInvoice } from '@/app/lib/definitions';
+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`}>
         Latest Invoices
       </h2>
       <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
-        <div className="bg-white px-6">
+        {/* NOTE: comment in this code when you get to this point in the course */}
+
+        {/* <div className="bg-white px-6">
           {latestInvoices.map((invoice, i) => {
             return (
               <div
@@ -45,7 +52,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>

dashboard/starter-example/app/ui/dashboard/nav-links.tsx

@@ -3,7 +3,6 @@ import {
   HomeIcon,
   DocumentDuplicateIcon,
 } from '@heroicons/react/24/outline';
-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.
@@ -26,10 +25,7 @@ export default function NavLinks() {
           <a
             key={link.name}
             href={link.href}
-            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',
-            )}
-          >
+            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'>
             <LinkIcon className="w-6" />
             <p className="hidden md:block">{link.name}</p>
           </a>

dashboard/starter-example/app/ui/dashboard/revenue-chart.tsx

@@ -1,29 +1,37 @@
 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';
 
 // This component is representational only.
 // For data visualization UI, check out:
 // https://www.tremor.so/
 // https://www.chartjs.org/
 // https://airbnb.io/visx/
 
-export default async function RevenueChart() {
+export default async function RevenueChart({
+  revenue,
+}: {
+  revenue: Revenue[];
+}) {
   const chartHeight = 350;
-  const { yAxisLabels, topLabel } = generateYAxis(revenue);
+  // NOTE: comment in this code when you get to this point in the course
 
-  if (!revenue || revenue.length === 0) {
-    return <p className="mt-4 text-gray-400">No data available.</p>;
-  }
+  // const { yAxisLabels, topLabel } = generateYAxis(revenue);
+
+  // 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">
       <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
         Recent Revenue
       </h2>
-      <div className="rounded-xl bg-gray-50 p-4">
+      {/* 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="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
-          {/* y-axis */}
           <div
             className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
             style={{ height: `${chartHeight}px` }}
@@ -35,14 +43,12 @@ export default async function RevenueChart() {
 
           {revenue.map((month) => (
             <div key={month.month} className="flex flex-col items-center gap-2">
-              {/* bars */}
               <div
                 className="w-full rounded-md bg-blue-300"
                 style={{
                   height: `${(chartHeight / topLabel) * month.revenue}px`,
                 }}
               ></div>
-              {/* x-axis */}
               <p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
                 {month.month}
               </p>
@@ -53,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>
   );
 }

dashboard/starter-example/app/ui/dashboard/sidenav.tsx

@@ -1,8 +1,7 @@
 import Link from 'next/link';
 import NavLinks from '@/app/ui/dashboard/nav-links';
-import AcmeLogo from '../acme-logo';
+import AcmeLogo from '@/app/ui/acme-logo';
 import { PowerIcon } from '@heroicons/react/24/outline';
-import { signOut } from '@/auth';
 
 export default function SideNav() {
   return (
@@ -18,12 +17,7 @@ export default function SideNav() {
       <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
         <NavLinks />
         <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
-        <form
-          action={async () => {
-            'use server';
-            await signOut();
-          }}
-        >
+        <form>
           <button 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">
             <PowerIcon className="w-6" />
             <div className="hidden md:block">Sign Out</div>

dashboard/starter-example/app/ui/invoices/buttons.tsx

@@ -1,6 +1,5 @@
 import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
-import { deleteInvoice } from '@/app/lib/actions';
 
 export function CreateInvoice() {
   return (
@@ -17,7 +16,7 @@ export function CreateInvoice() {
 export function UpdateInvoice({ id }: { id: string }) {
   return (
     <Link
-      href={`/dashboard/invoices/${id}/edit`}
+      href="/dashboard/invoices"
       className="rounded-md border p-2 hover:bg-gray-100"
     >
       <PencilIcon className="w-5" />
@@ -27,12 +26,11 @@ export function UpdateInvoice({ id }: { id: string }) {
 
 export function DeleteInvoice({ id }: { id: string }) {
   return (
-    <form action={deleteInvoice}>
-      <input type="hidden" name="id" value={id} />
+    <>
       <button className="rounded-md border p-2 hover:bg-gray-100">
         <span className="sr-only">Delete</span>
         <TrashIcon className="w-5" />
       </button>
-    </form>
+    </>
   );
 }

dashboard/starter-example/app/ui/invoices/edit-form.tsx

@@ -8,7 +8,7 @@ import {
   UserCircleIcon,
 } from '@heroicons/react/24/outline';
 import Link from 'next/link';
-import { Button } from '../button';
+import { Button } from '@/app/ui/button';
 
 export default function EditInvoiceForm({
   invoice,

dashboard/starter-example/app/ui/invoices/pagination.tsx

@@ -6,43 +6,49 @@ import Link from 'next/link';
 import { generatePagination } from '@/app/lib/utils';
 
 export default function Pagination({ totalPages }: { totalPages: number }) {
-  const allPages = generatePagination(currentPage, totalPages);
+  // NOTE: comment in this code when you get to this point in the course
+
+  // const allPages = generatePagination(currentPage, totalPages);
 
   return (
-    <div className="inline-flex">
-      <PaginationArrow
-        direction="left"
-        href={createPageURL(currentPage - 1)}
-        isDisabled={currentPage <= 1}
-      />
+    <>
+      {/* NOTE: comment in this code when you get to this point in the course */}
+
+      {/* <div className="inline-flex">
+        <PaginationArrow
+          direction="left"
+          href={createPageURL(currentPage - 1)}
+          isDisabled={currentPage <= 1}
+        />
 
-      <div className="flex -space-x-px">
-        {allPages.map((page, index) => {
-          let position: 'first' | 'last' | 'single' | 'middle' | undefined;
+        <div className="flex -space-x-px">
+          {allPages.map((page, index) => {
+            let position: 'first' | 'last' | 'single' | 'middle' | undefined;
 
-          if (index === 0) position = 'first';
-          if (index === allPages.length - 1) position = 'last';
-          if (allPages.length === 1) position = 'single';
-          if (page === '...') position = 'middle';
+            if (index === 0) position = 'first';
+            if (index === allPages.length - 1) position = 'last';
+            if (allPages.length === 1) position = 'single';
+            if (page === '...') position = 'middle';
 
-          return (
-            <PaginationNumber
-              key={page}
-              href={createPageURL(page)}
-              page={page}
-              position={position}
-              isActive={currentPage === page}
-            />
-          );
-        })}
-      </div>
+            return (
+              <PaginationNumber
+                key={page}
+                href={createPageURL(page)}
+                page={page}
+                position={position}
+                isActive={currentPage === page}
+              />
+            );
+          })}
+        </div>
 
-      <PaginationArrow
-        direction="right"
-        href={createPageURL(currentPage + 1)}
-        isDisabled={currentPage >= totalPages}
-      />
-    </div>
+        <PaginationArrow
+          direction="right"
+          href={createPageURL(currentPage + 1)}
+          isDisabled={currentPage >= totalPages}
+        />
+      </div> */}
+    </>
   );
 }
 

dashboard/starter-example/app/ui/invoices/table.tsx

@@ -31,7 +31,6 @@ export default async function InvoicesTable({
                         className="mr-2 rounded-full"
                         width={28}
                         height={28}
-                        alt={`${invoice.name}'s profile picture`}
                       />
                       <p>{invoice.name}</p>
                     </div>

dashboard/starter-example/app/ui/login-form.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { lusitana } from '@/app/ui/fonts';
 import {
   AtSymbolIcon,