completed paginated Component

apps/hub/app/_components/PaginatedTable.tsx

@@ -1,27 +1,41 @@
-import SortableTable, { SortableTableProps } from './Table';
+'use client';
+import { useEffect, useState } from 'react';
+import SortableTable, { Pagination, SortableTableProps } from './Table';
+import { PrismaClient } from '@repo/db';
+import { getData } from './pagiantedTableActions';
 
 interface PaginatedTableProps<TData>
   extends Omit<SortableTableProps<TData>, 'data'> {
-  prismaGetter: (
-    fnProps: {
-      cursor: number;
-      take: number;
-    } & any
-  ) => Promise<any>;
+  prismaModel: keyof PrismaClient;
+  rowsPerPage?: number;
 }
 
-export async function PaginatedTable<TData>({
-  prismaGetter,
+export function PaginatedTable<TData>({
+  prismaModel,
+  rowsPerPage = 10,
   ...restProps
 }: PaginatedTableProps<TData>) {
-  const data = await prismaGetter({
-    cursor: 0,
-    take: 10,
-  });
+  const [data, setData] = useState<TData[]>([]);
+  const [page, setPage] = useState(0);
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    getData(prismaModel, rowsPerPage, page * rowsPerPage).then((result) => {
+      if (result) {
+        setData(result.data);
+        setTotal(result.total);
+      }
+    });
+  }, [page]);
 
   return (
-    <div>
+    <div className="space-y-4">
       <SortableTable data={data} {...restProps} />
+      <Pagination
+        totalPages={Math.ceil(total / rowsPerPage)}
+        page={page}
+        setPage={setPage}
+      />
     </div>
   );
 }