IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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
This commit is contained in:
Syed Ali Abbas Zaidi 2024-04-23 09:58:25 +05:00 committed by GitHub
parent 04a6b06cff
commit 4ee5763e9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 59 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/channels/src/components/root/__snapshots__/root.test.tsx.snap
View File

@ -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>

9
webapp/channels/src/components/sidebar_right_menu/constant.ts Normal file
View File

@ -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,
};

13
webapp/channels/src/components/sidebar_right_menu/index.ts
View File

@ -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);

105
webapp/channels/src/components/sidebar_right_menu/sidebar_right_menu.tsx
View File

@ -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;
}
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>
<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>
);
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': 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={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);