refactor: streamline comments handling across various components

claudfuen · claudfuen · commit a3f0679ae2c6 · 2025-08-06T14:19:53.000-04:00
- Consolidated comment fetching logic by removing direct calls to getComments in multiple pages and replacing them with a reusable Comments component.
- Updated the Comments component to handle data fetching, loading states, and error handling, enhancing reusability and maintainability.
- Removed the CreateCommentForm component as its functionality is now integrated into the Comments component.
- This refactor simplifies the codebase and improves the user experience by providing a consistent comments interface.
diff --git a/apps/app/src/app/(app)/[orgId]/policies/[policyId]/components/PolicyPage.tsx b/apps/app/src/app/(app)/[orgId]/policies/[policyId]/components/PolicyPage.tsx
@@ -1,6 +1,6 @@
 import { Control, Member, Policy, User } from '@db';
 import type { JSONContent } from '@tiptap/react';
-import { Comments, CommentWithAuthor } from '../../../../../../components/comments/Comments';
+import { Comments } from '../../../../../../components/comments/Comments';
 import { AuditLogWithRelations } from '../data';
 import { PolicyPageEditor } from '../editor/components/PolicyDetails';
 import { PolicyOverview } from './PolicyOverview';
@@ -14,7 +14,6 @@ export default function PolicyPage({
   isPendingApproval,
   policyId,
   logs,
-  comments,
 }: {
   policy: (Policy & { approver: (Member & { user: User }) | null }) | null;
   assignees: (Member & { user: User })[];
@@ -23,7 +22,6 @@ export default function PolicyPage({
   isPendingApproval: boolean;
   policyId: string;
   logs: AuditLogWithRelations[];
-  comments: CommentWithAuthor[];
 }) {
   return (
     <>
@@ -42,7 +40,7 @@ export default function PolicyPage({
 
       <RecentAuditLogs logs={logs} />
 
-      <Comments entityId={policyId} comments={comments} entityType="policy" />
+      <Comments entityId={policyId} entityType="policy" />
     </>
   );
 }
diff --git a/apps/app/src/app/(app)/[orgId]/policies/[policyId]/page.tsx b/apps/app/src/app/(app)/[orgId]/policies/[policyId]/page.tsx
@@ -1,13 +1,7 @@
 import PageWithBreadcrumb from '@/components/pages/PageWithBreadcrumb';
 import type { Metadata } from 'next';
 import PolicyPage from './components/PolicyPage';
-import {
-  getAssignees,
-  getComments,
-  getLogsForPolicy,
-  getPolicy,
-  getPolicyControlMappingInfo,
-} from './data';
+import { getAssignees, getLogsForPolicy, getPolicy, getPolicyControlMappingInfo } from './data';
 
 export default async function PolicyDetails({
   params,
@@ -18,7 +12,6 @@ export default async function PolicyDetails({
 
   const policy = await getPolicy(policyId);
   const assignees = await getAssignees();
-  const comments = await getComments(policyId);
   const { mappedControls, allControls } = await getPolicyControlMappingInfo(policyId);
   const logs = await getLogsForPolicy(policyId);
 
@@ -39,7 +32,6 @@ export default async function PolicyDetails({
         allControls={allControls}
         isPendingApproval={isPendingApproval}
         logs={logs}
-        comments={comments}
       />
     </PageWithBreadcrumb>
   );
diff --git a/apps/app/src/app/(app)/[orgId]/risk/[riskId]/page.tsx b/apps/app/src/app/(app)/[orgId]/risk/[riskId]/page.tsx
@@ -3,12 +3,12 @@ import { InherentRiskChart } from '@/components/risks/charts/InherentRiskChart';
 import { ResidualRiskChart } from '@/components/risks/charts/ResidualRiskChart';
 import { RiskOverview } from '@/components/risks/risk-overview';
 import { auth } from '@/utils/auth';
-import { AttachmentEntityType, CommentEntityType, db } from '@db';
+import { CommentEntityType, db } from '@db';
 import type { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { cache } from 'react';
-import { Comments, CommentWithAuthor } from '../../../../../components/comments/Comments';
+import { Comments } from '../../../../../components/comments/Comments';
 
 interface PageProps {
   searchParams: Promise<{
@@ -24,7 +24,6 @@ interface PageProps {
 export default async function RiskPage({ searchParams, params }: PageProps) {
   const { riskId, orgId } = await params;
   const risk = await getRisk(riskId);
-  const comments = await getComments(riskId);
   const assignees = await getAssignees();
   if (!risk) {
     redirect('/');
@@ -43,7 +42,7 @@ export default async function RiskPage({ searchParams, params }: PageProps) {
           <InherentRiskChart risk={risk} />
           <ResidualRiskChart risk={risk} />
         </div>
-        <Comments entityId={riskId} entityType={CommentEntityType.risk} comments={comments} />
+        <Comments entityId={riskId} entityType={CommentEntityType.risk} />
       </div>
     </PageWithBreadcrumb>
   );
@@ -75,67 +74,7 @@ const getRisk = cache(async (riskId: string) => {
   return risk;
 });
 
-const getComments = async (riskId: string): Promise<CommentWithAuthor[]> => {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
-
-  const activeOrgId = session?.session.activeOrganizationId;
-
-  if (!activeOrgId) {
-    console.warn('Could not determine active organization ID in getComments');
-    return [];
-  }
-
-  const comments = await db.comment.findMany({
-    where: {
-      organizationId: activeOrgId,
-      entityId: riskId,
-      entityType: CommentEntityType.risk,
-    },
-    include: {
-      author: {
-        include: {
-          user: true,
-        },
-      },
-    },
-    orderBy: {
-      createdAt: 'desc',
-    },
-  });
-
-  const commentsWithAttachments = await Promise.all(
-    comments.map(async (comment) => {
-      const attachments = await db.attachment.findMany({
-        where: {
-          organizationId: activeOrgId,
-          entityId: comment.id,
-          entityType: AttachmentEntityType.comment,
-        },
-      });
-      return {
-        id: comment.id,
-        content: comment.content,
-        author: {
-          id: comment.author.user.id,
-          name: comment.author.user.name,
-          email: comment.author.user.email,
-        },
-        attachments: attachments.map((att) => ({
-          id: att.id,
-          name: att.name,
-          type: att.type,
-          downloadUrl: att.url || '', // assuming url maps to downloadUrl
-          createdAt: att.createdAt.toISOString(),
-        })),
-        createdAt: comment.createdAt.toISOString(),
-      };
-    }),
-  );
 
-  return commentsWithAttachments;
-};
 
 const getAssignees = cache(async () => {
   const session = await auth.api.getSession({
diff --git a/apps/app/src/app/(app)/[orgId]/tasks/[taskId]/components/TaskMainContent.tsx b/apps/app/src/app/(app)/[orgId]/tasks/[taskId]/components/TaskMainContent.tsx
@@ -1,12 +1,10 @@
 'use client';
 
-import { useTaskComments } from '@/hooks/use-comments-api';
 import { Separator } from '@comp/ui/separator';
 import { CommentEntityType, type Task } from '@db';
 import { useEffect, useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
-import { CommentForm } from '../../../../../../components/comments/CommentForm';
-import { CommentList } from '../../../../../../components/comments/CommentList';
+import { Comments } from '../../../../../../components/comments/Comments';
 import { updateTask } from '../../actions/updateTask';
 import { TaskBody } from './TaskBody';
 
@@ -18,17 +16,6 @@ export function TaskMainContent({ task }: TaskMainContentProps) {
   const [title, setTitle] = useState(task.title);
   const [description, setDescription] = useState(task.description ?? '');
 
-  // Use SWR to fetch comments with real-time updates
-  const {
-    data: commentsData,
-    error: commentsError,
-    isLoading: commentsLoading,
-    mutate: refreshComments,
-  } = useTaskComments(task.id);
-
-  // Extract comments from SWR response
-  const comments = commentsData?.data || [];
-
   const debouncedUpdateTask = useDebouncedCallback(
     (field: 'title' | 'description', value: string) => {
       updateTask({ id: task.id, [field]: value });
@@ -68,27 +55,7 @@ export function TaskMainContent({ task }: TaskMainContentProps) {
       </div>
 
       {/* Comment Section */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-medium">Comments</h3>
-        <CommentForm entityId={task.id} entityType={CommentEntityType.task} />
-
-                {commentsLoading && (
-          <div className="space-y-3">
-            {/* Simple comment skeletons */}
-            {[1, 2].map((i) => (
-              <div key={i} className="bg-muted/20 rounded-lg h-16 animate-pulse"></div>
-            ))}
-          </div>
-        )}
-
-        {commentsError && (
-          <div className="text-destructive text-sm">Failed to load comments. Please try again.</div>
-        )}
-
-        {!commentsLoading && !commentsError && (
-          <CommentList comments={comments} refreshComments={refreshComments} />
-        )}
-      </div>
+      <Comments entityId={task.id} entityType={CommentEntityType.task} variant="inline" />
     </div>
   );
 }
diff --git a/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/page.tsx b/apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/page.tsx
@@ -2,12 +2,12 @@
 
 import PageWithBreadcrumb from '@/components/pages/PageWithBreadcrumb';
 import { auth } from '@/utils/auth';
-import { AttachmentEntityType, CommentEntityType, db } from '@db';
+import { CommentEntityType, db } from '@db';
 import type { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { cache } from 'react';
-import { Comments, CommentWithAuthor } from '../../../../../components/comments/Comments';
+import { Comments } from '../../../../../components/comments/Comments';
 import { VendorInherentRiskChart } from './components/VendorInherentRiskChart';
 import { VendorResidualRiskChart } from './components/VendorResidualRiskChart';
 import { SecondaryFields } from './components/secondary-fields/secondary-fields';
@@ -20,7 +20,6 @@ export default async function VendorPage({ params }: PageProps) {
   const { vendorId, orgId } = await params;
   const vendor = await getVendor(vendorId);
   const assignees = await getAssignees();
-  const comments = await getComments(vendorId);
 
   if (!vendor || !vendor.vendor) {
     redirect('/');
@@ -43,7 +42,7 @@ export default async function VendorPage({ params }: PageProps) {
           <VendorInherentRiskChart vendor={vendor.vendor} />
           <VendorResidualRiskChart vendor={vendor.vendor} />
         </div>
-        <Comments entityId={vendorId} comments={comments} entityType={CommentEntityType.vendor} />
+        <Comments entityId={vendorId} entityType={CommentEntityType.vendor} />
       </div>
     </PageWithBreadcrumb>
   );
@@ -91,68 +90,6 @@ const getVendor = cache(async (vendorId: string) => {
   };
 });
 
-const getComments = async (vendorId: string): Promise<CommentWithAuthor[]> => {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
-
-  const activeOrgId = session?.session.activeOrganizationId;
-
-  if (!activeOrgId) {
-    console.warn('Could not determine active organization ID in getComments');
-    return [];
-  }
-
-  const comments = await db.comment.findMany({
-    where: {
-      organizationId: activeOrgId,
-      entityId: vendorId,
-      entityType: CommentEntityType.vendor,
-    },
-    include: {
-      author: {
-        include: {
-          user: true,
-        },
-      },
-    },
-    orderBy: {
-      createdAt: 'desc',
-    },
-  });
-
-  const commentsWithAttachments = await Promise.all(
-    comments.map(async (comment) => {
-      const attachments = await db.attachment.findMany({
-        where: {
-          organizationId: activeOrgId,
-          entityId: comment.id,
-          entityType: AttachmentEntityType.comment,
-        },
-      });
-      return {
-        id: comment.id,
-        content: comment.content,
-        author: {
-          id: comment.author.user.id,
-          name: comment.author.user.name,
-          email: comment.author.user.email,
-        },
-        attachments: attachments.map((att) => ({
-          id: att.id,
-          name: att.name,
-          type: att.type,
-          downloadUrl: att.url || '', // assuming url maps to downloadUrl
-          createdAt: att.createdAt.toISOString(),
-        })),
-        createdAt: comment.createdAt.toISOString(),
-      };
-    }),
-  );
-
-  return commentsWithAttachments;
-};
-
 const getAssignees = cache(async () => {
   const session = await auth.api.getSession({
     headers: await headers(),
diff --git a/apps/app/src/components/comments/Comments.tsx b/apps/app/src/components/comments/Comments.tsx
diff --git a/apps/app/src/components/forms/create-comment-form.tsx b/apps/app/src/components/forms/create-comment-form.tsx
