[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
2024-08-16 10:33:36 +01:00
--- 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,
    </span>
    <span
      className="fa fa-refresh fa-spin right signup-team__icon"
+      title="Loading Icon"
    />
  </a>
 </div>
@@ -39,9 +40,11 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
    </span>
    <i
      className="fa fa-lock light"
+      title="Private team"
    />
    <span
      className="fa fa-angle-right right signup-team__icon"
+      title="Join Team Icon"
    />
  </a>
 </div>
@@ -63,6 +66,7 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
    </span>
    <i
      className="fa fa-lock light"
+      title="Private team"
    />
  </a>
 </div>
@@ -85,6 +89,7 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
    </span>
    <span
      className="fa fa-angle-right right signup-team__icon"
+      title="Join Team Icon"
    />
  </a>
 </div>
@@ -134,6 +139,7 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
    </span>
    <span
      className="fa fa-angle-right right signup-team__icon"
+      title="Join Team Icon"
    />
  </a>
 </div>
--- 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<SelectTeamItem>(<SelectTeamItem {...baseProps}/>);
+        const wrapper = shallow(<SelectTeamItem {...baseProps}/>);
        expect(wrapper).toMatchSnapshot();
    });

    test('should match snapshot, on public not joinable', () => {
        const props = {...baseProps, canJoinPublicTeams: false};
-        const wrapper = shallow<SelectTeamItem>(
+        const wrapper = shallow(
            <SelectTeamItem {...props}/>,
        );
        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<SelectTeamItem>(
+        const wrapper = shallow(
            <SelectTeamItem {...props}/>,
        );
        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<SelectTeamItem>(
+        const wrapper = shallow(
            <SelectTeamItem {...props}/>,
        );
        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<SelectTeamItem>(
+        const wrapper = shallow(
            <SelectTeamItem {...props}/>,
        );
        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<SelectTeamItem>(
+        const wrapper = shallow(
            <SelectTeamItem {...props}/>,
        );
        expect(wrapper).toMatchSnapshot();
    });

-    test('should call props.onTeamClick on handleTeamClick', () => {
-        const wrapper = shallow<SelectTeamItem>(
+    test('should call onTeamClick on click when joinable', () => {
+        const wrapper = shallow(
            <SelectTeamItem {...baseProps}/>,
        );
-        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<SelectTeamItem>(
+        const wrapper = shallow(
            <SelectTeamItem {...props}/>,
        );
-        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();
    });
 });
--- 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<Props> {
-    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<Props> {
        );
    };

-    render() {
-        const {canJoinPublicTeams, canJoinPrivateTeams, loading, team} = this.props;
-        let icon;
-        if (loading) {
-            icon = (
-                <span
-                    className='fa fa-refresh fa-spin right signup-team__icon'
-                    title={this.props.intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
-                />
-            );
-        } else {
-            icon = (
-                <span
-                    className='fa fa-angle-right right signup-team__icon'
-                    title={this.props.intl.formatMessage({id: 'select_team.join.icon', defaultMessage: 'Join Team Icon'})}
-                />
-            );
-        }
-
-        const canJoin = (team.allow_open_invite && canJoinPublicTeams) || (!team.allow_open_invite && canJoinPrivateTeams);
-
-        return (
-            <div className='signup-team-dir'>
-                {this.renderDescriptionTooltip()}
-                <a
-                    href='#'
-                    id={Utils.createSafeId(team.display_name)}
-                    onClick={canJoin ? this.handleTeamClick : undefined}
-                    className={canJoin ? '' : 'disabled'}
-                >
-                    <span className='signup-team-dir__name'>{team.display_name}</span>
-                    {!team.allow_open_invite &&
-                        <i
-                            className='fa fa-lock light'
-                            title={this.props.intl.formatMessage({id: 'select_team.private.icon', defaultMessage: 'Private team'})}
-                        />}
-                    {canJoin && icon}
-                </a>
-            </div>
+    let icon;
+    if (loading) {
+        icon = (
+            <span
+                className='fa fa-refresh fa-spin right signup-team__icon'
+                title={intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
+            />
+        );
+    } else {
+        icon = (
+            <span
+                className='fa fa-angle-right right signup-team__icon'
+                title={intl.formatMessage({id: 'select_team.join.icon', defaultMessage: 'Join Team Icon'})}
+            />
        );
    }
-}

-export default injectIntl(SelectTeamItem);
+    const canJoin = (team.allow_open_invite && canJoinPublicTeams) || (!team.allow_open_invite && canJoinPrivateTeams);
+
+    return (
+        <div className='signup-team-dir'>
+            {renderDescriptionTooltip()}
+            <a
+                href='#'
+                id={Utils.createSafeId(team.display_name)}
+                onClick={canJoin ? handleTeamClick : undefined}
+                className={canJoin ? '' : 'disabled'}
+            >
+                <span className='signup-team-dir__name'>{team.display_name}</span>
+                {!team.allow_open_invite &&
+                    <i
+                        className='fa fa-lock light'
+                        title={intl.formatMessage({id: 'select_team.private.icon', defaultMessage: 'Private team'})}
+                    />}
+                {canJoin && icon}
+            </a>
+        </div>
+    );
+};
+
+export default React.memo(SelectTeamItem);