refactor(components): rewrite CommentsList component

* use ApprovedCommentProps to make CommentData type
* add the author name of the parent on reply form heading
* add tests

1 files changed, 0 insertions, 119 deletions

diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx
deleted file mode 100644
index 385aea9..0000000
--- a/src/components/organisms/layout/comments-list.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useState, type FC, useCallback } from 'react';
-import { useIntl } from 'react-intl';
-import type { SingleComment } from '../../../types';
-import { Heading, List, ListItem } from '../../atoms';
-import {
-  ApprovedComment,
-  type CommentReplyHandler,
-  PendingComment,
-  ReplyCommentForm,
-  type ReplyCommentFormProps,
-} from '../comment';
-import styles from './comments-list.module.scss';
-
-// eslint-disable-next-line @typescript-eslint/no-magic-numbers
-export type CommentsListDepth = 0 | 1 | 2 | 3 | 4;
-
-export type CommentsListProps = Pick<ReplyCommentFormProps, 'onSubmit'> & {
-  /**
-   * An array of comments.
-   */
-  comments: SingleComment[];
-  /**
-   * The maximum depth. Use `0` to not display nested comments.
-   */
-  depth: CommentsListDepth;
-};
-
-/**
- * CommentsList component
- *
- * Render a comments list.
- */
-export const CommentsList: FC<CommentsListProps> = ({
-  comments,
-  depth,
-  onSubmit,
-}) => {
-  const [replyingTo, setReplyingTo] = useState<number | null>(null);
-  const intl = useIntl();
-  const replyFormHeading = intl.formatMessage({
-    defaultMessage: 'Leave a reply',
-    description: 'CommentsList: comment form title',
-    id: 'w8uLLF',
-  });
-
-  const handleReplyFormVisibility: CommentReplyHandler = useCallback((id) => {
-    setReplyingTo((prevId) => {
-      if (prevId === id) return null;
-      return id;
-    });
-  }, []);
-
-  /**
-   * Get each comment wrapped in a list item.
-   *
-   * @param {SingleComment[]} commentsList - An array of comments.
-   * @returns {JSX.Element[]} The list items.
-   */
-  const getItems = (
-    commentsList: SingleComment[],
-    startLevel: number
-  ): JSX.Element[] => {
-    const isLastLevel = startLevel === depth;
-
-    return commentsList.map(
-      ({ approved, meta, replies, parentId, ...comment }) => {
-        const replyBtnLabel =
-          replyingTo === comment.id
-            ? intl.formatMessage({
-                defaultMessage: 'Cancel reply',
-                description: 'CommentsList: cancel reply button',
-                id: 'uZj4QI',
-              })
-            : intl.formatMessage({
-                defaultMessage: 'Reply',
-                description: 'CommentsList: reply button',
-                id: 'Qa9twM',
-              });
-
-        return (
-          <ListItem key={comment.id}>
-            {approved ? (
-              <>
-                <ApprovedComment
-                  {...comment}
-                  author={meta.author}
-                  onReply={handleReplyFormVisibility}
-                  publicationDate={meta.date}
-                  replyBtn={replyBtnLabel}
-                />
-                {replyingTo === comment.id ? (
-                  <ReplyCommentForm
-                    className={styles.reply}
-                    heading={<Heading level={2}>{replyFormHeading}</Heading>}
-                    onSubmit={onSubmit}
-                    commentId={comment.id}
-                  />
-                ) : null}
-              </>
-            ) : (
-              <PendingComment />
-            )}
-            {replies.length && !isLastLevel ? (
-              <List hideMarker isOrdered spacing="sm">
-                {getItems(replies, startLevel + 1)}
-              </List>
-            ) : null}
-          </ListItem>
-        );
-      }
-    );
-  };
-
-  return (
-    <List hideMarker isOrdered spacing="sm">
-      {getItems(comments, 0)}
-    </List>
-  );
-};