From a2304dc9b8d242599f62b4a1eae312a4a4568513 Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Fri, 21 Oct 2022 11:51:53 +0800
Subject: [PATCH] [resumes][feat] add collapsible comments

---
 .../comments/ResumeCommentListItem.tsx        | 46 +++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
index c20930cf..36299b2a 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { useState } from 'react';
+import { ChevronUpIcon } from '@heroicons/react/20/solid';
 import { FaceSmileIcon } from '@heroicons/react/24/outline';
 
 import ResumeCommentEditForm from './comment/ResumeCommentEditForm';
@@ -22,6 +23,7 @@ export default function ResumeCommentListItem({
   const isCommentOwner = userId === comment.user.userId;
   const [isEditingComment, setIsEditingComment] = useState(false);
   const [isReplyingComment, setIsReplyingComment] = useState(false);
+  const [showReplies, setShowReplies] = useState(true);
 
   return (
     <div
@@ -56,7 +58,7 @@ export default function ResumeCommentListItem({
             <div className="flex flex-row items-center space-x-1">
               <p
                 className={clsx(
-                  'font-medium',
+                  'font-medium text-black',
                   !!comment.parentId && 'text-sm',
                 )}>
                 {comment.user.name ?? 'Reviewer ABC'}
@@ -126,24 +128,30 @@ export default function ResumeCommentListItem({
           {/* Replies */}
           {comment.children.length > 0 && (
             // Horizontal Divider
-            <div className="min-w-fit space-y-1 pt-1">
-              <div className="relative flex items-center">
-                <div className="flex-grow border-t border-gray-300" />
-                <span className="mx-4 flex-shrink text-xs text-gray-400">
-                  Replies
-                </span>
-                <div className="flex-grow border-t border-gray-300" />
-              </div>
-
-              {comment.children.map((child) => {
-                return (
-                  <ResumeCommentListItem
-                    key={child.id}
-                    comment={child}
-                    userId={userId}
-                  />
-                );
-              })}
+            <div className="min-w-fit space-y-1 pt-2">
+              <button
+                className="flex items-center space-x-1 rounded-md text-xs font-medium text-indigo-800 hover:text-indigo-300"
+                type="button"
+                onClick={() => setShowReplies(!showReplies)}>
+                <ChevronUpIcon
+                  className={clsx(
+                    'h-5 w-5 ',
+                    !showReplies && 'rotate-180 transform',
+                  )}
+                />
+                <span>{showReplies ? 'Hide replies' : 'Show replies'}</span>
+              </button>
+
+              {showReplies &&
+                comment.children.map((child) => {
+                  return (
+                    <ResumeCommentListItem
+                      key={child.id}
+                      comment={child}
+                      userId={userId}
+                    />
+                  );
+                })}
             </div>
           )}
         </div>