From 5a4e4e897789e23af501941bb21cdc6c55ba8ca1 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Thu, 3 Nov 2022 20:09:38 +0800
Subject: [PATCH] [offers][refactor] tweak comments list

---
 .../offers/profile/ProfileComments.tsx        | 107 ++++++-----
 .../offers/profile/comments/CommentCard.tsx   | 177 ++++++++++--------
 .../comments/ExpandableCommentCard.tsx        |  28 +--
 3 files changed, 166 insertions(+), 146 deletions(-)

diff --git a/apps/portal/src/components/offers/profile/ProfileComments.tsx b/apps/portal/src/components/offers/profile/ProfileComments.tsx
index 5654ed5e..34ac8b67 100644
--- a/apps/portal/src/components/offers/profile/ProfileComments.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileComments.tsx
@@ -110,10 +110,10 @@ export default function ProfileComments({
     );
   }
   return (
-    <div className="bh-white h-fit px-4 lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
-      <div className="bg-white pt-4 lg:sticky lg:top-0">
+    <div className="bh-white h-fit p-4 lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
+      <div className="bg-white lg:sticky lg:top-0">
         <div className="flex justify-end">
-          <div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:grid-cols-2 md:space-y-0 md:space-x-4">
+          <div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:space-y-0 md:space-x-4">
             <div className="col-span-1 flex justify-end">
               {isEditable && (
                 <Tooltip tooltipContent="Copy this link to edit your profile later">
@@ -169,57 +169,62 @@ export default function ProfileComments({
           </div>
         </div>
 
-        <h2 className="mt-2 mb-6 text-2xl font-bold">Discussions</h2>
-        {isEditable || session?.user?.name ? (
-          <div>
-            <TextArea
-              label={`Comment as ${
-                isEditable ? profileName : session?.user?.name ?? 'anonymous'
-              }`}
-              placeholder="Type your comment here"
-              value={currentReply}
-              onChange={(value) => setCurrentReply(value)}
-            />
-            <div className="mt-2 flex w-full justify-end">
-              <div className="w-fit">
-                <Button
-                  disabled={
-                    commentsQuery.isLoading ||
-                    !currentReply.length ||
-                    createCommentMutation.isLoading
-                  }
-                  display="block"
-                  isLabelHidden={false}
-                  isLoading={createCommentMutation.isLoading}
-                  label="Comment"
-                  size="sm"
-                  variant="primary"
-                  onClick={() => handleComment(currentReply)}
-                />
+        <div className="mt-2 mb-6 bg-white">
+          <h2 className="text-2xl font-bold">Discussions</h2>
+          {isEditable || session?.user?.name ? (
+            <div>
+              <TextArea
+                label={`Comment as ${
+                  isEditable ? profileName : session?.user?.name ?? 'anonymous'
+                }`}
+                placeholder="Type your comment here"
+                value={currentReply}
+                onChange={(value) => setCurrentReply(value)}
+              />
+              <div className="mt-2 flex w-full justify-end">
+                <div className="w-fit">
+                  <Button
+                    disabled={
+                      commentsQuery.isLoading ||
+                      !currentReply.length ||
+                      createCommentMutation.isLoading
+                    }
+                    display="block"
+                    isLabelHidden={false}
+                    isLoading={createCommentMutation.isLoading}
+                    label="Comment"
+                    size="sm"
+                    variant="primary"
+                    onClick={() => handleComment(currentReply)}
+                  />
+                </div>
               </div>
+              <HorizontalDivider />
             </div>
-            <HorizontalDivider />
-          </div>
-        ) : (
-          <Button
-            className="mb-5"
-            display="block"
-            href={loginPageHref()}
-            label="Sign in to join discussion"
-            variant="tertiary"
-          />
-        )}
-      </div>
-      <div className="w-full">
-        {replies?.map((reply: Reply) => (
-          <ExpandableCommentCard
-            key={reply.id}
-            comment={reply}
-            profileId={profileId}
-            token={isEditable ? token : undefined}
-          />
-        ))}
+          ) : (
+            <Button
+              className="mb-5"
+              display="block"
+              href={loginPageHref()}
+              label="Sign in to join discussion"
+              variant="tertiary"
+            />
+          )}
+        </div>
       </div>
+      <section className="w-full">
+        <ul className="space-y-8" role="list">
+          {replies?.map((reply: Reply) => (
+            <li key={reply.id}>
+              <ExpandableCommentCard
+                comment={reply}
+                profileId={profileId}
+                token={isEditable ? token : undefined}
+              />
+            </li>
+          ))}
+        </ul>
+      </section>
     </div>
   );
 }
diff --git a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
index c94d7b5a..9f0a0bef 100644
--- a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
+++ b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
@@ -1,14 +1,9 @@
 import { signIn, useSession } from 'next-auth/react';
 import { useState } from 'react';
-import {
-  ChatBubbleBottomCenterIcon,
-  TrashIcon,
-} from '@heroicons/react/24/outline';
-import { Button, Dialog, HorizontalDivider, TextArea, useToast } from '@tih/ui';
+import { Button, Dialog, TextArea, useToast } from '@tih/ui';
 
 import { timeSinceNow } from '~/utils/offers/time';
-
-import { trpc } from '../../../../utils/trpc';
+import { trpc } from '~/utils/trpc';
 
 import type { Reply } from '~/types/offers';
 
@@ -125,80 +120,97 @@ export default function CommentCard({
   }
 
   return (
-    <>
-      <div className="flex pl-2">
-        <div className="flex w-full flex-col">
-          <div className="flex flex-row font-bold">
+    <div className="flex space-x-3">
+      {/* <div className="flex-shrink-0">
+        <img
+          alt=""
+          className="h-10 w-10 rounded-full"
+          src={`https://images.unsplash.com/photo-${comment.imageId}?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80`}
+        />
+      </div> */}
+      <div>
+        <div className="text-sm">
+          <p className="font-medium text-slate-900">
             {user?.name ?? 'unknown user'}
-          </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-slate-400">{`${timeSinceNow(
-              createdAt,
-            )} ago`}</div>
-            {replyLength > 0 && (
-              <div
-                className="text-primary-600 flex cursor-pointer flex-col text-sm hover:underline"
+          </p>
+        </div>
+        <div className="mt-1 text-sm text-slate-700">
+          <p className="break-all">{message}</p>
+        </div>
+        <div className="mt-2 space-x-2 text-sm">
+          <span className="font-medium text-slate-500">
+            {timeSinceNow(createdAt)} ago
+          </span>{' '}
+          <span className="font-medium text-slate-500">&middot;</span>{' '}
+          {replyLength > 0 && (
+            <>
+              <button
+                className="font-medium text-slate-900"
+                type="button"
                 onClick={handleExpanded}>
                 {isExpanded ? `Hide replies` : `View replies (${replyLength})`}
-              </div>
-            )}
-            {!disableReply && (
-              <div className="flex flex-col">
-                <Button
-                  icon={ChatBubbleBottomCenterIcon}
-                  isLabelHidden={true}
-                  label="Reply"
-                  size="sm"
-                  variant="tertiary"
-                  onClick={() => setIsReplying(!isReplying)}
-                />
-              </div>
-            )}
-            {deletable && (
-              <>
-                <Button
-                  disabled={deleteCommentMutation.isLoading}
-                  icon={TrashIcon}
-                  isLabelHidden={true}
-                  isLoading={deleteCommentMutation.isLoading}
-                  label="Delete"
-                  size="sm"
-                  variant="tertiary"
-                  onClick={() => setIsDialogOpen(true)}
-                />
-                {isDialogOpen && (
-                  <Dialog
-                    isShown={isDialogOpen}
-                    primaryButton={
-                      <Button
-                        display="block"
-                        label="Delete"
-                        variant="primary"
-                        onClick={() => {
-                          setIsDialogOpen(false);
-                          handleDelete();
-                        }}
-                      />
-                    }
-                    secondaryButton={
-                      <Button
-                        display="block"
-                        label="Cancel"
-                        variant="tertiary"
-                        onClick={() => setIsDialogOpen(false)}
-                      />
-                    }
-                    title="Are you sure you want to delete this comment?"
-                    onClose={() => setIsDialogOpen(false)}>
-                    <div>You cannot undo this operation.</div>
-                  </Dialog>
-                )}
-              </>
-            )}
-          </div>
-          {!disableReply && isReplying && (
-            <div className="mt-2 mr-2">
+              </button>
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
+            </>
+          )}
+          {!disableReply && (
+            <>
+              <button
+                className="font-medium text-slate-900"
+                type="button"
+                onClick={() => setIsReplying(!isReplying)}>
+                Reply
+              </button>
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
+            </>
+          )}
+          {deletable && (
+            <>
+              <button
+                className="font-medium text-slate-900"
+                disabled={deleteCommentMutation.isLoading}
+                type="button"
+                onClick={() => setIsDialogOpen(true)}>
+                {deleteCommentMutation.isLoading ? 'Deleting...' : 'Delete'}
+              </button>
+              {isDialogOpen && (
+                <Dialog
+                  isShown={isDialogOpen}
+                  primaryButton={
+                    <Button
+                      display="block"
+                      label="Delete"
+                      variant="primary"
+                      onClick={() => {
+                        setIsDialogOpen(false);
+                        handleDelete();
+                      }}
+                    />
+                  }
+                  secondaryButton={
+                    <Button
+                      display="block"
+                      label="Cancel"
+                      variant="tertiary"
+                      onClick={() => setIsDialogOpen(false)}
+                    />
+                  }
+                  title="Are you sure you want to delete this comment?"
+                  onClose={() => setIsDialogOpen(false)}>
+                  <div>You cannot undo this operation.</div>
+                </Dialog>
+              )}
+            </>
+          )}
+        </div>
+        {!disableReply && isReplying && (
+          <div className="mt-2 mr-2">
+            <form
+              onSubmit={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                handleReply();
+              }}>
               <TextArea
                 isLabelHidden={true}
                 label="Comment"
@@ -225,11 +237,10 @@ export default function CommentCard({
                   />
                 </div>
               </div>
-            </div>
-          )}
-        </div>
+            </form>
+          </div>
+        )}
       </div>
-      <HorizontalDivider />
-    </>
+    </div>
   );
 }
diff --git a/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx b/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
index 22736196..0eb2d96c 100644
--- a/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
+++ b/apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx
@@ -26,18 +26,22 @@ export default function ExpandableCommentCard({
         replyLength={comment.replies?.length ?? 0}
         token={token}
       />
-      {comment.replies && (
-        <div className="pl-8">
-          {isExpanded &&
-            comment.replies.map((reply) => (
-              <CommentCard
-                key={reply.id}
-                comment={reply}
-                disableReply={true}
-                profileId={profileId}
-                token={token}
-              />
-            ))}
+      {comment.replies && comment.replies.length > 0 && isExpanded && (
+        <div className="pt-4">
+          <div className="border-l-4 border-slate-200 pl-4">
+            <ul className="space-y-4" role="list">
+              {comment.replies.map((reply) => (
+                <li key={reply.id}>
+                  <CommentCard
+                    comment={reply}
+                    disableReply={true}
+                    profileId={profileId}
+                    token={token}
+                  />
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
       )}
     </div>