From 9156770b25842079096ea5a2810f41dcbc60389f Mon Sep 17 00:00:00 2001 From: Sudhanva-Nadiger <93595710+Sudhanva-Nadiger@users.noreply.github.com> Date: Tue, 14 Nov 2023 02:03:40 +0530 Subject: [PATCH] [MM-55326] Convert ./components/post_view/commented_on_files_message/commented_on_files_message.tsx from Class Component to Function Component (#25407) * covert to func component * update snap * minor fix --- .../__snapshots__/commented_on.test.tsx.snap | 2 +- .../commented_on/commented_on.test.tsx | 19 ++---- .../commented_on_files_message.test.tsx | 29 ++++----- .../commented_on_files_message.tsx | 59 +++++++++---------- .../commented_on_files_message/index.ts | 10 +++- 5 files changed, 53 insertions(+), 66 deletions(-) diff --git a/webapp/channels/src/components/post_view/commented_on/__snapshots__/commented_on.test.tsx.snap b/webapp/channels/src/components/post_view/commented_on/__snapshots__/commented_on.test.tsx.snap index 4aafd43180..1c1cc92713 100644 --- a/webapp/channels/src/components/post_view/commented_on/__snapshots__/commented_on.test.tsx.snap +++ b/webapp/channels/src/components/post_view/commented_on/__snapshots__/commented_on.test.tsx.snap @@ -93,7 +93,7 @@ exports[`components/post_view/CommentedOn should match snapshot 3`] = ` className="theme" onClick={[MockFunction]} > - diff --git a/webapp/channels/src/components/post_view/commented_on/commented_on.test.tsx b/webapp/channels/src/components/post_view/commented_on/commented_on.test.tsx index dda6f51382..ff816fb9dd 100644 --- a/webapp/channels/src/components/post_view/commented_on/commented_on.test.tsx +++ b/webapp/channels/src/components/post_view/commented_on/commented_on.test.tsx @@ -4,44 +4,33 @@ import {shallow} from 'enzyme'; import React from 'react'; -import type {Post} from '@mattermost/types/posts'; - import CommentedOn from 'components/post_view/commented_on/commented_on'; import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message'; +import {TestHelper} from 'utils/test_helper'; + describe('components/post_view/CommentedOn', () => { const baseProps = { displayName: 'user_displayName', enablePostUsernameOverride: false, onCommentClick: jest.fn(), - post: { + post: TestHelper.getPostMock({ id: 'post_id', message: 'text message', props: { from_webhook: 'true', override_username: 'override_username', }, - create_at: 0, update_at: 10, edit_at: 20, delete_at: 30, - is_pinned: false, - user_id: 'user_id', channel_id: 'channel_id', root_id: 'root_id', original_id: 'original_id', - type: 'system_add_remove', hashtags: 'hashtags', pending_post_id: 'pending_post_id', reply_count: 1, - metadata: { - embeds: [], - emojis: [], - files: [], - images: {}, - reactions: [], - }, - } as Post, + }), }; test('should match snapshot', () => { diff --git a/webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.test.tsx b/webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.test.tsx index 7789ea7509..54b914a4a1 100644 --- a/webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.test.tsx +++ b/webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.test.tsx @@ -4,17 +4,14 @@ import React from 'react'; import {render, renderWithContext, screen} from 'tests/react_testing_utils'; +import {TestHelper} from 'utils/test_helper'; import CommentedOnFilesMessage from './commented_on_files_message'; describe('components/CommentedOnFilesMessage', () => { - const baseProps = { - parentPostId: 'parentPostId', - }; - test('component state when no files', () => { render( - , + , ); //no file is given in props @@ -22,31 +19,25 @@ describe('components/CommentedOnFilesMessage', () => { }); test('should match component state for single file', () => { - const props = { - ...baseProps, - fileInfos: [{id: 'file_id_1', name: 'image_1.png', extension: 'png', create_at: 1}], - }; + const fileInfos = [ + TestHelper.getFileInfoMock({id: 'file_id_1', name: 'image_1.png', extension: 'png', create_at: 1}), + ]; render( - , + , ); expect(screen.getByTestId('fileInfo')).toHaveTextContent('image_1.png'); }); test('should match component state for multiple files', () => { const fileInfos = [ - {id: 'file_id_3', name: 'image_3.png', extension: 'png', create_at: 3}, - {id: 'file_id_2', name: 'image_2.png', extension: 'png', create_at: 2}, - {id: 'file_id_1', name: 'image_1.png', extension: 'png', create_at: 1}, + TestHelper.getFileInfoMock({id: 'file_id_3', name: 'image_3.png', extension: 'png', create_at: 3}), + TestHelper.getFileInfoMock({id: 'file_id_2', name: 'image_2.png', extension: 'png', create_at: 2}), + TestHelper.getFileInfoMock({id: 'file_id_1', name: 'image_1.png', extension: 'png', create_at: 1}), ]; - const props = { - ...baseProps, - fileInfos, - }; - renderWithContext( - , + , ); // total files = 3 diff --git a/webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.tsx b/webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.tsx index 60b3e001e5..0cc1a39aaa 100644 --- a/webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.tsx +++ b/webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.tsx @@ -4,43 +4,42 @@ import React from 'react'; import {FormattedMessage} from 'react-intl'; -interface Props { +import type {FileInfo} from '@mattermost/types/files'; - /* - * The id of the post that was commented on - */ - parentPostId: string; +interface Props { /* * An array of file metadata for the parent post */ - fileInfos?: Array<{name: string}>; + fileInfos?: FileInfo[]; } -export default class CommentedOnFilesMessage extends React.PureComponent { - render() { - if (!this.props.fileInfos || this.props.fileInfos.length === 0) { - return null; - } +const CommentedOnFilesMessage = ({ + fileInfos, +}: Props) => { + if (!fileInfos?.length) { + return null; + } - let plusMore = null; - if (this.props.fileInfos.length > 1) { - plusMore = ( - - ); - } - - return ( - - {this.props.fileInfos[0].name} - {plusMore} - + let plusMore = null; + if (fileInfos.length > 1) { + plusMore = ( + ); } -} + + return ( + + {fileInfos[0].name} + {plusMore} + + ); +}; + +export default React.memo(CommentedOnFilesMessage); diff --git a/webapp/channels/src/components/post_view/commented_on_files_message/index.ts b/webapp/channels/src/components/post_view/commented_on_files_message/index.ts index 3fb40679ff..da98f5e124 100644 --- a/webapp/channels/src/components/post_view/commented_on_files_message/index.ts +++ b/webapp/channels/src/components/post_view/commented_on_files_message/index.ts @@ -9,10 +9,18 @@ import {makeGetFilesForPost} from 'mattermost-redux/selectors/entities/files'; import CommentedOnFilesMessage from './commented_on_files_message'; +type OwnProps = { + + /* + * The id of the post that was commented on + */ + parentPostId: string; +} + function makeMapStateToProps() { const selectFileInfosForPost = makeGetFilesForPost(); - return function mapStateToProps(state: GlobalState, ownProps: {parentPostId: string}) { + return function mapStateToProps(state: GlobalState, ownProps: OwnProps) { let fileInfos; if (ownProps.parentPostId) { fileInfos = selectFileInfosForPost(state, ownProps.parentPostId);