[MM-57713] Convert ./components/sidebar_right_menu/sidebar_right_menu.tsx from Class Component to Function Component (#26725)

* [MM-57713] Convert `./components/sidebar_right_menu/sidebar_right_menu.tsx` from Class Component to Function Component

* 🎨 Improve code quality

* :refactor: Improve constants and remove unused code

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

@@ -127,7 +127,7 @@ exports[`components/Root Routes Should mount public product routes 1`] = `
       />
       <withRouter(Connect(SidebarRight)) />
       <AppBar />
-      <Connect(SidebarRightMenu) />
+      <Connect(Component) />
     </CompassThemeProvider>
   </Switch>
 </RootProvider>

webapp/channels/src/components/sidebar_right_menu/constant.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+const ANIMATION_DURATION = 500;
+
+export const TRANSITION_TIMEOUT = {
+    enter: ANIMATION_DURATION,
+    exit: ANIMATION_DURATION,
+};

webapp/channels/src/components/sidebar_right_menu/index.ts

@@ -2,13 +2,10 @@
 // See LICENSE.txt for license information.
 
 import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import type {Dispatch} from 'redux';
 
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
 
-import {openMenu as openRhsMenu} from 'actions/views/rhs';
 import {getIsRhsMenuOpen} from 'selectors/rhs';
 import {getIsMobileView} from 'selectors/views/browser';
 
@@ -30,12 +27,4 @@ function mapStateToProps(state: GlobalState) {
     };
 }
 
-function mapDispatchToProps(dispatch: Dispatch) {
+export default connect(mapStateToProps)(SidebarRightMenu);
-    return {
-        actions: bindActionCreators({
-            openRhsMenu,
-        }, dispatch),
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SidebarRightMenu);

webapp/channels/src/components/sidebar_right_menu/sidebar_right_menu.tsx

@@ -2,48 +2,41 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import React from 'react';
+import React, {memo} from 'react';
 import {Link} from 'react-router-dom';
 import {CSSTransition} from 'react-transition-group';
 
-import * as GlobalActions from 'actions/global_actions';
-
 import MainMenu from 'components/main_menu';
 
 import {Constants} from 'utils/constants';
 
-type Action = {
+import {TRANSITION_TIMEOUT} from './constant';
-    openRhsMenu: () => void;
-}
 
 type Props = {
     isMobileView: boolean;
     isOpen: boolean;
     teamDisplayName?: string;
     siteName?: string;
-    actions: Action;
 };
 
-const ANIMATION_DURATION = 500;
+const SidebarRightMenu = ({
-
+    siteName: defaultSiteName,
-export default class SidebarRightMenu extends React.PureComponent<Props> {
+    teamDisplayName: defaultTeamDisplayName,
-    handleEmitUserLoggedOutEvent = () => {
+    isOpen,
-        GlobalActions.emitUserLoggedOutEvent();
+    isMobileView,
-    };
+}: Props) => {
-
-    render() {
     let siteName = '';
-        if (this.props.siteName != null) {
+    if (defaultSiteName != null) {
-            siteName = this.props.siteName;
+        siteName = defaultSiteName;
     }
     let teamDisplayName = siteName;
-        if (this.props.teamDisplayName) {
+    if (defaultTeamDisplayName) {
-            teamDisplayName = this.props.teamDisplayName;
+        teamDisplayName = defaultTeamDisplayName;
     }
 
     return (
         <div
-                className={classNames('sidebar--menu', {'move--left': this.props.isOpen && this.props.isMobileView})}
+            className={classNames('sidebar--menu', {'move--left': isOpen && isMobileView})}
             id='sidebar-menu'
         >
             <div className='team__header theme'>
@@ -57,21 +50,19 @@ export default class SidebarRightMenu extends React.PureComponent<Props> {
 
             <div className='nav-pills__container mobile-main-menu'>
                 <CSSTransition
-                        in={this.props.isOpen && this.props.isMobileView}
+                    in={isOpen && isMobileView}
                     classNames='MobileRightSidebarMenu'
                     enter={true}
                     exit={true}
                     mountOnEnter={true}
                     unmountOnExit={true}
-                        timeout={{
+                    timeout={TRANSITION_TIMEOUT}
-                            enter: ANIMATION_DURATION,
-                            exit: ANIMATION_DURATION,
-                        }}
                 >
                     <MainMenu mobile={true}/>
                 </CSSTransition>
             </div>
         </div>
     );
-    }
+};
-}
+
+export default memo(SidebarRightMenu);