[resumes][refactor] Change Tabs to List view (#387)

Co-authored-by: Terence Ho <>

apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx

@@ -16,7 +16,7 @@ import type { ResumeComment } from '~/types/resume-comments';
 
 type ResumeCommentListItemProps = {
   comment: ResumeComment;
-  userId?: string;
+  userId: string | undefined;
 };
 
 type ICommentInput = {
@@ -78,8 +78,8 @@ export default function ResumeCommentListItem({
   };
 
   return (
-    <div className="border-primary-300 w-3/4 rounded-md border-2 bg-white p-2 drop-shadow-md">
-      <div className="flex w-full flex-row space-x-2 p-1 align-top">
+    <div className="border-primary-300 w-11/12 min-w-fit rounded-md border-2 bg-white p-2 drop-shadow-md">
+      <div className="flex flex-row space-x-2 p-1 align-top">
         {comment.user.image ? (
           <img
             alt={comment.user.name ?? 'Reviewer'}
@@ -103,7 +103,7 @@ export default function ResumeCommentListItem({
               </div>
             </div>
 
-            <div className="text-xs text-gray-600">
+            <div className="px-2 text-xs text-gray-600">
               {comment.createdAt.toLocaleString('en-US', {
                 dateStyle: 'medium',
                 timeStyle: 'short',
@@ -123,7 +123,7 @@ export default function ResumeCommentListItem({
                   defaultValue={comment.description}
                   disabled={commentUpdateMutation.isLoading}
                   errorMessage={errors.description?.message}
-                  label="Edit comment"
+                  label=""
                   placeholder="Leave your comment here"
                   onChange={setFormValue}
                 />

apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx

@@ -1,6 +1,14 @@
 import { useSession } from 'next-auth/react';
-import { useState } from 'react';
-import { Spinner, Tabs } from '@tih/ui';
+import {
+  BookOpenIcon,
+  BriefcaseIcon,
+  CodeBracketSquareIcon,
+  FaceSmileIcon,
+  IdentificationIcon,
+  SparklesIcon,
+} from '@heroicons/react/24/outline';
+import { ResumesSection } from '@prisma/client';
+import { Spinner } from '@tih/ui';
 import { Button } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
@@ -21,23 +29,26 @@ export default function ResumeCommentsList({
   setShowCommentsForm,
 }: 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,
-        };
-      });
+  const commentsQuery = trpc.useQuery(['resumes.comments.list', { resumeId }]);
 
-      setTabs(updatedTabs);
-    },
-  });
+  const renderIcon = (section: ResumesSection) => {
+    const className = 'h-8 w-8';
+    switch (section) {
+      case ResumesSection.GENERAL:
+        return <IdentificationIcon className={className} />;
+      case ResumesSection.EDUCATION:
+        return <BookOpenIcon className={className} />;
+      case ResumesSection.EXPERIENCE:
+        return <BriefcaseIcon className={className} />;
+      case ResumesSection.PROJECTS:
+        return <CodeBracketSquareIcon className={className} />;
+      case ResumesSection.SKILLS:
+        return <SparklesIcon className={className} />;
+      default:
+        return <FaceSmileIcon className={className} />;
+    }
+  };
 
   const renderButton = () => {
     if (sessionData === null) {
@@ -57,28 +68,44 @@ export default function ResumeCommentsList({
     <div className="space-y-3">
       {renderButton()}
 
-      <Tabs
-        label="comments"
-        tabs={tabs}
-        value={tab}
-        onChange={(value) => setTab(value)}
-      />
-
       {commentsQuery.isFetching ? (
         <div className="col-span-10 pt-4">
           <Spinner display="block" size="lg" />
         </div>
       ) : (
-        <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-3 overflow-y-auto">
-          {(commentsQuery.data?.filter((c) => c.section === tab) ?? []).map(
-            (comment) => (
-              <ResumeCommentListItem
-                key={comment.id}
-                comment={comment}
-                userId={sessionData?.user?.id}
-              />
-            ),
-          )}
+        <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-4 overflow-y-auto">
+          {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
+            const comments = commentsQuery.data
+              ? commentsQuery.data.filter((comment: ResumeComment) => {
+                  return (comment.section as string) === value;
+                })
+              : [];
+            const commentCount = comments.length;
+
+            return (
+              <div key={value} className="mb-4 space-y-3">
+                <div className="flex flex-row items-center space-x-2 text-indigo-800">
+                  {renderIcon(value)}
+
+                  <div className="w-fit text-xl font-medium">{label}</div>
+                </div>
+
+                {commentCount > 0 ? (
+                  comments.map((comment) => {
+                    return (
+                      <ResumeCommentListItem
+                        key={comment.id}
+                        comment={comment}
+                        userId={sessionData?.user?.id}
+                      />
+                    );
+                  })
+                ) : (
+                  <div>There are no comments for this section yet!</div>
+                )}
+              </div>
+            );
+          })}
         </div>
       )}
     </div>