[MM-56290] Convert ./components/channel_header_dropdown/menu_items/toggle_favorite_channel/toggle_favorite_channel.tsx from Class Component to Function Component (#25762)

* [MM-56290] Convert `./components/channel_header_dropdown/menu_items/toggle_favorite_channel/toggle_favorite_channel.tsx` from Class Component to Function Component

* fix: update snapshots and check-types issue

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

@@ -48,7 +48,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
     openUp={false}
   />
   <Memo(MenuGroup)>
-    <Connect(ToggleFavoriteChannel)
+    <Connect(Component)
       channel={
         Object {
           "create_at": 0,
@@ -880,7 +880,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
     openUp={false}
   />
   <Memo(MenuGroup)>
-    <Connect(ToggleFavoriteChannel)
+    <Connect(Component)
       channel={
         Object {
           "create_at": 0,

webapp/channels/src/components/channel_header_dropdown/menu_items/toggle_favorite_channel/toggle_favorite_channel.tsx

@@ -1,61 +1,59 @@
 // 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 type {MouseEvent} from 'react';
+import {useIntl} from 'react-intl';
 
 import type {Channel} from '@mattermost/types/channels';
 
 import Menu from 'components/widgets/menu/menu';
 
-import {localizeMessage} from 'utils/utils';
-
 type Action = {
     favoriteChannel: (channelId: string) => void;
     unfavoriteChannel: (channelId: string) => void;
 };
 
 type Props = {
-    show: boolean;
+    show?: boolean;
     channel: Channel;
     isFavorite: boolean;
     actions: Action;
 };
 
-export default class ToggleFavoriteChannel extends React.PureComponent<Props> {
+const ToggleFavoriteChannel = ({
-    static defaultProps = {
+    show = true,
-        show: true,
+    isFavorite,
-    };
+    actions: {
-
+        favoriteChannel,
-    toggleFavoriteChannel = (channelId: string) => {
+        unfavoriteChannel,
-        const {
+    },
-            isFavorite,
+    channel,
-            actions: {
+}: Props) => {
-                favoriteChannel,
+    const intl = useIntl();
-                unfavoriteChannel,
-            },
-        } = this.props;
 
+    const toggleFavoriteChannel = useCallback((channelId: string) => {
         return isFavorite ? unfavoriteChannel(channelId) : favoriteChannel(channelId);
-    };
+    }, [isFavorite, favoriteChannel, unfavoriteChannel]);
 
-    handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
+    const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>): void => {
         e.preventDefault();
-        this.toggleFavoriteChannel(this.props.channel.id);
+        toggleFavoriteChannel(channel.id);
-    };
+    }, [channel.id, toggleFavoriteChannel]);
 
-    render() {
+    let text;
-        let text;
+    if (isFavorite) {
-        if (this.props.isFavorite) {
+        text = intl.formatMessage({id: 'channelHeader.removeFromFavorites', defaultMessage: 'Remove from Favorites'});
-            text = localizeMessage('channelHeader.removeFromFavorites', 'Remove from Favorites');
+    } else {
-        } else {
+        text = intl.formatMessage({id: 'channelHeader.addToFavorites', defaultMessage: 'Add to Favorites'});
-            text = localizeMessage('channelHeader.addToFavorites', 'Add to Favorites');
-        }
-        return (
-            <Menu.ItemAction
-                show={this.props.show}
-                onClick={this.handleClick}
-                text={text}
-            />
-        );
     }
-}
+    return (
+        <Menu.ItemAction
+            show={show}
+            onClick={handleClick}
+            text={text}
+        />
+    );
+};
+
+export default memo(ToggleFavoriteChannel);