From 0779aa619957b09607d28767b61426b533f4ec53 Mon Sep 17 00:00:00 2001 From: NexVeridian Date: Fri, 16 Feb 2024 04:30:40 -0800 Subject: [PATCH] stats --- src/app/global-error.tsx | 2 +- src/app/not-found.tsx | 2 +- src/app/stats/columns.tsx | 30 ++++++++++++++ src/app/stats/data-table.tsx | 79 ++++++++++++++++++++++++++++++++++++ src/app/stats/db.tsx | 19 +++++++++ src/app/stats/loading.tsx | 23 +++++++++++ src/app/stats/page.tsx | 18 +++++--- src/components/card-grid.tsx | 27 +++++++++++- 8 files changed, 192 insertions(+), 8 deletions(-) create mode 100644 src/app/stats/columns.tsx create mode 100644 src/app/stats/data-table.tsx create mode 100644 src/app/stats/db.tsx create mode 100644 src/app/stats/loading.tsx diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx index 27de6e0..6489b83 100644 --- a/src/app/global-error.tsx +++ b/src/app/global-error.tsx @@ -12,7 +12,7 @@ export default function GlobalError({ error: Error & { digest?: string } }) { return ( - + Error diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index d28900b..0cd7cd6 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -12,7 +12,7 @@ export default function GlobalError({ error: Error & { digest?: string } }) { return ( - + 404 - Not Found diff --git a/src/app/stats/columns.tsx b/src/app/stats/columns.tsx new file mode 100644 index 0000000..bba7dbc --- /dev/null +++ b/src/app/stats/columns.tsx @@ -0,0 +1,30 @@ +"use client"; +import { ColumnDef } from "@tanstack/react-table"; + +export type UrlTable = { + clicks: number; + date_accessed: Date; + date_added: Date; + id: string; + long_url: string; +}; + +export const columns: ColumnDef[] = [ + { + accessorKey: "clicks", + header: "Clicks", + }, + { + accessorKey: "long_url", + header: "URL", + }, + { accessorKey: "id", header: "ID" }, + { + accessorKey: "date_accessed", + header: "Date Accessed", + }, + { + accessorKey: "date_added", + header: "Date Added", + }, +]; diff --git a/src/app/stats/data-table.tsx b/src/app/stats/data-table.tsx new file mode 100644 index 0000000..1cab87d --- /dev/null +++ b/src/app/stats/data-table.tsx @@ -0,0 +1,79 @@ +"use client"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { + ColumnDef, + flexRender, + getCoreRowModel, + useReactTable +} from "@tanstack/react-table"; + +interface DataTableProps { + columns: ColumnDef[]; + data: TData[]; + slug: string[]; +} + +export function DataTable({ + columns, + data, +}: DataTableProps) { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + }); + + return ( + <> + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ) + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+ + ); +} diff --git a/src/app/stats/db.tsx b/src/app/stats/db.tsx new file mode 100644 index 0000000..9257ea9 --- /dev/null +++ b/src/app/stats/db.tsx @@ -0,0 +1,19 @@ +"use server"; +import { initConnection } from "@/components/db-utils"; + +export async function querydb() { + try { + let db = await initConnection(); + let stats = await db.query(` + select * from url + order by clicks desc + limit 50; + `); + + // @ts-ignore + console.log(stats); + return stats; + } catch (e) { + return; + } +} diff --git a/src/app/stats/loading.tsx b/src/app/stats/loading.tsx new file mode 100644 index 0000000..edb2a52 --- /dev/null +++ b/src/app/stats/loading.tsx @@ -0,0 +1,23 @@ +"use client"; +import CardGrid from "@/components/card-grid"; +import { + Card, + CardHeader, + CardTitle +} from "@/components/ui/card"; + +export default function GlobalError({ + error, +}: { + error: Error & { digest?: string } +}) { + return ( + + + + Loading... + + + + ); +} diff --git a/src/app/stats/page.tsx b/src/app/stats/page.tsx index a5bf2a4..537fc0d 100644 --- a/src/app/stats/page.tsx +++ b/src/app/stats/page.tsx @@ -1,8 +1,16 @@ +import CardGrid from "@/components/card-grid"; +import { Card } from "@/components/ui/card"; +import { columns } from "./columns"; +import { DataTable } from "./data-table"; +import { querydb } from "./db"; -export default function StatsPage() { +export default async function StatsPage() { + let data = await querydb(); return ( -
-

Stats

-
+ + + + + ); -} \ No newline at end of file +} diff --git a/src/components/card-grid.tsx b/src/components/card-grid.tsx index 9208806..ba72222 100644 --- a/src/components/card-grid.tsx +++ b/src/components/card-grid.tsx @@ -1,15 +1,40 @@ export default function CardGrid({ + max_rows = 4, children, className, ...props }: { + max_rows?: number; children?: React.ReactNode; className?: string; }) { + let baseClassName = `hidden items-start justify-center gap-6 rounded-lg p-8 md:grid`; + switch (max_rows) { + case 1: + baseClassName += " md:grid-cols-1 "; + break; + case 2: + baseClassName += " md:grid-cols-1 lg:grid-cols-2 "; + break; + case 3: + baseClassName += " md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 "; + break; + case 4: + baseClassName += " md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 "; + break; + default: + break; + }; + + if (className == undefined) { + className = baseClassName; + } else { + className = baseClassName + className; + } return (
{children}