[MM-57723] Convert ./components/admin_console/system_user_detail/team_list/team_list_dropdown.tsx from Class Component to Function Component (#26720)

* [MM-57723] Convert `./components/admin_console/system_user_detail/team_list/team_list_dropdown.tsx` from Class Component to Function Component

* 🎨 Improve code quality

webapp/channels/src/components/admin_console/system_user_detail/team_list/team_list_dropdown.tsx

@@ -1,14 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo, useCallback} from 'react';
+import {useIntl} from 'react-intl';
 
 import EllipsisHorizontalIcon from 'components/widgets/icons/ellipsis_h_icon';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 
-import {localizeMessage} from 'utils/utils';
-
 import type {TeamWithMembership} from './types';
 
 type Props = {
@@ -19,31 +18,27 @@ type Props = {
     isDisabled?: boolean;
 }
 
-type State = {
+const TeamListDropdown = ({
-    serverError: string | null;
+    team,
-}
+    doRemoveUserFromTeam,
+    doMakeUserTeamAdmin,
+    doMakeUserTeamMember,
+    isDisabled,
+}: Props) => {
+    const intl = useIntl();
 
-export default class TeamListDropdown extends React.PureComponent<Props, State> {
-    public constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            serverError: null,
-        };
-    }
-
-    public render(): JSX.Element {
-        const {team} = this.props;
     const isAdmin = team.scheme_admin;
     const isMember = team.scheme_user && !team.scheme_admin;
     const isGuest = team.scheme_guest;
     const showMakeTeamAdmin = !isAdmin && !isGuest;
     const showMakeTeamMember = !isMember && !isGuest;
 
+    const makeTeamAdminOnClick = useCallback(() => doMakeUserTeamAdmin(team.id), [team.id, doMakeUserTeamAdmin]);
+    const makeTeamMemberOnClick = useCallback(() => doMakeUserTeamMember(team.id), [team.id, doMakeUserTeamMember]);
+    const removeUserTeamOnClick = useCallback(() => doRemoveUserFromTeam(team.id), [team.id, doRemoveUserFromTeam]);
+
     return (
-            <MenuWrapper
+        <MenuWrapper isDisabled={isDisabled}>
-                isDisabled={this.props.isDisabled}
-            >
             <button
                 type='button'
                 id={`teamListDropdown_${team.id}`}
@@ -56,29 +51,30 @@ export default class TeamListDropdown extends React.PureComponent<Props, State>
                 <Menu
                     openLeft={true}
                     openUp={false}
-                        ariaLabel={localizeMessage('team_members_dropdown.menuAriaLabel', 'Change the role of a team member')}
+                    ariaLabel={intl.formatMessage({id: 'team_members_dropdown.menuAriaLabel', defaultMessage: 'Change the role of a team member'})}
                 >
                     <Menu.ItemAction
                         id='makeTeamAdmin'
                         show={showMakeTeamAdmin}
-                            onClick={() => this.props.doMakeUserTeamAdmin(team.id)}
+                        onClick={makeTeamAdminOnClick}
-                            text={localizeMessage('team_members_dropdown.makeAdmin', 'Make Team Admin')}
+                        text={intl.formatMessage({id: 'team_members_dropdown.makeAdmin', defaultMessage: 'Make Team Admin'})}
                     />
                     <Menu.ItemAction
                         show={showMakeTeamMember}
-                            onClick={() => this.props.doMakeUserTeamMember(team.id)}
+                        onClick={makeTeamMemberOnClick}
-                            text={localizeMessage('team_members_dropdown.makeMember', 'Make Team Member')}
+                        text={intl.formatMessage({id: 'team_members_dropdown.makeMember', defaultMessage: 'Make Team Member'})}
                     />
                     <Menu.ItemAction
                         id='removeFromTeam'
                         show={true}
-                            onClick={() => this.props.doRemoveUserFromTeam(team.id)}
+                        onClick={removeUserTeamOnClick}
-                            text={localizeMessage('team_members_dropdown.leave_team', 'Remove from Team')}
+                        text={intl.formatMessage({id: 'team_members_dropdown.leave_team', defaultMessage: 'Remove from Team'})}
                         buttonClass='SystemUserDetail__action-remove-team'
                     />
                 </Menu>
             </div>
         </MenuWrapper>
     );
-    }
+};
-}
+
+export default memo(TeamListDropdown);