From 7d1ffb988751b5711ebb09f1652eacff973bb849 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Tue, 18 Oct 2022 10:25:23 +0800
Subject: [PATCH] [resumes][fix] fix expandable text not updating

---
 .../comments/ResumeCommentListItem.tsx        |  2 +-
 .../resumes/shared/ResumeExpandableText.tsx   | 23 +++++++++----------
 apps/portal/src/pages/resumes/[resumeId].tsx  |  4 +---
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
index 537f3fc2..b331e7f6 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -54,7 +54,7 @@ export default function ResumeCommentListItem({
           </div>
 
           {/* Description */}
-          <ResumeExpandableText>{comment.description}</ResumeExpandableText>
+          <ResumeExpandableText text={comment.description} />
 
           {/* Upvote and edit */}
           <div className="flex flex-row space-x-1 pt-1 align-middle">
diff --git a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
index 2e79eb51..5c78591b 100644
--- a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
+++ b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
@@ -1,23 +1,24 @@
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type ResumeExpandableTextProps = Readonly<{
-  children: ReactNode;
+  text: string;
 }>;
 
 export default function ResumeExpandableText({
-  children,
+  text,
 }: ResumeExpandableTextProps) {
-  const ref = useRef<HTMLSpanElement>(null);
   const [isExpanded, setIsExpanded] = useState(false);
   const [descriptionOverflow, setDescriptionOverflow] = useState(false);
 
-  useLayoutEffect(() => {
-    if (ref.current && ref.current.clientHeight < ref.current.scrollHeight) {
+  useEffect(() => {
+    const lines = text.split(/\r\n|\r|\n/);
+    if (lines.length > 3) {
       setDescriptionOverflow(true);
+    } else {
+      setDescriptionOverflow(false);
     }
-  }, [ref]);
+  }, [text]);
 
   const onSeeActionClicked = () => {
     setIsExpanded((prevExpanded) => !prevExpanded);
@@ -26,13 +27,11 @@ export default function ResumeExpandableText({
   return (
     <div>
       <span
-        ref={ref}
         className={clsx(
-          'whitespace-pre-wrap text-sm',
-          'line-clamp-3',
+          'line-clamp-3 whitespace-pre-wrap text-sm',
           isExpanded ? 'line-clamp-none' : '',
         )}>
-        {children}
+        {text}
       </span>
       {descriptionOverflow && (
         <p
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 45c98e60..002be9b6 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -189,9 +189,7 @@ export default function ResumeReviewPage() {
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
                 />
-                <ResumeExpandableText>
-                  {detailsQuery.data.additionalInfo}
-                </ResumeExpandableText>
+                <ResumeExpandableText text={detailsQuery.data.additionalInfo} />
               </div>
             )}
             <div className="flex w-full flex-col py-4 lg:flex-row">