[MM-56296] Convert ./components/sidebar/sidebar_channel/sidebar_group_channel/sidebar_group_channel.tsx from Class Component to Function Component (#25768)

* [MM-56296] Convert `./components/sidebar/sidebar_channel/sidebar_group_channel/sidebar_group_channel.tsx` from Class Component to Function Component

* refactor: remove unnecessary callback

webapp/channels/src/components/sidebar/sidebar_channel/__snapshots__/sidebar_channel.test.tsx.snap

@@ -71,7 +71,7 @@ exports[`components/sidebar/sidebar_channel should match snapshot when GM channe
   onAnimationStart={[Function]}
   role="listitem"
 >
-  <Connect(SidebarGroupChannel)
+  <Connect(Component)
     channel={
       Object {
         "create_at": 0,

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_group_channel/sidebar_group_channel.tsx

@@ -1,7 +1,7 @@
 // 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 {Channel} from '@mattermost/types/channels';
 import type {PreferenceType} from '@mattermost/types/preferences';
@@ -25,40 +25,43 @@ type Props = {
     };
 };
 
-type State = Record<string, never>;
+const SidebarGroupChannel = ({
-
+    channel,
-export default class SidebarGroupChannel extends React.PureComponent<Props, State> {
+    currentUserId,
-    handleLeaveChannel = (callback: () => void) => {
+    actions,
-        const id = this.props.channel.id;
+    active,
+    currentTeamName,
+    redirectChannel,
+    membersCount,
+}: Props) => {
+    const handleLeaveChannel = useCallback((callback: () => void) => {
+        const id = channel.id;
         const category = Constants.Preferences.CATEGORY_GROUP_CHANNEL_SHOW;
 
-        const currentUserId = this.props.currentUserId;
+        actions.savePreferences(currentUserId, [{user_id: currentUserId, category, name: id, value: 'false'}]).then(callback);
-        this.props.actions.savePreferences(currentUserId, [{user_id: currentUserId, category, name: id, value: 'false'}]).then(callback);
 
         trackEvent('ui', 'ui_direct_channel_x_button_clicked');
 
-        if (this.props.active) {
+        if (active) {
-            getHistory().push(`/${this.props.currentTeamName}/channels/${this.props.redirectChannel}`);
+            getHistory().push(`/${currentTeamName}/channels/${redirectChannel}`);
         }
-    };
+    }, [channel.id, actions, active, currentTeamName, redirectChannel, currentUserId]);
 
-    getIcon = () => {
+    const getIcon = () => {
         return (
-            <div className='status status--group'>{this.props.membersCount}</div>
+            <div className='status status--group'>{membersCount}</div>
         );
     };
 
-    render() {
+    return (
-        const {channel, currentTeamName} = this.props;
+        <SidebarChannelLink
+            channel={channel}
+            link={`/${currentTeamName}/messages/${channel.name}`}
+            label={channel.display_name}
+            channelLeaveHandler={handleLeaveChannel}
+            icon={getIcon()}
+        />
+    );
+};
 
-        return (
+export default memo(SidebarGroupChannel);
-            <SidebarChannelLink
-                channel={channel}
-                link={`/${currentTeamName}/messages/${channel.name}`}
-                label={channel.display_name}
-                channelLeaveHandler={this.handleLeaveChannel}
-                icon={this.getIcon()}
-            />
-        );
-    }
-}