Salvando dashboards no banco

app/dashboard/(overview)/page.tsx

@@ -2,40 +2,34 @@ import CardWrapper 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 { fetchCardData } from '../../lib/data';
+import { fetchCardData, fetchDashboardByUserId } from '../../lib/data';
 import { Suspense } from 'react';
 import { CardsSkeleton, LatestInvoicesSkeleton, RevenueChartSkeleton } from '@/app/ui/skeletons';
 import { Metadata } from 'next';
+import { auth } from "@/auth";
 
 export const metadata: Metadata = {
   title: 'Dashboard',
 };
 
 export default async function Page() {
-  const {
-    numberOfCustomers,
-    totalPaidInvoices,
-    totalPendingInvoices,
-    numberOfInvoices
-  } = await fetchCardData();
+  const session = await auth();
+  const user = session?.user;
+  let dashboards;
+  //fetch all dashboards
+  if (user?.email)
+    dashboards = await fetchDashboardByUserId(user?.email)
 
   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">
-        <Suspense fallback={<CardsSkeleton />}>
-          <CardWrapper />
-        </Suspense>
+        {JSON.stringify(dashboards) || JSON.stringify(user)}
       </div>
       <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
-        <Suspense fallback={<RevenueChartSkeleton />}>
-          <RevenueChart />
-        </Suspense>
-        <Suspense fallback={<LatestInvoicesSkeleton />}>
-          <LatestInvoices />
-        </Suspense>
+
       </div>
     </main>
   );

app/lib/data.ts

@@ -8,9 +8,17 @@ import {
   LatestInvoiceRaw,
   User,
   Revenue,
+  Dashboard,
 } from './definitions';
 import { formatCurrency } from './utils';
 
+export async function fetchDashboardByUserId(user_email: string) {
+  console.log('Fetching dashboard data...');
+  const data = await sql<Dashboard>`SELECT * from dashboards
+  WHERE user_email = ${user_email}`
+  return data.rows;
+}
+
 export async function fetchRevenue() {
   // Add noStore() here to prevent the response from being cached.
   // This is equivalent to in fetch(..., {cache: 'no-store'}).
@@ -20,7 +28,7 @@ export async function fetchRevenue() {
     // Don't do this in production :)
 
     console.log('Fetching revenue data...');
-    await new Promise((resolve, error)=> setTimeout(resolve, 3000));
+    // await new Promise((resolve, error)=> setTimeout(resolve, 3000));
 
     const data = await sql<Revenue>`SELECT * FROM revenue`;
 

app/lib/definitions.ts

@@ -2,6 +2,15 @@
 // It describes the shape of the data, and what data type each property should accept.
 // For simplicity of teaching, we're manually defining these types.
 // However, these types are generated automatically if you're using an ORM such as Prisma.
+
+export type Dashboard = {
+  id: string;
+  user_email: string;
+  name: string;
+  link: string;
+  date: string;
+}
+
 export type User = {
   id: string;
   name: string;
@@ -18,7 +27,7 @@ export type Customer = {
 
 export type Invoice = {
   id: string;
-  customer_id: string;
+  user_email: string;
   amount: number;
   date: string;
   // In TypeScript, this is called a string union type.

app/page.tsx

@@ -14,13 +14,13 @@ export default function Page() {
           <div
             className="styles.shape"
           />
-          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
+          {/* <p 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
             </a>
             , brought to you by Vercel.
-          </p>
+          </p> */}
           <Link
             href="/login"
             className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"