From 35494dc7eafc40bcf846136c10c2633533bb368c Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Fri, 21 Oct 2022 15:56:40 +0800
Subject: [PATCH] [resumes][fix] fix expandable text bug

---
 .../resumes/comments/ResumeCommentListItem.tsx        |  5 ++++-
 .../resumes/shared/ResumeExpandableText.tsx           | 11 ++++++-----
 apps/portal/src/pages/resumes/[resumeId].tsx          |  5 ++++-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
index 6814fda9..abf00a62 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -86,7 +86,10 @@ export default function ResumeCommentListItem({
               setIsEditingComment={setIsEditingComment}
             />
           ) : (
-            <ResumeExpandableText text={comment.description} />
+            <ResumeExpandableText
+              key={comment.description}
+              text={comment.description}
+            />
           )}
 
           {/* Upvote and edit */}
diff --git a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
index 5c78591b..fcb26ca3 100644
--- a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
+++ b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 
 type ResumeExpandableTextProps = Readonly<{
   text: string;
@@ -8,17 +8,17 @@ type ResumeExpandableTextProps = Readonly<{
 export default function ResumeExpandableText({
   text,
 }: ResumeExpandableTextProps) {
+  const ref = useRef<HTMLSpanElement>(null);
   const [isExpanded, setIsExpanded] = useState(false);
   const [descriptionOverflow, setDescriptionOverflow] = useState(false);
 
-  useEffect(() => {
-    const lines = text.split(/\r\n|\r|\n/);
-    if (lines.length > 3) {
+  useLayoutEffect(() => {
+    if (ref.current && ref.current.clientHeight < ref.current.scrollHeight) {
       setDescriptionOverflow(true);
     } else {
       setDescriptionOverflow(false);
     }
-  }, [text]);
+  }, [ref]);
 
   const onSeeActionClicked = () => {
     setIsExpanded((prevExpanded) => !prevExpanded);
@@ -27,6 +27,7 @@ export default function ResumeExpandableText({
   return (
     <div>
       <span
+        ref={ref}
         className={clsx(
           'line-clamp-3 whitespace-pre-wrap text-sm',
           isExpanded ? 'line-clamp-none' : '',
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 4c66576e..7a4c1e94 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -198,7 +198,10 @@ export default function ResumeReviewPage() {
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
                 />
-                <ResumeExpandableText text={detailsQuery.data.additionalInfo} />
+                <ResumeExpandableText
+                  key={detailsQuery.data.additionalInfo}
+                  text={detailsQuery.data.additionalInfo}
+                />
               </div>
             )}
             <div className="flex w-full flex-col py-4 lg:flex-row">