feat: add search

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

@@ -1,11 +1,14 @@
+import EmptyState from "@/components/common/empty-state";
 import StakeholderDropdown from "@/components/stakeholder/stakeholder-dropdown";
 import StakeholderTable from "@/components/stakeholder/stakeholder-table";
 import { UnAuthorizedState } from "@/components/ui/un-authorized-state";
 import { serverAccessControl } from "@/lib/rbac/access-control";
+import { getManyStakeholder } from "@/server/api/client-handlers/stakeholder";
+import { ManyStakeholderQuerySchema } from "@/server/api/schema/stakeholder";
 import { withServerSession } from "@/server/auth";
+import { RiGroup2Fill } from "@remixicon/react";
 import type { Metadata } from "next";
-import { Suspense } from "react";
-import { ErrorBoundary } from "react-error-boundary";
+import { headers } from "next/headers";
 
 export const metadata: Metadata = {
   title: "Stakeholders",
@@ -19,7 +22,20 @@ const StakeholdersPage = async ({
   const session = await withServerSession();
 
   const { allow } = await serverAccessControl();
-  const stakeholders = allow(true, ["stakeholder", "read"]);
+
+  const { limit, page, sort, name } =
+    ManyStakeholderQuerySchema.parse(searchParams);
+
+  const stakeholders = await allow(
+    getManyStakeholder({
+      searchParams: { limit, page, sort, ...(name && { name }) },
+      urlParams: {
+        companyId: session.user.companyId,
+      },
+      headers: headers(),
+    }),
+    ["stakeholder", "read"],
+  );
 
   const stakeholderDropdown = allow(
     <StakeholderDropdown />,
@@ -31,6 +47,22 @@ const StakeholdersPage = async ({
     return <UnAuthorizedState />;
   }
 
+  if (
+    stakeholders?.data &&
+    stakeholders?.data.length === 0 &&
+    Object.keys(searchParams).length === 0
+  ) {
+    return (
+      <EmptyState
+        icon={<RiGroup2Fill />}
+        title="You do not have any stakeholders!"
+        subtitle="Please click the button below to add or import stakeholders."
+      >
+        {stakeholderDropdown}
+      </EmptyState>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-y-3">
       <div className="flex items-center justify-between gap-y-3">
@@ -44,11 +76,13 @@ const StakeholdersPage = async ({
         <div>{stakeholderDropdown}</div>
       </div>
 
-      <ErrorBoundary fallback={<div>Something went wrong</div>}>
-        <Suspense>
-          <StakeholderTable companyId={session.user.companyId} />
-        </Suspense>
-      </ErrorBoundary>
+      <StakeholderTable
+        limit={limit}
+        page={page}
+        sort={sort}
+        stakeholders={stakeholders}
+        name={name}
+      />
     </div>
   );
 };

src/components/stakeholder/stakeholder-table-toolbar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useTable } from "@/components/ui/data-table/data-table";
 import { ResetButton } from "@/components/ui/data-table/data-table-buttons";
 import { DataTableViewOptions } from "@/components/ui/data-table/data-table-view-options";
@@ -12,7 +14,7 @@ export const StakeholderTableToolbar = () => {
     <div className="flex w-full items-center justify-between">
       <div className="flex flex-col gap-2 sm:flex-1 sm:flex-row sm:items-center sm:gap-0 sm:space-x-2">
         <DebouncedInput
-          placeholder="Search by name..."
+          placeholder="Search by name or email..."
           value={value}
           onChange={(value) => table.getColumn("name")?.setFilterValue(value)}
           className="h-8 w-64"

src/components/stakeholder/stakeholder-table.tsx

@@ -7,20 +7,12 @@ import { DataTableBody } from "@/components/ui/data-table/data-table-body";
 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 {
-  useFilterQueryParams,
-  usePaginatedQueryParams,
-  usePaginatedTable,
-  useSortQueryParams,
-} from "@/hooks/use-paginated-data-table";
+import { 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 { ManyStakeholderSortParams } from "@/server/api/schema/stakeholder";
-import { RiGroup2Fill, RiMore2Fill } from "@remixicon/react";
+import type { TManyStakeholderQuerySchema } from "@/server/api/schema/stakeholder";
+import { RiMore2Fill } from "@remixicon/react";
 import { createColumnHelper } from "@tanstack/react-table";
 
-import { parseAsString } from "nuqs";
-import EmptyState from "../common/empty-state";
 import { Allow } from "../rbac/allow";
 import { Button } from "../ui/button";
 import { Card } from "../ui/card";
@@ -32,12 +24,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import StakeholderDropdown from "./stakeholder-dropdown";
 import { StakeholderTableToolbar } from "./stakeholder-table-toolbar";
 
 type StakeholderTableType = {
-  companyId: string;
-};
+  stakeholders: TGetManyStakeholderRes;
+} & TManyStakeholderQuerySchema;
 
 const getStakeholderType = (type: string) => {
   switch (type) {
@@ -173,56 +164,23 @@ const columns = [
   }),
 ];
 
-const StakeholderTable = ({ companyId }: StakeholderTableType) => {
-  const { limit, page, onPaginationChange, pagination } =
-    usePaginatedQueryParams();
-
-  const { onSortingChange, sorting, sort } = useSortQueryParams(
-    ManyStakeholderSortParams,
-    "createdAt.desc",
-  );
-  const { columnFilters, onColumnFiltersChange, state } = useFilterQueryParams({
-    name: parseAsString,
-  });
-
-  const { data } = useManyStakeholder({
-    searchParams: {
-      limit,
-      page,
-      sort,
-      ...(state.name && { name: state.name }),
-    },
-    urlParams: { companyId },
-  });
-
+const StakeholderTable = ({
+  stakeholders,
+  page,
+  limit,
+  sort,
+  name,
+}: StakeholderTableType) => {
   const table = usePaginatedTable({
-    pageCount: data?.meta?.pageCount ?? -1,
+    pageCount: stakeholders?.meta?.pageCount ?? -1,
     columns,
-    data: data?.data ?? [],
-    state: {
-      pagination,
-      sorting,
-      columnFilters,
-    },
-    onPaginationChange,
-    onSortingChange,
-    onColumnFiltersChange,
+    data: stakeholders?.data ?? [],
+    limit,
+    page,
+    sort,
+    filterFields: [{ id: "name", value: name }],
   });
 
-  if (data && data?.data?.length === 0 && data?.meta?.totalCount === 0) {
-    return (
-      <EmptyState
-        icon={<RiGroup2Fill />}
-        title="You do not have any stakeholders!"
-        subtitle="Please click the button below to add or import stakeholders."
-      >
-        <Allow action="create" subject="stakeholder">
-          <StakeholderDropdown />
-        </Allow>
-      </EmptyState>
-    );
-  }
-
   return (
     <Card className="mx-auto mt-3 w-[28rem] sm:w-[38rem] md:w-full">
       <div className="w-full p-6">