From e666f7ccfc3575dbe9507c7c68533f717355e0c8 Mon Sep 17 00:00:00 2001 From: Michael <74271024+KvngMikey@users.noreply.github.com> Date: Fri, 16 Aug 2024 10:33:36 +0100 Subject: [PATCH] [MM-60078] Convert ./components/select_team/components/select_team_item.tsx from Class Component to Function Component (#27906) * feat: convert select_item_item to functional component * fix: lint issue worked on --- .../select_team_item.test.tsx.snap | 6 + .../components/select_team_item.test.tsx | 33 +++--- .../components/select_team_item.tsx | 107 +++++++++--------- 3 files changed, 76 insertions(+), 70 deletions(-) diff --git a/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap b/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap index 33375116af..5b24f87308 100644 --- a/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap +++ b/webapp/channels/src/components/select_team/components/__snapshots__/select_team_item.test.tsx.snap @@ -17,6 +17,7 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot, @@ -39,9 +40,11 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot, @@ -63,6 +66,7 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot, @@ -85,6 +89,7 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot, @@ -134,6 +139,7 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot, diff --git a/webapp/channels/src/components/select_team/components/select_team_item.test.tsx b/webapp/channels/src/components/select_team/components/select_team_item.test.tsx index 87eb5adba4..ed927e549b 100644 --- a/webapp/channels/src/components/select_team/components/select_team_item.test.tsx +++ b/webapp/channels/src/components/select_team/components/select_team_item.test.tsx @@ -6,9 +6,7 @@ import React from 'react'; import type {Team} from '@mattermost/types/teams'; -import type {MockIntl} from 'tests/helpers/intl-test-helper'; - -import {SelectTeamItem} from './select_team_item'; +import SelectTeamItem from './select_team_item'; describe('components/select_team/components/SelectTeamItem', () => { const baseProps = { @@ -19,17 +17,17 @@ describe('components/select_team/components/SelectTeamItem', () => { canJoinPrivateTeams: false, intl: { formatMessage: jest.fn(), - } as MockIntl, + }, }; test('should match snapshot, on public joinable', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); test('should match snapshot, on public not joinable', () => { const props = {...baseProps, canJoinPublicTeams: false}; - const wrapper = shallow( + const wrapper = shallow( , ); expect(wrapper).toMatchSnapshot(); @@ -37,7 +35,7 @@ describe('components/select_team/components/SelectTeamItem', () => { test('should match snapshot, on private joinable', () => { const props = {...baseProps, team: {...baseProps.team, allow_open_invite: false}, canJoinPrivateTeams: true}; - const wrapper = shallow( + const wrapper = shallow( , ); expect(wrapper).toMatchSnapshot(); @@ -45,7 +43,7 @@ describe('components/select_team/components/SelectTeamItem', () => { test('should match snapshot, on private not joinable', () => { const props = {...baseProps, team: {...baseProps.team, allow_open_invite: false}}; - const wrapper = shallow( + const wrapper = shallow( , ); expect(wrapper).toMatchSnapshot(); @@ -53,7 +51,7 @@ describe('components/select_team/components/SelectTeamItem', () => { test('should match snapshot, on loading', () => { const props = {...baseProps, loading: true}; - const wrapper = shallow( + const wrapper = shallow( , ); expect(wrapper).toMatchSnapshot(); @@ -61,28 +59,27 @@ describe('components/select_team/components/SelectTeamItem', () => { test('should match snapshot, with description', () => { const props = {...baseProps, team: {...baseProps.team, description: 'description'}}; - const wrapper = shallow( + const wrapper = shallow( , ); expect(wrapper).toMatchSnapshot(); }); - test('should call props.onTeamClick on handleTeamClick', () => { - const wrapper = shallow( + test('should call onTeamClick on click when joinable', () => { + const wrapper = shallow( , ); - wrapper.instance().handleTeamClick({preventDefault: jest.fn()} as any); + wrapper.find('a').simulate('click', {preventDefault: jest.fn()}); expect(baseProps.onTeamClick).toHaveBeenCalledTimes(1); expect(baseProps.onTeamClick).toHaveBeenCalledWith(baseProps.team); }); - test('should not call props.onTeamClick on handleTeamClick when you cant join the team', () => { + test('should not call onTeamClick on click when you cant join the team', () => { const props = {...baseProps, canJoinPublicTeams: false}; - const wrapper = shallow( + const wrapper = shallow( , ); - wrapper.instance().handleTeamClick({preventDefault: jest.fn()} as any); - expect(baseProps.onTeamClick).toHaveBeenCalledTimes(1); - expect(baseProps.onTeamClick).toHaveBeenCalledWith(baseProps.team); + wrapper.find('a').simulate('click', {preventDefault: jest.fn()}); + expect(baseProps.onTeamClick).not.toHaveBeenCalled(); }); }); diff --git a/webapp/channels/src/components/select_team/components/select_team_item.tsx b/webapp/channels/src/components/select_team/components/select_team_item.tsx index eddb828699..f4f795612f 100644 --- a/webapp/channels/src/components/select_team/components/select_team_item.tsx +++ b/webapp/channels/src/components/select_team/components/select_team_item.tsx @@ -1,9 +1,8 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react'; -import type {ReactNode, MouseEvent} from 'react'; -import {injectIntl, type WrappedComponentProps} from 'react-intl'; +import React, {useCallback} from 'react'; +import {useIntl} from 'react-intl'; import type {Team} from '@mattermost/types/teams'; @@ -12,7 +11,7 @@ import WithTooltip from 'components/with_tooltip'; import * as Utils from 'utils/utils'; -interface Props extends WrappedComponentProps { +interface Props { team: Team; onTeamClick: (team: Team) => void; loading: boolean; @@ -20,14 +19,21 @@ interface Props extends WrappedComponentProps { canJoinPrivateTeams: boolean; } -export class SelectTeamItem extends React.PureComponent { - handleTeamClick = (e: MouseEvent): void => { - e.preventDefault(); - this.props.onTeamClick(this.props.team); - }; +const SelectTeamItem = ({ + team, + onTeamClick, + loading, + canJoinPublicTeams, + canJoinPrivateTeams, +}: Props) => { + const intl = useIntl(); - renderDescriptionTooltip = (): ReactNode => { - const team = this.props.team; + const handleTeamClick = useCallback((e: React.MouseEvent) => { + e.preventDefault(); + onTeamClick(team); + }, [onTeamClick, team]); + + const renderDescriptionTooltip = (): React.ReactNode => { if (!team.description) { return null; } @@ -43,47 +49,44 @@ export class SelectTeamItem extends React.PureComponent { ); }; - render() { - const {canJoinPublicTeams, canJoinPrivateTeams, loading, team} = this.props; - let icon; - if (loading) { - icon = ( - - ); - } else { - icon = ( - - ); - } - - const canJoin = (team.allow_open_invite && canJoinPublicTeams) || (!team.allow_open_invite && canJoinPrivateTeams); - - return ( - + let icon; + if (loading) { + icon = ( + + ); + } else { + icon = ( + ); } -} -export default injectIntl(SelectTeamItem); + const canJoin = (team.allow_open_invite && canJoinPublicTeams) || (!team.allow_open_invite && canJoinPrivateTeams); + + return ( + + ); +}; + +export default React.memo(SelectTeamItem);