From ddf1c1e62560472e2567d3dd74df94e6859bb4f2 Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Thu, 13 Oct 2022 11:45:45 +0800
Subject: [PATCH] [resumes][refactor] add comment count to tabs

---
 .../resumes/comments/ResumeCommentsList.tsx   | 21 +++++++++++++++++--
 .../comments/ResumeCommentsSection.tsx        |  2 +-
 apps/portal/src/pages/resumes/[resumeId].tsx  |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
index cba1ed85..929f7571 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -9,6 +9,8 @@ import ResumeCommentListItem from './comment/ResumeCommentListItem';
 import { RESUME_COMMENTS_SECTIONS } from './resumeCommentConstants';
 import ResumeSignInButton from '../shared/ResumeSignInButton';
 
+import type { ResumeComment } from '~/types/resume-comments';
+
 type ResumeCommentsListProps = Readonly<{
   resumeId: string;
   setShowCommentsForm: (show: boolean) => void;
@@ -20,8 +22,23 @@ export default function ResumeCommentsList({
 }: ResumeCommentsListProps) {
   const { data: sessionData } = useSession();
   const [tab, setTab] = useState(RESUME_COMMENTS_SECTIONS[0].value);
+  const [tabs, setTabs] = useState(RESUME_COMMENTS_SECTIONS);
+
+  const commentsQuery = trpc.useQuery(['resumes.comments.list', { resumeId }], {
+    onSuccess: (data: Array<ResumeComment>) => {
+      const updatedTabs = RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
+        const count = data.filter(({ section }) => section === value).length;
+        const updatedLabel = count > 0 ? `${label} (${count})` : label;
+        return {
+          label: updatedLabel,
+          value,
+        };
+      });
+
+      setTabs(updatedTabs);
+    },
+  });
 
-  const commentsQuery = trpc.useQuery(['resumes.comments.list', { resumeId }]);
   const renderButton = () => {
     if (sessionData === null) {
       return <ResumeSignInButton text="to join discussion" />;
@@ -42,7 +59,7 @@ export default function ResumeCommentsList({
 
       <Tabs
         label="comments"
-        tabs={RESUME_COMMENTS_SECTIONS}
+        tabs={tabs}
         value={tab}
         onChange={(value) => setTab(value)}
       />
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
index aae12121..38671be6 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
@@ -20,7 +20,7 @@ export default function ResumeCommentsSection({
         </div>
         <div className="relative flex justify-center">
           <span className="bg-gray-50 px-3 text-lg font-medium text-gray-900">
-            Comments
+            Reviews
           </span>
         </div>
       </div>
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index c8e469fb..c888f6f3 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -174,7 +174,7 @@ export default function ResumeReviewPage() {
               </div>
             )}
             <div className="flex w-full flex-col py-4 lg:flex-row">
-              <div className="w-full lg:w-[800px]">
+              <div className="w-full lg:w-[780px]">
                 <ResumePdf url={detailsQuery.data.url} />
               </div>
               <div className="mx-8 grow">