refactor(components): rewrite CommentsList component

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

6 files changed, 0 insertions, 321 deletions

diff --git a/src/components/organisms/layout/comments-list.fixture.ts b/src/components/organisms/layout/comments-list.fixture.ts
deleted file mode 100644
index c6a1891..0000000
--- a/src/components/organisms/layout/comments-list.fixture.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import type { SingleComment } from '../../../types/app';
-
-export const comments: SingleComment[] = [
-  {
-    approved: true,
-    content:
-      'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
-    id: 1,
-    meta: {
-      author: {
-        avatar: {
-          alt: 'Author 1 avatar',
-          height: 480,
-          src: 'http://picsum.photos/640/480',
-          width: 640,
-        },
-        name: 'Author 1',
-      },
-      date: '2021-04-03 18:04:11',
-    },
-    parentId: 0,
-    replies: [],
-  },
-  {
-    approved: true,
-    content:
-      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam rerum.',
-    id: 2,
-    meta: {
-      author: {
-        avatar: {
-          alt: 'Author 2 avatar',
-          height: 480,
-          src: 'http://picsum.photos/640/480',
-          width: 640,
-        },
-        name: 'Author 2',
-        website: '#',
-      },
-      date: '2021-04-03 23:30:20',
-    },
-    parentId: 0,
-    replies: [
-      {
-        approved: true,
-        content:
-          'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
-        id: 4,
-        meta: {
-          author: {
-            avatar: {
-              alt: 'Author 4 avatar',
-              height: 480,
-              src: 'http://picsum.photos/640/480',
-              width: 640,
-            },
-            name: 'Author 4',
-          },
-          date: '2021-04-03 23:04:24',
-        },
-        parentId: 2,
-        replies: [],
-      },
-      {
-        approved: true,
-        content:
-          'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
-        id: 5,
-        meta: {
-          author: {
-            avatar: {
-              alt: 'Author 1 avatar',
-              height: 480,
-              src: 'http://picsum.photos/640/480',
-              width: 640,
-            },
-            name: 'Author 1',
-          },
-          date: '2021-04-04 08:05:14',
-        },
-        parentId: 2,
-        replies: [],
-      },
-    ],
-  },
-  {
-    approved: false,
-    content:
-      'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
-    id: 3,
-    meta: {
-      author: {
-        avatar: {
-          alt: 'Author 3',
-          height: 480,
-          src: 'http://picsum.photos/640/480',
-          width: 640,
-        },
-        name: 'Author 3',
-      },
-      date: '2021-09-13 13:24:54',
-    },
-    parentId: 0,
-    replies: [],
-  },
-];
-
-export const saveComment = () => undefined;
diff --git a/src/components/organisms/layout/comments-list.module.scss b/src/components/organisms/layout/comments-list.module.scss
deleted file mode 100644
index e690250..0000000
--- a/src/components/organisms/layout/comments-list.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.reply {
-  margin-top: var(--spacing-sm);
-}
diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx
deleted file mode 100644
index c1a262e..0000000
--- a/src/components/organisms/layout/comments-list.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CommentsList } from './comments-list';
-import { comments } from './comments-list.fixture';
-
-const saveComment = async () => {
-  /** Do nothing. */
-};
-
-/**
- * CommentsList - Storybook Meta
- */
-export default {
-  title: 'Organisms/Layout/CommentsList',
-  component: CommentsList,
-  args: {
-    saveComment,
-  },
-  argTypes: {
-    comments: {
-      control: {
-        type: null,
-      },
-      description: 'An array of comments.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-    depth: {
-      control: {
-        type: 'number',
-        min: 0,
-        max: 4,
-      },
-      description: 'The maximum depth. Use `0` to not display nested comments.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
-    onSubmit: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to save the comment form data.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof CommentsList>;
-
-const Template: ComponentStory<typeof CommentsList> = (args) => (
-  <CommentsList {...args} />
-);
-
-/**
- * Layout Stories - Without child comments
- */
-export const WithoutChildComments = Template.bind({});
-WithoutChildComments.args = {
-  comments,
-  depth: 0,
-};
-
-/**
- * Layout Stories - With child comments
- */
-export const WithChildComments = Template.bind({});
-WithChildComments.args = {
-  comments,
-  depth: 1,
-};
diff --git a/src/components/organisms/layout/comments-list.test.tsx b/src/components/organisms/layout/comments-list.test.tsx
deleted file mode 100644
index 2a05204..0000000
--- a/src/components/organisms/layout/comments-list.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { describe, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { CommentsList } from './comments-list';
-import { comments, saveComment } from './comments-list.fixture';
-
-describe('CommentsList', () => {
-  it('renders a comments list', () => {
-    render(
-      <CommentsList comments={comments} depth={1} onSubmit={saveComment} />
-    );
-  });
-});
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>
-  );
-};
diff --git a/src/components/organisms/layout/index.ts b/src/components/organisms/layout/index.ts
index 55a9357..ebe48e7 100644
--- a/src/components/organisms/layout/index.ts
+++ b/src/components/organisms/layout/index.ts
@@ -1,4 +1,3 @@
-export * from './comments-list';
 export * from './no-results';
 export * from './overview';
 export * from './posts-list';