From dc818c90bedff238ed0c16d0e6f2f65074254891 Mon Sep 17 00:00:00 2001
From: Zhang Ziqing <zhangziqing9926@gmail.com>
Date: Sun, 16 Oct 2022 22:40:26 +0800
Subject: [PATCH] [offers][feat] add comment reply components

---
 .../offers/profile/ProfileComments.tsx        | 30 +++++--
 .../offers/profile/comments/CommentCard.tsx   | 89 +++++++++++++------
 .../comments/ExpandableCommentCard.tsx        | 18 ++--
 3 files changed, 97 insertions(+), 40 deletions(-)

diff --git a/apps/portal/src/components/offers/profile/ProfileComments.tsx b/apps/portal/src/components/offers/profile/ProfileComments.tsx
index e3e9bb18..0b18332a 100644
--- a/apps/portal/src/components/offers/profile/ProfileComments.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileComments.tsx
@@ -1,5 +1,5 @@
 import { ClipboardDocumentIcon, ShareIcon } from '@heroicons/react/24/outline';
-import { Button, Spinner, TextArea } from '@tih/ui';
+import { Button, HorizontalDivider, Spinner, TextArea } from '@tih/ui';
 
 import ExpandableCommentCard from './comments/ExpandableCommentCard';
 
@@ -21,6 +21,10 @@ export default function ProfileComments({
   function handleReply(replayingToId: string, userId: string) {
     return replayingToId + userId; // To integrate with API
   }
+
+  function handleComment() {
+    return 'profileId'; // To integrate with API
+  }
   if (isLoading) {
     return (
       <div className="col-span-10 pt-4">
@@ -54,9 +58,26 @@ export default function ProfileComments({
           onClick={handleCopyPublicLink}
         />
       </div>
-      <h2 className="mt-2 text-2xl font-bold">
-        Discussions feature coming soon
-      </h2>
+      <h2 className="mt-2 mb-6 text-2xl font-bold">Discussions</h2>
+      <div>
+        <TextArea
+          label="Comment as anonymous"
+          placeholder="Type your comment here"
+        />
+        <div className="mt-2 flex w-full justify-end">
+          <div className="w-fit">
+            <Button
+              display="block"
+              isLabelHidden={false}
+              label="Comment"
+              size="sm"
+              variant="primary"
+              onClick={handleComment}
+            />
+          </div>
+        </div>
+        <HorizontalDivider />
+      </div>
       <ExpandableCommentCard
         comment={{
           createdAt: new Date(),
@@ -91,7 +112,6 @@ export default function ProfileComments({
         }}
         handleReply={handleReply}
       />
-      <TextArea label="Comment" placeholder="Type your comment here" />
     </div>
   );
 }
diff --git a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
index 712f06a1..f434da8e 100644
--- a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
+++ b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
@@ -1,5 +1,6 @@
+import { useState } from 'react';
 import { ChatBubbleBottomCenterIcon } from '@heroicons/react/24/outline';
-import { Button } from '@tih/ui';
+import { Button, HorizontalDivider, TextArea } from '@tih/ui';
 
 import type { CommentEntity } from '~/components/offers/types';
 
@@ -7,43 +8,73 @@ import { timeSinceNow } from '~/utils/offers/time';
 
 type Props = Readonly<{
   comment: CommentEntity;
+  handleExpanded?: () => void;
   handleReply: (replayingToId: string, userId: string) => void;
+  isExpanded?: boolean;
+  replyLength?: number;
 }>;
 
 export default function CommentCard({
-  comment: {
-    createdAt,
-    message,
-    // ProfileId,
-    // replies,
-    replyingToId,
-    userId,
-    username,
-  },
+  comment: { createdAt, message, replyingToId, userId, username },
+  handleExpanded,
   handleReply,
+  isExpanded,
+  replyLength = 0,
 }: Props) {
+  const [isReplying, setIsReplying] = useState(false);
   return (
-    <div className="flex pl-4">
-      <div className="flex flex-col">
-        <div className="flex flex-row font-bold">{username}</div>
-        <div className="mt-2 mb-2 flex flex-row ">{message}</div>
-        <div className="flex flex-row items-center justify-end space-x-4 ">
-          <div className="flex flex-col text-sm font-light text-gray-400">{`${timeSinceNow(
-            createdAt,
-          )} ago`}</div>
-          <div className="flex flex-col">
-            <Button
-              //   Disabled={isLoading}
-              icon={ChatBubbleBottomCenterIcon}
-              isLabelHidden={true}
-              label="Reply"
-              size="sm"
-              variant="tertiary"
-              onClick={() => handleReply(replyingToId, userId)}
-            />
+    <>
+      <div className="flex pl-2">
+        <div className="flex w-full flex-col">
+          <div className="flex flex-row font-bold">{username}</div>
+          <div className="mt-2 mb-2 flex flex-row ">{message}</div>
+          <div className="flex flex-row items-center justify-start space-x-4 ">
+            <div className="flex flex-col text-sm font-light text-gray-400">{`${timeSinceNow(
+              createdAt,
+            )} ago`}</div>
+            {replyLength > 0 && (
+              <div
+                className="flex cursor-pointer flex-col text-sm text-purple-600 hover:underline"
+                onClick={handleExpanded}>
+                {isExpanded ? `Hide replies` : `View replies (${replyLength})`}
+              </div>
+            )}
+            <div className="flex flex-col">
+              <Button
+                icon={ChatBubbleBottomCenterIcon}
+                isLabelHidden={true}
+                label="Reply"
+                size="sm"
+                variant="tertiary"
+                onClick={() => setIsReplying(!isReplying)}
+              />
+            </div>
           </div>
+          {isReplying && (
+            <div className="mt-2">
+              <TextArea
+                isLabelHidden={true}
+                label="Comment"
+                placeholder="Type your comment here"
+                resize="none"
+              />
+              <div className="mt-2 flex w-full justify-end">
+                <div className="w-fit">
+                  <Button
+                    display="block"
+                    isLabelHidden={false}
+                    label="Reply"
+                    size="sm"
+                    variant="primary"
+                    onClick={() => handleReply(replyingToId, userId)}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </div>
-    </div>
+      <HorizontalDivider />
+    </>
   );
 }
diff --git a/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx b/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
index 9bb750a9..17852c73 100644
--- a/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
+++ b/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
@@ -1,4 +1,4 @@
-import { Collapsible } from '@tih/ui';
+import { useState } from 'react';
 
 import CommentCard from '~/components/offers/profile/comments/CommentCard';
 import type { CommentEntity } from '~/components/offers/types';
@@ -9,20 +9,26 @@ type Props = Readonly<{
 }>;
 
 export default function ExpandableCommentCard({ comment, handleReply }: Props) {
+  const [isExpanded, setIsExpanded] = useState(false);
   return (
     <div>
-      <CommentCard comment={comment} handleReply={handleReply} />
+      <CommentCard
+        comment={comment}
+        handleExpanded={() => setIsExpanded(!isExpanded)}
+        handleReply={handleReply}
+        isExpanded={isExpanded}
+        replyLength={comment.replies?.length ?? 0}
+      />
       {comment.replies && (
-        <div className="pl-4">
-          <Collapsible label={`View more replies(${comment.replies.length})`}>
-            {comment.replies.map((reply) => (
+        <div className="pl-8">
+          {isExpanded &&
+            comment.replies.map((reply) => (
               <CommentCard
                 key={reply.id}
                 comment={reply}
                 handleReply={handleReply}
               />
             ))}
-          </Collapsible>
         </div>
       )}
     </div>