From f699802b837d7d9fcf150ff2bf00cd3c5475c87a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 9 Nov 2023 17:18:46 +0100 Subject: refactor(components): rewrite CommentsList component * use ApprovedCommentProps to make CommentData type * add the author name of the parent on reply form heading * add tests --- .../organisms/layout/comments-list.fixture.ts | 108 ------------------- .../organisms/layout/comments-list.module.scss | 3 - .../organisms/layout/comments-list.stories.tsx | 78 -------------- .../organisms/layout/comments-list.test.tsx | 12 --- src/components/organisms/layout/comments-list.tsx | 119 --------------------- src/components/organisms/layout/index.ts | 1 - 6 files changed, 321 deletions(-) delete mode 100644 src/components/organisms/layout/comments-list.fixture.ts delete mode 100644 src/components/organisms/layout/comments-list.module.scss delete mode 100644 src/components/organisms/layout/comments-list.stories.tsx delete mode 100644 src/components/organisms/layout/comments-list.test.tsx delete mode 100644 src/components/organisms/layout/comments-list.tsx (limited to 'src/components/organisms/layout') 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; - -const Template: ComponentStory = (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( - - ); - }); -}); 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 & { - /** - * 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 = ({ - comments, - depth, - onSubmit, -}) => { - const [replyingTo, setReplyingTo] = useState(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 ( - - {approved ? ( - <> - - {replyingTo === comment.id ? ( - {replyFormHeading}} - onSubmit={onSubmit} - commentId={comment.id} - /> - ) : null} - - ) : ( - - )} - {replies.length && !isLastLevel ? ( - - {getItems(replies, startLevel + 1)} - - ) : null} - - ); - } - ); - }; - - return ( - - {getItems(comments, 0)} - - ); -}; 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'; -- cgit v1.2.3