[MM-57713] Convert `./components/sidebar_right_menu/sidebar_right_men…

…u.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) {
-    return {
-        actions: bindActionCreators({
-            openRhsMenu,
-        }, dispatch),
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SidebarRightMenu);
+export default connect(mapStateToProps)(SidebarRightMenu);

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

@@ -2,76 +2,67 @@
 // 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 = {
-    openRhsMenu: () => void;
-}
+import {TRANSITION_TIMEOUT} from './constant';
 
 type Props = {
     isMobileView: boolean;
     isOpen: boolean;
     teamDisplayName?: string;
     siteName?: string;
-    actions: Action;
 };
 
-const ANIMATION_DURATION = 500;
-
-export default class SidebarRightMenu extends React.PureComponent<Props> {
-    handleEmitUserLoggedOutEvent = () => {
-        GlobalActions.emitUserLoggedOutEvent();
-    };
-
-    render() {
-        let siteName = '';
-        if (this.props.siteName != null) {
-            siteName = this.props.siteName;
-        }
-        let teamDisplayName = siteName;
-        if (this.props.teamDisplayName) {
-            teamDisplayName = this.props.teamDisplayName;
-        }
+const SidebarRightMenu = ({
+    siteName: defaultSiteName,
+    teamDisplayName: defaultTeamDisplayName,
+    isOpen,
+    isMobileView,
+}: Props) => {
+    let siteName = '';
+    if (defaultSiteName != null) {
+        siteName = defaultSiteName;
+    }
+    let teamDisplayName = siteName;
+    if (defaultTeamDisplayName) {
+        teamDisplayName = defaultTeamDisplayName;
+    }
 
-        return (
-            <div
-                className={classNames('sidebar--menu', {'move--left': this.props.isOpen && this.props.isMobileView})}
-                id='sidebar-menu'
-            >
-                <div className='team__header theme'>
-                    <Link
-                        className='team__name'
-                        to={`/channels/${Constants.DEFAULT_CHANNEL}`}
-                    >
-                        {teamDisplayName}
-                    </Link>
-                </div>
+    return (
+        <div
+            className={classNames('sidebar--menu', {'move--left': isOpen && isMobileView})}
+            id='sidebar-menu'
+        >
+            <div className='team__header theme'>
+                <Link
+                    className='team__name'
+                    to={`/channels/${Constants.DEFAULT_CHANNEL}`}
+                >
+                    {teamDisplayName}
+                </Link>
+            </div>
 
-                <div className='nav-pills__container mobile-main-menu'>
-                    <CSSTransition
-                        in={this.props.isOpen && this.props.isMobileView}
-                        classNames='MobileRightSidebarMenu'
-                        enter={true}
-                        exit={true}
-                        mountOnEnter={true}
-                        unmountOnExit={true}
-                        timeout={{
-                            enter: ANIMATION_DURATION,
-                            exit: ANIMATION_DURATION,
-                        }}
-                    >
-                        <MainMenu mobile={true}/>
-                    </CSSTransition>
-                </div>
+            <div className='nav-pills__container mobile-main-menu'>
+                <CSSTransition
+                    in={isOpen && isMobileView}
+                    classNames='MobileRightSidebarMenu'
+                    enter={true}
+                    exit={true}
+                    mountOnEnter={true}
+                    unmountOnExit={true}
+                    timeout={TRANSITION_TIMEOUT}
+                >
+                    <MainMenu mobile={true}/>
+                </CSSTransition>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default memo(SidebarRightMenu);