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-57724] Convert ./components/channel_header_dropdown/mobile_channel_header_dropdown.tsx from Class Component to Function Component (#26719)

Browse Source 
* [MM-57724] Convert `./components/channel_header_dropdown/mobile_channel_header_dropdown.tsx` from Class Component to Function Component

* 🎨 Improve code quality

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Syed Ali Abbas Zaidi 2024-04-15 12:47:29 +05:00 committed by GitHub
parent ede18a7c17
commit 52ad3bd7b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
webapp/channels/src/components/channel_header_dropdown/mobile_channel_header_dropdown.tsx
View File

@ -1,9 +1,8 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {FormattedMessage, injectIntl} from 'react-intl';
import type {IntlShape} from 'react-intl';
import React, {memo} from 'react';
import {FormattedMessage, useIntl} from 'react-intl';
import type {Channel} from '@mattermost/types/channels';
import type {UserProfile} from '@mattermost/types/users';
@ -24,13 +23,19 @@ type Props = {
teammateIsBot?: boolean;
teammateStatus?: string;
displayName: string;
intl: IntlShape;
}
class MobileChannelHeaderDropdown extends React.PureComponent<Props> {
getChannelTitle = () => {
const {user, channel, teammateId, displayName} = this.props;
const MobileChannelHeaderDropdown = ({
user,
channel,
teammateId,
displayName,
teammateIsBot,
teammateStatus,
}: Props) => {
const intl = useIntl();
const getChannelTitle = () => {
if (channel.type === Constants.DM_CHANNEL) {
if (user.id === teammateId) {
return (
@ -46,39 +51,36 @@ class MobileChannelHeaderDropdown extends React.PureComponent<Props> {
return channel.display_name;
};
render() {
const {teammateIsBot, teammateStatus} = this.props;
let dmHeaderIconStatus;
let dmHeaderIconStatus;
if (!teammateIsBot) {
dmHeaderIconStatus = (
<StatusIcon status={teammateStatus}/>
);
}
return (
<MenuWrapper animationComponent={MobileChannelHeaderDropdownAnimation}>
<a>
<span className='heading'>
{dmHeaderIconStatus}
{this.getChannelTitle()}
</span>
<span
className='fa fa-angle-down header-dropdown__icon'
title={this.props.intl.formatMessage({id: 'generic_icons.dropdown', defaultMessage: 'Dropdown Icon'})}
/>
</a>
<Menu ariaLabel={this.props.intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'})}>
<ChannelHeaderDropdownItems isMobile={true}/>
<div className='Menu__close visible-xs-block'>
{'×'}
</div>
</Menu>
</MenuWrapper>
if (!teammateIsBot) {
dmHeaderIconStatus = (
<StatusIcon status={teammateStatus}/>
);
}
}
export default injectIntl(MobileChannelHeaderDropdown);
return (
<MenuWrapper animationComponent={MobileChannelHeaderDropdownAnimation}>
<a>
<span className='heading'>
{dmHeaderIconStatus}
{getChannelTitle()}
</span>
<span
className='fa fa-angle-down header-dropdown__icon'
title={intl.formatMessage({id: 'generic_icons.dropdown', defaultMessage: 'Dropdown Icon'})}
/>
</a>
<Menu ariaLabel={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'})}>
<ChannelHeaderDropdownItems isMobile={true}/>
<div className='Menu__close visible-xs-block'>
{'×'}
</div>
</Menu>
</MenuWrapper>
);
};
export default memo(MobileChannelHeaderDropdown);

8
webapp/channels/src/components/channel_header_mobile/__snapshots__/channel_header_mobile.test.tsx.snap
View File

@ -16,7 +16,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
<div
className="navbar-brand"
>
<Connect(injectIntl(MobileChannelHeaderDropdown)) />
<Connect(Component) />
</div>
<div
className="spacer"
@ -87,7 +87,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
<div
className="navbar-brand"
>
<Connect(injectIntl(MobileChannelHeaderDropdown)) />
<Connect(Component) />
</div>
<div
className="spacer"
@ -158,7 +158,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
<div
className="navbar-brand"
>
<Connect(injectIntl(MobileChannelHeaderDropdown)) />
<Connect(Component) />
</div>
<div
className="spacer"
@ -229,7 +229,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
<div
className="navbar-brand"
>
<Connect(injectIntl(MobileChannelHeaderDropdown)) />
<Connect(Component) />
</div>
<div
className="spacer"