7 - Fetching Data

README.md

@@ -2,6 +2,58 @@
 
 This repo contains all of the code artefacts from following along with the tutorials on nextjs.org.
 
-* [React Foundations](https://nextjs.org/learn/react-foundations) (_completed_)
-* [App Router](https://nextjs.org/learn/dashboard-app/getting-started) (_current_)
+The tutorials where not really designed to be done in the same repo, so the base directories for each need to be alterered if they are to be deployed.
 
+### [React Foundations](https://nextjs.org/learn/react-foundations)  ✅
+
+1. About React and Next.js (_theory - no code_)
+2. Rendering User Interfaces (UI)  (_theory - no code_)
+3. Updating UI with JavaScript  (_theory - no code_)
+4. [Getting Started with React ♻️][1-4]
+5. [Building UI with Components ♻️][1-4]
+6. [Displaying Data with Props ♻️][1-6]
+7. [Adding Interactivity with State ♻️][1-7]
+8. [From React to Next.js ♻️][1-89]
+9. [Installing Next.js ♻️][1-89]
+10. [Server and Client Components ♻️][1-10]
+
+[1-4]: https://github.com/treejamie/next-js-learn/pull/1
+[1-5]: https://github.com/treejamie/next-js-learn/pull/2
+[1-6]: https://github.com/treejamie/next-js-learn/pull/3
+[1-7]: https://github.com/treejamie/next-js-learn/pull/4
+[1-89]: https://github.com/treejamie/next-js-learn/pull/5
+[1-10]: https://github.com/treejamie/next-js-learn/pull/6
+
+
+### [App Router](https://nextjs.org/learn/dashboard-app/getting-started) 🚧
+
+Part of this tutorial was to deploy it out to vercel. It was very slick.I took the liberty of putting it on a custom domain and you can find it there 👉 [next-js-dashboard.curle.io](https://next-js-dashboard.curle.io)
+
+
+1. [Getting Started ♻️][2-1]  
+2. [CSS Styling ♻️][2-2]
+3. [Optimizing Fonts and Images ♻️][2-3]  
+4. [Creating Layouts and Pages ♻️][2-4]  
+5. [Navigating Between Pages ♻️][2-5]  
+6. [Setting Up Your Database ♻️][2-6]  
+7. [Fetching Data ♻️][2-7]  
+8. Static and Dynamic Rendering 🚧 
+9. Streaming 🚧 
+10. Partial Prerendering ️🚧 
+11. Adding Search and Pagination 🚧 
+12. Mutating Data 🚧 
+13. Handling Errors 🚧 
+14. Improving Accessibility 🚧 
+15. Adding Authentication 🚧  
+16. Adding Metadata 🚧️ 
+
+
+
+
+[2-1]: https://github.com/treejamie/next-js-learn/pull/7
+[2-2]: https://github.com/treejamie/next-js-learn/pull/9
+[2-3]: https://github.com/treejamie/next-js-learn/pull/10
+[2-4]: https://github.com/treejamie/next-js-learn/pull/11
+[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

app-router/nextjs-dashboard/app/dashboard/page.tsx

@@ -1,3 +1,39 @@
-export default function Page() {
-    return <p>Dashboard Page</p>;
-  }
+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 (
+    <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>
+  );
+}

app-router/nextjs-dashboard/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: Uncomment this code in Chapter 7 */}
 
-        {/* <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>

app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx

@@ -17,11 +17,11 @@ export default async function RevenueChart({
   const chartHeight = 350;
   // NOTE: Uncomment this code in Chapter 7
 
-  // 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: Uncomment this code in Chapter 7 */}
 
-      {/* <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>
   );
 }