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, 2 insertions, 12 deletions

diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index 434b8ff..28c850b 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -9,7 +9,7 @@ import {
 import { useIntl } from 'react-intl';
 import type { BreadcrumbList } from 'schema-dts';
 import { sendComment } from '../../../services/graphql';
-import type { SendCommentInput, SingleComment } from '../../../types';
+import type { SendCommentInput } from '../../../types';
 import { useIsMounted } from '../../../utils/hooks';
 import { Heading, Sidebar } from '../../atoms';
 import {
@@ -29,16 +29,6 @@ import {
 } from '../../organisms';
 import styles from './page-layout.module.scss';
 
-/**
- * Check if there is at least one comment.
- *
- * @param {SingleComment[] | undefined} comments - The comments.
- */
-const hasComments = (
-  comments: SingleComment[] | undefined
-): comments is SingleComment[] =>
-  Array.isArray(comments) && comments.length > 0;
-
 export type PageLayoutProps = {
   /**
    * True if the page accepts new comments. Default: false.
@@ -262,7 +252,7 @@ export const PageLayout: FC<PageLayoutProps> = ({
             <Heading className={styles.comments__title} level={2}>
               {commentsTitle}
             </Heading>
-            {hasComments(comments) ? (
+            {comments?.length ? (
               <CommentsList
                 comments={comments}
                 depth={2}