From 4ee5763e9d9abe384d5b325271329a91bc23dad3 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
<88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Tue, 23 Apr 2024 09:58:25 +0500
Subject: [PATCH] [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
* :art: Improve code quality
* :refactor: Improve constants and remove unused code
---
.../root/__snapshots__/root.test.tsx.snap | 2 +-
.../components/sidebar_right_menu/constant.ts | 9 ++
.../components/sidebar_right_menu/index.ts | 13 +--
.../sidebar_right_menu/sidebar_right_menu.tsx | 101 ++++++++----------
4 files changed, 57 insertions(+), 68 deletions(-)
create mode 100644 webapp/channels/src/components/sidebar_right_menu/constant.ts
diff --git a/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap b/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap
index a9c5aaf9d424f..f9290eb60715a 100644
--- a/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap
+++ b/webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap
@@ -127,7 +127,7 @@ exports[`components/Root Routes Should mount public product routes 1`] = `
/>
-
+
diff --git a/webapp/channels/src/components/sidebar_right_menu/constant.ts b/webapp/channels/src/components/sidebar_right_menu/constant.ts
new file mode 100644
index 0000000000000..a1d663536e8f0
--- /dev/null
+++ b/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,
+};
diff --git a/webapp/channels/src/components/sidebar_right_menu/index.ts b/webapp/channels/src/components/sidebar_right_menu/index.ts
index eddd6974fb449..bfc8329ce839f 100644
--- a/webapp/channels/src/components/sidebar_right_menu/index.ts
+++ b/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);
diff --git a/webapp/channels/src/components/sidebar_right_menu/sidebar_right_menu.tsx b/webapp/channels/src/components/sidebar_right_menu/sidebar_right_menu.tsx
index 996cad114110f..c35029ea400fc 100644
--- a/webapp/channels/src/components/sidebar_right_menu/sidebar_right_menu.tsx
+++ b/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 {
- 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 (
-