[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,8 +51,6 @@ class MobileChannelHeaderDropdown extends React.PureComponent<Props> {
         return channel.display_name;
     };
 
-    render() {
-        const {teammateIsBot, teammateStatus} = this.props;
     let dmHeaderIconStatus;
 
     if (!teammateIsBot) {
@@ -61,15 +64,15 @@ class MobileChannelHeaderDropdown extends React.PureComponent<Props> {
             <a>
                 <span className='heading'>
                     {dmHeaderIconStatus}
-                        {this.getChannelTitle()}
+                    {getChannelTitle()}
                 </span>
                 <span
                     className='fa fa-angle-down header-dropdown__icon'
-                        title={this.props.intl.formatMessage({id: 'generic_icons.dropdown', defaultMessage: 'Dropdown Icon'})}
+                    title={intl.formatMessage({id: 'generic_icons.dropdown', defaultMessage: 'Dropdown Icon'})}
                 />
             </a>
 
-                <Menu ariaLabel={this.props.intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'})}>
+            <Menu ariaLabel={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'})}>
                 <ChannelHeaderDropdownItems isMobile={true}/>
                 <div className='Menu__close visible-xs-block'>
                     {'×'}
@@ -77,8 +80,7 @@ class MobileChannelHeaderDropdown extends React.PureComponent<Props> {
             </Menu>
         </MenuWrapper>
     );
-    }
+};
-}
 
-export default injectIntl(MobileChannelHeaderDropdown);
+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"