From 84af917ef396424682af915af879e5726e363e4f Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Fri, 7 Oct 2022 16:45:17 +0800
Subject: [PATCH] [resumes][feat] Filter comments

---
 .../resumes/comments/CommentsList.tsx           | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/components/resumes/comments/CommentsList.tsx b/apps/portal/src/components/resumes/comments/CommentsList.tsx
index 0b1d2d35..63aafc2c 100644
--- a/apps/portal/src/components/resumes/comments/CommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/CommentsList.tsx
@@ -6,6 +6,8 @@ import { trpc } from '~/utils/trpc';
 import CommentsListButton from './CommentsListButton';
 import { COMMENTS_SECTIONS } from './constants';
 
+import type { ResumeComment } from '~/types/resume-comments';
+
 type CommentsListProps = Readonly<{
   resumeId: string;
   setShowCommentsForm: (show: boolean) => void;
@@ -16,12 +18,19 @@ export default function CommentsList({
   setShowCommentsForm,
 }: CommentsListProps) {
   const [tab, setTab] = useState(COMMENTS_SECTIONS[0].value);
+  const [comments, setComments] = useState<Array<ResumeComment>>([]);
+
+  const onFetchComments = (data: Array<ResumeComment>) => {
+    const filteredComments = data.filter((comment) => {
+      return comment.section === tab;
+    });
 
-  const commentsQuery = trpc.useQuery(['resumes.reviews.list', { resumeId }]);
+    setComments(filteredComments);
+  };
 
-  /* eslint-disable no-console */
-  console.log(commentsQuery.data);
-  /* eslint-enable no-console */
+  trpc.useQuery(['resumes.reviews.list', { resumeId }], {
+    onSuccess: onFetchComments,
+  });
 
   return (
     <div className="space-y-3">