[offers][feat] add comment components

apps/portal/src/components/offers/profile/ProfileComments.tsx

@@ -1,5 +1,7 @@
 import { ClipboardDocumentIcon, ShareIcon } from '@heroicons/react/24/outline';
-import { Button, Spinner } from '@tih/ui';
+import { Button, Spinner, TextArea } from '@tih/ui';
+
+import ExpandableCommentCard from './comments/ExpandableCommentCard';
 
 type ProfileHeaderProps = Readonly<{
   handleCopyEditLink: () => void;
@@ -16,6 +18,9 @@ export default function ProfileComments({
   isEditable,
   isLoading,
 }: ProfileHeaderProps) {
+  function handleReply(replayingToId: string, userId: string) {
+    return replayingToId + userId; // To integrate with API
+  }
   if (isLoading) {
     return (
       <div className="col-span-10 pt-4">
@@ -52,7 +57,41 @@ export default function ProfileComments({
       <h2 className="mt-2 text-2xl font-bold">
         Discussions feature coming soon
       </h2>
-      {/* <TextArea label="Comment" placeholder="Type your comment here" /> */}
+      <ExpandableCommentCard
+        comment={{
+          createdAt: new Date(),
+          id: '1',
+          message: 'Test comment',
+          profileId: '123',
+          replies: [
+            {
+              createdAt: new Date(),
+              id: '123',
+              message: 'Test comment',
+              profileId: '123',
+              replies: undefined,
+              replyingToId: '12345',
+              userId: '12314',
+              username: 'nihao username',
+            },
+            {
+              createdAt: new Date(),
+              id: '12334',
+              message: 'Test comment',
+              profileId: '123',
+              replies: undefined,
+              replyingToId: '12345',
+              userId: '12314',
+              username: 'nihao username',
+            },
+          ],
+          replyingToId: '12345',
+          userId: '12314',
+          username: 'nihao username',
+        }}
+        handleReply={handleReply}
+      />
+      <TextArea label="Comment" placeholder="Type your comment here" />
     </div>
   );
 }

apps/portal/src/components/offers/profile/comments/CommentCard.tsx

@@ -0,0 +1,49 @@
+import { ChatBubbleBottomCenterIcon } from '@heroicons/react/24/outline';
+import { Button } from '@tih/ui';
+
+import type { CommentEntity } from '~/components/offers/types';
+
+import { timeSinceNow } from '~/utils/offers/time';
+
+type Props = Readonly<{
+  comment: CommentEntity;
+  handleReply: (replayingToId: string, userId: string) => void;
+}>;
+
+export default function CommentCard({
+  comment: {
+    createdAt,
+    message,
+    // ProfileId,
+    // replies,
+    replyingToId,
+    userId,
+    username,
+  },
+  handleReply,
+}: Props) {
+  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>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx

@@ -0,0 +1,30 @@
+import { Collapsible } from '@tih/ui';
+
+import CommentCard from '~/components/offers/profile/comments/CommentCard';
+import type { CommentEntity } from '~/components/offers/types';
+
+type Props = Readonly<{
+  comment: CommentEntity;
+  handleReply: (replayingToId: string, userId: string) => void;
+}>;
+
+export default function ExpandableCommentCard({ comment, handleReply }: Props) {
+  return (
+    <div>
+      <CommentCard comment={comment} handleReply={handleReply} />
+      {comment.replies && (
+        <div className="pl-4">
+          <Collapsible label={`View more replies(${comment.replies.length})`}>
+            {comment.replies.map((reply) => (
+              <CommentCard
+                key={reply.id}
+                comment={reply}
+                handleReply={handleReply}
+              />
+            ))}
+          </Collapsible>
+        </div>
+      )}
+    </div>
+  );
+}

apps/portal/src/components/offers/types.ts

@@ -158,3 +158,14 @@ export type BackgroundCard = {
   specificYoes: Array<SpecificYoe>;
   totalYoe: string;
 };
+
+export type CommentEntity = {
+  createdAt: Date;
+  id: string;
+  message: string;
+  profileId: string;
+  replies?: Array<CommentEntity>;
+  replyingToId: string;
+  userId: string;
+  username: string;
+};

apps/portal/src/utils/offers/time.tsx

@@ -2,6 +2,34 @@ import { getMonth, getYear } from 'date-fns';
 
 import type { MonthYear } from '~/components/shared/MonthYearPicker';
 
+export function timeSinceNow(date: Date | number | string) {
+  const seconds = Math.floor(
+    new Date().getTime() / 1000 - new Date(date).getTime() / 1000,
+  );
+  let interval = seconds / 31536000;
+
+  if (interval > 1) {
+    return `${Math.floor(interval)} years`;
+  }
+  interval = seconds / 2592000;
+  if (interval > 1) {
+    return `${Math.floor(interval)} months`;
+  }
+  interval = seconds / 86400;
+  if (interval > 1) {
+    return `${Math.floor(interval)} days`;
+  }
+  interval = seconds / 3600;
+  if (interval > 1) {
+    return `${Math.floor(interval)} hours`;
+  }
+  interval = seconds / 60;
+  if (interval > 1) {
+    return `${Math.floor(interval)} minutes`;
+  }
+  return `${Math.floor(interval)} seconds`;
+}
+
 export function formatDate(value: Date | number | string) {
   const date = new Date(value);
   //   Const day = date.toLocaleString('default', { day: '2-digit' });