feat: add error boundary

package.json

@@ -107,6 +107,7 @@
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-email": "2.1.6",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.1",
     "react-number-format": "^5.3.4",
     "react-pdf": "^8.0.2",

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

@@ -1,26 +1,25 @@
-import EmptyState from "@/components/common/empty-state";
 import StakeholderDropdown from "@/components/stakeholder/stakeholder-dropdown";
 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";
+import { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 
 export const metadata: Metadata = {
   title: "Stakeholders",
 };
 
-const StakeholdersPage = async () => {
+const StakeholdersPage = async ({
+  searchParams,
+}: {
+  searchParams: Record<string, string | string[] | undefined>;
+}) => {
   const session = await withServerSession();
 
   const { allow } = await serverAccessControl();
-  const stakeholders = await allow(api.stakeholder.getStakeholders(), [
-    "stakeholder",
-    "read",
-  ]);
+  const stakeholders = allow(true, ["stakeholder", "read"]);
 
   const stakeholderDropdown = allow(
     <StakeholderDropdown />,
@@ -32,18 +31,6 @@ const StakeholdersPage = async () => {
     return <UnAuthorizedState />;
   }
 
-  if (stakeholders.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">
@@ -57,12 +44,11 @@ const StakeholdersPage = async () => {
         <div>{stakeholderDropdown}</div>
       </div>
 
-      <Card className="mx-auto mt-3 w-[28rem] sm:w-[38rem] md:w-full">
-        <StakeholderTable
-          companyId={session.user.companyId}
-          stakeholders={stakeholders}
-        />
-      </Card>
+      <ErrorBoundary fallback={<div>Something went wrong</div>}>
+        <Suspense>
+          <StakeholderTable companyId={session.user.companyId} />
+        </Suspense>
+      </ErrorBoundary>
     </div>
   );
 };

src/components/stakeholder/stakeholder-table.tsx

@@ -2,7 +2,6 @@
 
 import { pushModal } from "@/components/modals";
 import { Badge } from "@/components/ui/badge";
-import { Checkbox } from "@/components/ui/checkbox";
 import { DataTable } from "@/components/ui/data-table/data-table";
 import { DataTableBody } from "@/components/ui/data-table/data-table-body";
 import { DataTableContent } from "@/components/ui/data-table/data-table-content";
@@ -17,13 +16,14 @@ import {
 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 type { RouterOutputs } from "@/trpc/shared";
-import { RiMore2Fill } from "@remixicon/react";
+import { RiGroup2Fill, 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";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -32,12 +32,10 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
+import StakeholderDropdown from "./stakeholder-dropdown";
 import { StakeholderTableToolbar } from "./stakeholder-table-toolbar";
 
-type Stakeholder = RouterOutputs["stakeholder"]["getStakeholders"];
-
 type StakeholderTableType = {
-  stakeholders: Stakeholder;
   companyId: string;
 };
 
@@ -200,7 +198,7 @@ const StakeholderTable = ({ companyId }: StakeholderTableType) => {
   const table = usePaginatedTable({
     pageCount: data?.meta.pageCount ?? -1,
     columns,
-    data: data?.data ?? [],
+    data: data.data,
     state: {
       pagination,
       sorting,
@@ -211,17 +209,33 @@ const StakeholderTable = ({ companyId }: StakeholderTableType) => {
     onColumnFiltersChange,
   });
 
+  if (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 (
-    <div className="w-full p-6">
-      <DataTable table={table}>
-        <StakeholderTableToolbar />
-        <DataTableContent>
-          <DataTableHeader />
-          <DataTableBody />
-        </DataTableContent>
-        <DataTablePagination />
-      </DataTable>
-    </div>
+    <Card className="mx-auto mt-3 w-[28rem] sm:w-[38rem] md:w-full">
+      <div className="w-full p-6">
+        <DataTable table={table}>
+          <StakeholderTableToolbar />
+          <DataTableContent>
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTableContent>
+          <DataTablePagination />
+        </DataTable>
+      </div>
+    </Card>
   );
 };