From 701ccce5ae45c18597b09365cf3fb152e0771b31 Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Wed, 12 Oct 2022 01:25:18 +0800
Subject: [PATCH] [resumes][feat] add see more/less for overflow comments

---
 .../resumes/comments/comment/CommentBody.tsx  |  4 +-
 .../comments/comment/CommentDescription.tsx   | 48 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 apps/portal/src/components/resumes/comments/comment/CommentDescription.tsx

diff --git a/apps/portal/src/components/resumes/comments/comment/CommentBody.tsx b/apps/portal/src/components/resumes/comments/comment/CommentBody.tsx
index e10e3a4b..abf24b88 100644
--- a/apps/portal/src/components/resumes/comments/comment/CommentBody.tsx
+++ b/apps/portal/src/components/resumes/comments/comment/CommentBody.tsx
@@ -4,6 +4,8 @@ import {
 } from '@heroicons/react/20/solid';
 import { FaceSmileIcon } from '@heroicons/react/24/outline';
 
+import CommentDescription from './CommentDescription';
+
 import type { ResumeComment } from '~/types/resume-comments';
 
 type CommentBodyProps = {
@@ -49,7 +51,7 @@ export default function CommentBody({
         </div>
 
         {/* Description */}
-        <div className="whitespace-pre-wrap text-sm">{comment.description}</div>
+        <CommentDescription>{comment.description}</CommentDescription>
 
         {/* 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/CommentDescription.tsx b/apps/portal/src/components/resumes/comments/comment/CommentDescription.tsx
new file mode 100644
index 00000000..8f1eff21
--- /dev/null
+++ b/apps/portal/src/components/resumes/comments/comment/CommentDescription.tsx
@@ -0,0 +1,48 @@
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
+
+type CommentDescriptionProps = Readonly<{
+  children: ReactNode;
+}>;
+
+export default function CommentDescription({
+  children,
+}: CommentDescriptionProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [descriptionExpanded, setDescriptionExpanded] = useState(false);
+  const [descriptionOverflow, setDescriptionOverflow] = useState(false);
+
+  useLayoutEffect(() => {
+    if (ref.current && ref.current.clientHeight < ref.current.scrollHeight) {
+      setDescriptionOverflow(true);
+    }
+  }, [ref]);
+
+  const onSeeActionClicked = () => {
+    setDescriptionExpanded(!descriptionExpanded);
+  };
+
+  return (
+    <>
+      <span
+        ref={ref}
+        className={clsx(
+          'whitespace-pre-wrap text-sm',
+          'line-clamp-3',
+          descriptionExpanded ? 'line-clamp-none' : '',
+        )}>
+        {children}
+      </span>
+      {descriptionOverflow && (
+        <div className="flex flex-row">
+          <div
+            className="text-xs text-indigo-500 hover:text-indigo-300"
+            onClick={onSeeActionClicked}>
+            {descriptionExpanded ? 'See Less' : 'See More'}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}