From 0651d7178b29032c1de67813acabdd6bb8d7838b Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 4 Dec 2024 13:44:49 +0000
Subject: [PATCH] Extracted `<RepliedToSnippet>` component from
 `<CommentHeader>`

no issue

- keeps logic inside `<CommentHeader>` single-purpose
- allows for cleaner code when adding logic to remove the link when the replied-to comment is removed
- switched `queryByText` to `getByText` in the test to make debugging easier, the latter will print the current DOM if it fails to find an element

# Conflicts:
#	apps/comments-ui/src/components/content/Comment.tsx
---
 .../src/components/content/Comment.test.jsx   |  2 +-
 .../src/components/content/Comment.tsx        | 55 +++++++++++--------
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/apps/comments-ui/src/components/content/Comment.test.jsx b/apps/comments-ui/src/components/content/Comment.test.jsx
index f6397b289d..f93089219c 100644
--- a/apps/comments-ui/src/components/content/Comment.test.jsx
+++ b/apps/comments-ui/src/components/content/Comment.test.jsx
@@ -37,6 +37,6 @@ describe('<CommentComponent>', function () {
 
         contextualRender(<CommentComponent comment={comment} parent={parent} />, {appContext});
 
-        expect(screen.queryByText('First reply')).toBeInTheDocument();
+        expect(screen.getByText('First reply')).toBeInTheDocument();
     });
 });
diff --git a/apps/comments-ui/src/components/content/Comment.tsx b/apps/comments-ui/src/components/content/Comment.tsx
index 4c0f95bc83..7fa50878bf 100644
--- a/apps/comments-ui/src/components/content/Comment.tsx
+++ b/apps/comments-ui/src/components/content/Comment.tsx
@@ -279,27 +279,9 @@ const AuthorName: React.FC<{comment: Comment}> = ({comment}) => {
     );
 };
 
-type CommentHeaderProps = {
-    comment: Comment;
-    className?: string;
-}
-
-const CommentHeader: React.FC<CommentHeaderProps> = ({comment, className = ''}) => {
-    const {comments, t, dispatchAction} = useAppContext();
-    const labs = useLabs();
-    const createdAtRelative = useRelativeTime(comment.created_at);
-    const {member} = useAppContext();
-    const memberExpertise = member && comment.member && comment.member.uuid === member.uuid ? member.expertise : comment?.member?.expertise;
-    const isReplyToReply = labs.commentImprovements && comment.in_reply_to_id && comment.in_reply_to_snippet;
-
-    let inReplyToSnippet = comment.in_reply_to_snippet;
-
-    if (isReplyToReply) {
-        const inReplyToComment = findCommentById(comments, comment.in_reply_to_id);
-        if (inReplyToComment && inReplyToComment.status !== 'published') {
-            inReplyToSnippet = `[${t('removed')}]`;
-        }
-    }
+const RepliedToSnippet: React.FC<{comment: Comment}> = ({comment}) => {
+    const {comments, dispatchAction, t} = useAppContext();
+    const inReplyToComment = findCommentById(comments, comment.in_reply_to_id);
 
     const scrollRepliedToCommentIntoView = (e: React.MouseEvent<HTMLAnchorElement>) => {
         e.preventDefault();
@@ -315,6 +297,35 @@ const CommentHeader: React.FC<CommentHeaderProps> = ({comment, className = ''})
         }
     };
 
+    let inReplyToSnippet = comment.in_reply_to_snippet;
+    if (inReplyToComment && inReplyToComment.status !== 'published') {
+        inReplyToSnippet = `[${t('removed')}]`;
+    }
+
+    return (
+        <a
+            className="font-semibold text-neutral-900/60 transition-colors hover:text-neutral-900/70 dark:text-white/70 dark:hover:text-white/80"
+            data-testid="comment-in-reply-to"
+            href={`#${comment.in_reply_to_id}`}
+            onClick={scrollRepliedToCommentIntoView}
+        >
+            {inReplyToSnippet}
+        </a>
+    );
+};
+
+type CommentHeaderProps = {
+    comment: Comment;
+    className?: string;
+}
+
+const CommentHeader: React.FC<CommentHeaderProps> = ({comment, className = ''}) => {
+    const {member, t} = useAppContext();
+    const labs = useLabs();
+    const createdAtRelative = useRelativeTime(comment.created_at);
+    const memberExpertise = member && comment.member && comment.member.uuid === member.uuid ? member.expertise : comment?.member?.expertise;
+    const isReplyToReply = labs.commentImprovements && comment.in_reply_to_id && comment.in_reply_to_snippet;
+
     return (
         <>
             <div className={`mt-0.5 flex flex-wrap items-start sm:flex-row ${memberExpertise ? 'flex-col' : 'flex-row'} ${isReplyToReply ? 'mb-0.5' : 'mb-2'} ${className}`}>
@@ -329,7 +340,7 @@ const CommentHeader: React.FC<CommentHeaderProps> = ({comment, className = ''})
             </div>
             {(isReplyToReply &&
                 <div className="mb-2 line-clamp-1 font-sans text-base leading-snug text-neutral-900/50 sm:text-sm dark:text-white/60">
-                    <span>{t('Replied to')}</span>:&nbsp;<a className="font-semibold text-neutral-900/60 transition-colors hover:text-neutral-900/75 dark:text-white/70 dark:hover:text-white/85" data-testid="comment-in-reply-to" href={`#${comment.in_reply_to_id}`} onClick={scrollRepliedToCommentIntoView}>{inReplyToSnippet}</a>
+                    <span>{t('Replied to')}</span>:&nbsp;<RepliedToSnippet comment={comment} />
                 </div>
             )}
         </>