[MM-57724] Convert ./components/channel_header_dropdown/mobile_channel_header_dropdown.tsx from Class Component to Function Component (#26719)

* [MM-57724] Convert `./components/channel_header_dropdown/mobile_channel_header_dropdown.tsx` from Class Component to Function Component

* 🎨 Improve code quality

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/channel_header_dropdown/mobile_channel_header_dropdown.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, {memo} from 'react';
-import {FormattedMessage, injectIntl} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
-import type {IntlShape} from 'react-intl';
 
 import type {Channel} from '@mattermost/types/channels';
 import type {UserProfile} from '@mattermost/types/users';
@@ -24,13 +23,19 @@ type Props = {
     teammateIsBot?: boolean;
     teammateStatus?: string;
     displayName: string;
-    intl: IntlShape;
 }
 
-class MobileChannelHeaderDropdown extends React.PureComponent<Props> {
+const MobileChannelHeaderDropdown = ({
-    getChannelTitle = () => {
+    user,
-        const {user, channel, teammateId, displayName} = this.props;
+    channel,
+    teammateId,
+    displayName,
+    teammateIsBot,
+    teammateStatus,
+}: Props) => {
+    const intl = useIntl();
 
+    const getChannelTitle = () => {
         if (channel.type === Constants.DM_CHANNEL) {
             if (user.id === teammateId) {
                 return (
@@ -46,39 +51,36 @@ class MobileChannelHeaderDropdown extends React.PureComponent<Props> {
         return channel.display_name;
     };
 
-    render() {
+    let dmHeaderIconStatus;
-        const {teammateIsBot, teammateStatus} = this.props;
-        let dmHeaderIconStatus;
 
-        if (!teammateIsBot) {
+    if (!teammateIsBot) {
-            dmHeaderIconStatus = (
+        dmHeaderIconStatus = (
-                <StatusIcon status={teammateStatus}/>
+            <StatusIcon status={teammateStatus}/>
-            );
-        }
-
-        return (
-            <MenuWrapper animationComponent={MobileChannelHeaderDropdownAnimation}>
-                <a>
-                    <span className='heading'>
-                        {dmHeaderIconStatus}
-                        {this.getChannelTitle()}
-                    </span>
-                    <span
-                        className='fa fa-angle-down header-dropdown__icon'
-                        title={this.props.intl.formatMessage({id: 'generic_icons.dropdown', defaultMessage: 'Dropdown Icon'})}
-                    />
-                </a>
-
-                <Menu ariaLabel={this.props.intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'})}>
-                    <ChannelHeaderDropdownItems isMobile={true}/>
-                    <div className='Menu__close visible-xs-block'>
-                        {'×'}
-                    </div>
-                </Menu>
-            </MenuWrapper>
         );
     }
-}
 
-export default injectIntl(MobileChannelHeaderDropdown);
+    return (
+        <MenuWrapper animationComponent={MobileChannelHeaderDropdownAnimation}>
+            <a>
+                <span className='heading'>
+                    {dmHeaderIconStatus}
+                    {getChannelTitle()}
+                </span>
+                <span
+                    className='fa fa-angle-down header-dropdown__icon'
+                    title={intl.formatMessage({id: 'generic_icons.dropdown', defaultMessage: 'Dropdown Icon'})}
+                />
+            </a>
+
+            <Menu ariaLabel={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'})}>
+                <ChannelHeaderDropdownItems isMobile={true}/>
+                <div className='Menu__close visible-xs-block'>
+                    {'×'}
+                </div>
+            </Menu>
+        </MenuWrapper>
+    );
+};
+
+export default memo(MobileChannelHeaderDropdown);
 

webapp/channels/src/components/channel_header_mobile/__snapshots__/channel_header_mobile.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
       <div
         className="navbar-brand"
       >
-        <Connect(injectIntl(MobileChannelHeaderDropdown)) />
+        <Connect(Component) />
       </div>
       <div
         className="spacer"
@@ -87,7 +87,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
       <div
         className="navbar-brand"
       >
-        <Connect(injectIntl(MobileChannelHeaderDropdown)) />
+        <Connect(Component) />
       </div>
       <div
         className="spacer"
@@ -158,7 +158,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
       <div
         className="navbar-brand"
       >
-        <Connect(injectIntl(MobileChannelHeaderDropdown)) />
+        <Connect(Component) />
       </div>
       <div
         className="spacer"
@@ -229,7 +229,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
       <div
         className="navbar-brand"
       >
-        <Connect(injectIntl(MobileChannelHeaderDropdown)) />
+        <Connect(Component) />
       </div>
       <div
         className="spacer"