[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

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>

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', () => {
+    test('should call onTeamClick on click when joinable', () => {
-        const wrapper = shallow<SelectTeamItem>(
+        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);
+        wrapper.find('a').simulate('click', {preventDefault: jest.fn()});
-        expect(baseProps.onTeamClick).toHaveBeenCalledTimes(1);
+        expect(baseProps.onTeamClick).not.toHaveBeenCalled();
-        expect(baseProps.onTeamClick).toHaveBeenCalledWith(baseProps.team);
     });
 });

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 React, {useCallback} from 'react';
-import type {ReactNode, MouseEvent} from 'react';
+import {useIntl} from 'react-intl';
-import {injectIntl, type WrappedComponentProps} 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> {
+const SelectTeamItem = ({
-    handleTeamClick = (e: MouseEvent): void => {
+    team,
-        e.preventDefault();
+    onTeamClick,
-        this.props.onTeamClick(this.props.team);
+    loading,
-    };
+    canJoinPublicTeams,
+    canJoinPrivateTeams,
+}: Props) => {
+    const intl = useIntl();
 
-    renderDescriptionTooltip = (): ReactNode => {
+    const handleTeamClick = useCallback((e: React.MouseEvent) => {
-        const team = this.props.team;
+        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() {
+    let icon;
-        const {canJoinPublicTeams, canJoinPrivateTeams, loading, team} = this.props;
+    if (loading) {
-        let icon;
+        icon = (
-        if (loading) {
+            <span
-            icon = (
+                className='fa fa-refresh fa-spin right signup-team__icon'
-                <span
+                title={intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
-                    className='fa fa-refresh fa-spin right signup-team__icon'
+            />
-                    title={this.props.intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
+        );
-                />
+    } else {
-            );
+        icon = (
-        } else {
+            <span
-            icon = (
+                className='fa fa-angle-right right signup-team__icon'
-                <span
+                title={intl.formatMessage({id: 'select_team.join.icon', defaultMessage: 'Join Team Icon'})}
-                    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>
         );
     }
-}
 
-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);