[offers][feat] add comment reply components

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>
   );
 }

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 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-end space-x-4 ">
+          <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
-              //   Disabled={isLoading}
                 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>
+      <HorizontalDivider />
+    </>
   );
 }

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>