feat: use pagination

src/app/(authenticated)/(dashboard)/[publicId]/stakeholders/page.tsx

@@ -4,6 +4,7 @@ import StakeholderTable from "@/components/stakeholder/stakeholder-table";
 import { Card } from "@/components/ui/card";
 import { UnAuthorizedState } from "@/components/ui/un-authorized-state";
 import { serverAccessControl } from "@/lib/rbac/access-control";
+import { withServerSession } from "@/server/auth";
 import { api } from "@/trpc/server";
 import { RiGroup2Fill } from "@remixicon/react";
 import type { Metadata } from "next";
@@ -13,6 +14,8 @@ export const metadata: Metadata = {
 };
 
 const StakeholdersPage = async () => {
+  const session = await withServerSession();
+
   const { allow } = await serverAccessControl();
   const stakeholders = await allow(api.stakeholder.getStakeholders.query(), [
     "stakeholder",
@@ -55,7 +58,10 @@ const StakeholdersPage = async () => {
       </div>
 
       <Card className="mx-auto mt-3 w-[28rem] sm:w-[38rem] md:w-full">
-        <StakeholderTable stakeholders={stakeholders} />
+        <StakeholderTable
+          companyId={session.user.companyId}
+          stakeholders={stakeholders}
+        />
       </Card>
     </div>
   );

src/components/modals/stakeholder/single-stake-holder-form.tsx

@@ -23,13 +23,13 @@ import {
   StakeholderRelationshipEnum,
   StakeholderTypeEnum,
 } from "@/prisma/enums";
+import type { TGetManyStakeholderRes } from "@/server/api/client-handlers/stakeholder";
 import { api } from "@/trpc/react";
 import type { RouterOutputs } from "@/trpc/shared";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 
-export type TStakeholder =
-  RouterOutputs["stakeholder"]["getStakeholders"][number];
+export type TStakeholder = TGetManyStakeholderRes["data"][number];
 
 type TSingleStakeholderForm =
   | {

src/components/stakeholder/stakeholder-table.tsx

@@ -9,11 +9,16 @@ import { SortButton } from "@/components/ui/data-table/data-table-buttons";
 import { DataTableContent } from "@/components/ui/data-table/data-table-content";
 import { DataTableHeader } from "@/components/ui/data-table/data-table-header";
 import { DataTablePagination } from "@/components/ui/data-table/data-table-pagination";
-import { useDataTable } from "@/hooks/use-data-table";
+import {
+  usePaginatedQueryParams,
+  usePaginatedTable,
+} from "@/hooks/use-paginated-data-table";
+import type { TGetManyStakeholderRes } from "@/server/api/client-handlers/stakeholder";
+import { useManyStakeholder } from "@/server/api/client-hooks/stakeholder";
 import type { RouterOutputs } from "@/trpc/shared";
 import { RiMore2Fill } from "@remixicon/react";
-import type { ColumnDef } from "@tanstack/react-table";
-import React from "react";
+import type { ColumnDef, PaginationState } from "@tanstack/react-table";
+import { use, useState } from "react";
 import { Allow } from "../rbac/allow";
 import { Button } from "../ui/button";
 import {
@@ -30,6 +35,7 @@ type Stakeholder = RouterOutputs["stakeholder"]["getStakeholders"];
 
 type StakeholderTableType = {
   stakeholders: Stakeholder;
+  companyId: string;
 };
 
 const getStakeholderType = (type: string) => {
@@ -72,7 +78,7 @@ const getCurrentRelationship = (relationship: string) => {
   }
 };
 
-export const columns: ColumnDef<Stakeholder[number]>[] = [
+export const columns: ColumnDef<TGetManyStakeholderRes["data"][number]>[] = [
   {
     id: "select",
     header: ({ table }) => (
@@ -206,8 +212,38 @@ export const columns: ColumnDef<Stakeholder[number]>[] = [
   },
 ];
 
-const StakeholderTable = ({ stakeholders }: StakeholderTableType) => {
-  const table = useDataTable({ columns, data: stakeholders });
+const StakeholderTable = ({ companyId }: StakeholderTableType) => {
+  const [{ limit, page }, setData] = usePaginatedQueryParams();
+
+  const pageIndex = page - 1;
+  const pageSize = limit;
+
+  const { data } = useManyStakeholder({
+    searchParams: { limit, page },
+    urlParams: { companyId },
+  });
+
+  const table = usePaginatedTable({
+    pageCount: data?.meta.pageCount ?? -1,
+    columns,
+    data: data?.data ?? [],
+    state: {
+      pagination: {
+        pageIndex,
+        pageSize,
+      },
+    },
+    onPaginationChange: (updater) => {
+      if (typeof updater === "function") {
+        const updateValue = updater({ pageIndex, pageSize });
+
+        setData({
+          limit: updateValue.pageSize,
+          page: updateValue.pageIndex + 1,
+        });
+      }
+    },
+  });
   return (
     <div className="w-full p-6">
       <DataTable table={table}>

src/hooks/use-paginated-data-table.ts

@@ -1,10 +1,18 @@
 import type { RowData, TableState } from "@tanstack/react-table";
+import { parseAsInteger, useQueryStates } from "nuqs";
 import { type TDataTableOptions, useDataTable } from "./use-data-table";
 
 type MakeRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 
 type TState = MakeRequired<Partial<TableState>, "pagination">;
 
+export function usePaginatedQueryParams() {
+  return useQueryStates({
+    page: parseAsInteger.withDefault(1),
+    limit: parseAsInteger.withDefault(2),
+  });
+}
+
 export function usePaginatedTable<TData extends RowData>(
   options: Omit<TDataTableOptions<TData>, "state"> & { state: TState },
 ) {

src/server/api/client-hooks/stakeholder.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import {
+  type TGetManyStakeholderParams,
+  getManyStakeholder,
+} from "../client-handlers/stakeholder";
+
+export const useManyStakeholder = (data: TGetManyStakeholderParams) =>
+  useQuery({
+    queryKey: [
+      "all-stakeholder",
+      data.urlParams.companyId,
+      String(data.searchParams.limit),
+      String(data.searchParams.page),
+    ],
+    queryFn: () => getManyStakeholder(data),
+  });