[resumes][refactor] add comment count to tabs

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)}
       />

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>

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">