From e7bcd18cc5845002655193ed0717379d2954ba06 Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Thu, 13 Oct 2022 11:02:55 +0800
Subject: [PATCH] [resumes][refactor] prefix comments section with Resume

---
 .../resumes/comments/CommentListItems.tsx     | 35 ----------
 .../resumes/comments/CommentsList.tsx         | 54 ---------------
 ...ommentsForm.tsx => ResumeCommentsForm.tsx} |  6 +-
 .../resumes/comments/ResumeCommentsList.tsx   | 69 +++++++++++++++++++
 ...sSection.tsx => ResumeCommentsSection.tsx} | 14 ++--
 .../resumes/comments/comment/Comment.tsx      | 18 -----
 ...{CommentBody.tsx => ResumeCommentBody.tsx} | 10 +--
 ...{CommentCard.tsx => ResumeCommentCard.tsx} |  6 +-
 .../comment/ResumeCommentListItem.tsx         | 21 ++++++
 ...constants.ts => resumeCommentConstants.ts} |  2 +-
 .../ResumeExpandableText.tsx}                 |  6 +-
 apps/portal/src/pages/resumes/[resumeId].tsx  |  4 +-
 12 files changed, 116 insertions(+), 129 deletions(-)
 delete mode 100644 apps/portal/src/components/resumes/comments/CommentListItems.tsx
 delete mode 100644 apps/portal/src/components/resumes/comments/CommentsList.tsx
 rename apps/portal/src/components/resumes/comments/{CommentsForm.tsx => ResumeCommentsForm.tsx} (97%)
 create mode 100644 apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
 rename apps/portal/src/components/resumes/comments/{CommentsSection.tsx => ResumeCommentsSection.tsx} (73%)
 delete mode 100644 apps/portal/src/components/resumes/comments/comment/Comment.tsx
 rename apps/portal/src/components/resumes/comments/comment/{CommentBody.tsx => ResumeCommentBody.tsx} (88%)
 rename apps/portal/src/components/resumes/comments/comment/{CommentCard.tsx => ResumeCommentCard.tsx} (64%)
 create mode 100644 apps/portal/src/components/resumes/comments/comment/ResumeCommentListItem.tsx
 rename apps/portal/src/components/resumes/comments/{constants.ts => resumeCommentConstants.ts} (90%)
 rename apps/portal/src/components/resumes/{comments/comment/CommentDescription.tsx => shared/ResumeExpandableText.tsx} (90%)

diff --git a/apps/portal/src/components/resumes/comments/CommentListItems.tsx b/apps/portal/src/components/resumes/comments/CommentListItems.tsx
deleted file mode 100644
index 5e3e154d..00000000
--- a/apps/portal/src/components/resumes/comments/CommentListItems.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useSession } from 'next-auth/react';
-import { Spinner } from '@tih/ui';
-
-import Comment from './comment/Comment';
-
-import type { ResumeComment } from '~/types/resume-comments';
-
-type Props = Readonly<{
-  comments: Array<ResumeComment>;
-  isLoading: boolean;
-}>;
-
-export default function CommentListItems({ comments, isLoading }: Props) {
-  const { data: session } = useSession();
-
-  if (isLoading) {
-    return (
-      <div className="col-span-10 pt-4">
-        <Spinner display="block" size="lg" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-3 overflow-y-auto">
-      {comments.map((comment) => (
-        <Comment
-          key={comment.id}
-          comment={comment}
-          userId={session?.user?.id}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/apps/portal/src/components/resumes/comments/CommentsList.tsx b/apps/portal/src/components/resumes/comments/CommentsList.tsx
deleted file mode 100644
index e4f842cb..00000000
--- a/apps/portal/src/components/resumes/comments/CommentsList.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useSession } from 'next-auth/react';
-import { useState } from 'react';
-import { Tabs } from '@tih/ui';
-import { Button } from '@tih/ui';
-
-import { trpc } from '~/utils/trpc';
-
-import CommentListItems from './CommentListItems';
-import { COMMENTS_SECTIONS } from './constants';
-import ResumeSignInButton from '../shared/ResumeSignInButton';
-
-type CommentsListProps = Readonly<{
-  resumeId: string;
-  setShowCommentsForm: (show: boolean) => void;
-}>;
-
-export default function CommentsList({
-  resumeId,
-  setShowCommentsForm,
-}: CommentsListProps) {
-  const { data: sessionData } = useSession();
-  const [tab, setTab] = useState(COMMENTS_SECTIONS[0].value);
-
-  const commentsQuery = trpc.useQuery(['resumes.reviews.list', { resumeId }]);
-  const renderButton = () => {
-    if (sessionData === null) {
-      return <ResumeSignInButton text="to join discussion" />;
-    }
-    return (
-      <Button
-        display="block"
-        label="Add your review"
-        variant="tertiary"
-        onClick={() => setShowCommentsForm(true)}
-      />
-    );
-  };
-
-  return (
-    <div className="space-y-3">
-      {renderButton()}
-      <Tabs
-        label="comments"
-        tabs={COMMENTS_SECTIONS}
-        value={tab}
-        onChange={(value) => setTab(value)}
-      />
-      <CommentListItems
-        comments={commentsQuery.data?.filter((c) => c.section === tab) ?? []}
-        isLoading={commentsQuery.isFetching}
-      />
-    </div>
-  );
-}
diff --git a/apps/portal/src/components/resumes/comments/CommentsForm.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
similarity index 97%
rename from apps/portal/src/components/resumes/comments/CommentsForm.tsx
rename to apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
index 27625e7e..18e981ad 100644
--- a/apps/portal/src/components/resumes/comments/CommentsForm.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
@@ -5,7 +5,7 @@ import { Button, Dialog, TextArea } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-type CommentsFormProps = Readonly<{
+type ResumeCommentsFormProps = Readonly<{
   resumeId: string;
   setShowCommentsForm: (show: boolean) => void;
 }>;
@@ -20,10 +20,10 @@ type IFormInput = {
 
 type InputKeys = keyof IFormInput;
 
-export default function CommentsForm({
+export default function ResumeCommentsForm({
   resumeId,
   setShowCommentsForm,
-}: CommentsFormProps) {
+}: ResumeCommentsFormProps) {
   const [showDialog, setShowDialog] = useState(false);
   const {
     register,
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
new file mode 100644
index 00000000..2bdf4f4f
--- /dev/null
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -0,0 +1,69 @@
+import { useSession } from 'next-auth/react';
+import { useState } from 'react';
+import { Spinner, Tabs } from '@tih/ui';
+import { Button } from '@tih/ui';
+
+import { trpc } from '~/utils/trpc';
+
+import ResumeCommentListItem from './comment/ResumeCommentListItem';
+import { RESUME_COMMENTS_SECTIONS } from './resumeCommentConstants';
+import ResumeSignInButton from '../shared/ResumeSignInButton';
+
+type ResumeCommentsListProps = Readonly<{
+  resumeId: string;
+  setShowCommentsForm: (show: boolean) => void;
+}>;
+
+export default function ResumeCommentsList({
+  resumeId,
+  setShowCommentsForm,
+}: ResumeCommentsListProps) {
+  const { data: sessionData } = useSession();
+  const [tab, setTab] = useState(RESUME_COMMENTS_SECTIONS[0].value);
+
+  const commentsQuery = trpc.useQuery(['resumes.reviews.list', { resumeId }]);
+  const renderButton = () => {
+    if (sessionData === null) {
+      return <ResumeSignInButton text="to join discussion" />;
+    }
+    return (
+      <Button
+        display="block"
+        label="Add your review"
+        variant="tertiary"
+        onClick={() => setShowCommentsForm(true)}
+      />
+    );
+  };
+
+  return (
+    <div className="space-y-3">
+      {renderButton()}
+
+      <Tabs
+        label="comments"
+        tabs={RESUME_COMMENTS_SECTIONS}
+        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>
+      )}
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/resumes/comments/CommentsSection.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
similarity index 73%
rename from apps/portal/src/components/resumes/comments/CommentsSection.tsx
rename to apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
index 6df9c4cf..aae12121 100644
--- a/apps/portal/src/components/resumes/comments/CommentsSection.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
@@ -1,13 +1,15 @@
 import { useState } from 'react';
 
-import CommentsForm from './CommentsForm';
-import CommentsList from './CommentsList';
+import ResumeCommentsForm from './ResumeCommentsForm';
+import ResumeCommentsList from './ResumeCommentsList';
 
-type ICommentsSectionProps = {
+type CommentsSectionProps = {
   resumeId: string;
 };
 
-export default function CommentsSection({ resumeId }: ICommentsSectionProps) {
+export default function ResumeCommentsSection({
+  resumeId,
+}: CommentsSectionProps) {
   const [showCommentsForm, setShowCommentsForm] = useState(false);
 
   return (
@@ -23,12 +25,12 @@ export default function CommentsSection({ resumeId }: ICommentsSectionProps) {
         </div>
       </div>
       {showCommentsForm ? (
-        <CommentsForm
+        <ResumeCommentsForm
           resumeId={resumeId}
           setShowCommentsForm={setShowCommentsForm}
         />
       ) : (
-        <CommentsList
+        <ResumeCommentsList
           resumeId={resumeId}
           setShowCommentsForm={setShowCommentsForm}
         />
diff --git a/apps/portal/src/components/resumes/comments/comment/Comment.tsx b/apps/portal/src/components/resumes/comments/comment/Comment.tsx
deleted file mode 100644
index ad219a80..00000000
--- a/apps/portal/src/components/resumes/comments/comment/Comment.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import CommentBody from './CommentBody';
-import CommentCard from './CommentCard';
-
-import type { ResumeComment } from '~/types/resume-comments';
-
-type CommentProps = {
-  comment: ResumeComment;
-  userId?: string;
-};
-
-export default function Comment({ comment, userId }: CommentProps) {
-  const isCommentOwner = userId === comment.user.userId;
-  return (
-    <CommentCard>
-      <CommentBody comment={comment} isCommentOwner={isCommentOwner} />
-    </CommentCard>
-  );
-}
diff --git a/apps/portal/src/components/resumes/comments/comment/CommentBody.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentBody.tsx
similarity index 88%
rename from apps/portal/src/components/resumes/comments/comment/CommentBody.tsx
rename to apps/portal/src/components/resumes/comments/comment/ResumeCommentBody.tsx
index abf24b88..51483bac 100644
--- a/apps/portal/src/components/resumes/comments/comment/CommentBody.tsx
+++ b/apps/portal/src/components/resumes/comments/comment/ResumeCommentBody.tsx
@@ -4,19 +4,19 @@ import {
 } from '@heroicons/react/20/solid';
 import { FaceSmileIcon } from '@heroicons/react/24/outline';
 
-import CommentDescription from './CommentDescription';
+import ResumeExpandableText from '../../shared/ResumeExpandableText';
 
 import type { ResumeComment } from '~/types/resume-comments';
 
-type CommentBodyProps = {
+type ResumeCommentBodyProps = {
   comment: ResumeComment;
   isCommentOwner?: boolean;
 };
 
-export default function CommentBody({
+export default function ResumeCommentBody({
   comment,
   isCommentOwner,
-}: CommentBodyProps) {
+}: ResumeCommentBodyProps) {
   return (
     <div className="flex w-full flex-row space-x-2 p-1 align-top">
       {comment.user.image ? (
@@ -51,7 +51,7 @@ export default function CommentBody({
         </div>
 
         {/* Description */}
-        <CommentDescription>{comment.description}</CommentDescription>
+        <ResumeExpandableText>{comment.description}</ResumeExpandableText>
 
         {/* Upvote and edit */}
         <div className="flex flex-row space-x-1 pt-1 align-middle">
diff --git a/apps/portal/src/components/resumes/comments/comment/CommentCard.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentCard.tsx
similarity index 64%
rename from apps/portal/src/components/resumes/comments/comment/CommentCard.tsx
rename to apps/portal/src/components/resumes/comments/comment/ResumeCommentCard.tsx
index 7cb89169..ae9ac3bf 100644
--- a/apps/portal/src/components/resumes/comments/comment/CommentCard.tsx
+++ b/apps/portal/src/components/resumes/comments/comment/ResumeCommentCard.tsx
@@ -1,10 +1,12 @@
 import type { ReactNode } from 'react';
 
-type CommentCardProps = {
+type ResumeCommentCardProps = {
   children: ReactNode;
 };
 
-export default function CommentCard({ children }: CommentCardProps) {
+export default function ResumeCommentCard({
+  children,
+}: ResumeCommentCardProps) {
   return (
     <div className="border-primary-300 w-3/4 rounded-md border-2 bg-white p-2 drop-shadow-md">
       {children}
diff --git a/apps/portal/src/components/resumes/comments/comment/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentListItem.tsx
new file mode 100644
index 00000000..05172457
--- /dev/null
+++ b/apps/portal/src/components/resumes/comments/comment/ResumeCommentListItem.tsx
@@ -0,0 +1,21 @@
+import ResumeCommentBody from './ResumeCommentBody';
+import ResumeCommentCard from './ResumeCommentCard';
+
+import type { ResumeComment } from '~/types/resume-comments';
+
+type ResumeCommentListItemProps = {
+  comment: ResumeComment;
+  userId?: string;
+};
+
+export default function ResumeCommentListItem({
+  comment,
+  userId,
+}: ResumeCommentListItemProps) {
+  const isCommentOwner = userId === comment.user.userId;
+  return (
+    <ResumeCommentCard>
+      <ResumeCommentBody comment={comment} isCommentOwner={isCommentOwner} />
+    </ResumeCommentCard>
+  );
+}
diff --git a/apps/portal/src/components/resumes/comments/constants.ts b/apps/portal/src/components/resumes/comments/resumeCommentConstants.ts
similarity index 90%
rename from apps/portal/src/components/resumes/comments/constants.ts
rename to apps/portal/src/components/resumes/comments/resumeCommentConstants.ts
index d47dd181..5211468e 100644
--- a/apps/portal/src/components/resumes/comments/constants.ts
+++ b/apps/portal/src/components/resumes/comments/resumeCommentConstants.ts
@@ -1,6 +1,6 @@
 import { ResumesSection } from '@prisma/client';
 
-export const COMMENTS_SECTIONS = [
+export const RESUME_COMMENTS_SECTIONS = [
   {
     label: 'General',
     value: ResumesSection.GENERAL,
diff --git a/apps/portal/src/components/resumes/comments/comment/CommentDescription.tsx b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
similarity index 90%
rename from apps/portal/src/components/resumes/comments/comment/CommentDescription.tsx
rename to apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
index 8f1eff21..82c7c9df 100644
--- a/apps/portal/src/components/resumes/comments/comment/CommentDescription.tsx
+++ b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
@@ -2,13 +2,13 @@ import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
 
-type CommentDescriptionProps = Readonly<{
+type ResumeExpandableTextProps = Readonly<{
   children: ReactNode;
 }>;
 
-export default function CommentDescription({
+export default function ResumeExpandableText({
   children,
-}: CommentDescriptionProps) {
+}: ResumeExpandableTextProps) {
   const ref = useRef<HTMLSpanElement>(null);
   const [descriptionExpanded, setDescriptionExpanded] = useState(false);
   const [descriptionOverflow, setDescriptionOverflow] = useState(false);
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 3c2f3abd..c8e469fb 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -15,7 +15,7 @@ import {
 } from '@heroicons/react/20/solid';
 import { Spinner } from '@tih/ui';
 
-import CommentsSection from '~/components/resumes/comments/CommentsSection';
+import ResumeCommentsSection from '~/components/resumes/comments/ResumeCommentsSection';
 import ResumePdf from '~/components/resumes/ResumePdf';
 
 import { trpc } from '~/utils/trpc';
@@ -178,7 +178,7 @@ export default function ResumeReviewPage() {
                 <ResumePdf url={detailsQuery.data.url} />
               </div>
               <div className="mx-8 grow">
-                <CommentsSection resumeId={resumeId as string} />
+                <ResumeCommentsSection resumeId={resumeId as string} />
               </div>
             </div>
           </main>