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-57723] Convert ./components/admin_console/system_user_detail/team_list/team_list_dropdown.tsx from Class Component to Function Component (#26720)

Browse Source 
* [MM-57723] Convert `./components/admin_console/system_user_detail/team_list/team_list_dropdown.tsx` from Class Component to Function Component

* 🎨 Improve code quality
This commit is contained in:
Syed Ali Abbas Zaidi 2024-04-22 15:45:27 +05:00 committed by GitHub
parent 632b231283
commit 603c26a5bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 57 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
webapp/channels/src/components/admin_console/system_user_detail/team_list/team_list_dropdown.tsx
View File

@ -1,14 +1,13 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import React, {memo, useCallback} from 'react';
import {useIntl} from 'react-intl';
import EllipsisHorizontalIcon from 'components/widgets/icons/ellipsis_h_icon';
import Menu from 'components/widgets/menu/menu';
import MenuWrapper from 'components/widgets/menu/menu_wrapper';
import {localizeMessage} from 'utils/utils';
import type {TeamWithMembership} from './types';
type Props = {
@ -19,66 +18,63 @@ type Props = {
isDisabled?: boolean;
}
type State = {
serverError: string | null;
}
const TeamListDropdown = ({
team,
doRemoveUserFromTeam,
doMakeUserTeamAdmin,
doMakeUserTeamMember,
isDisabled,
}: Props) => {
const intl = useIntl();
export default class TeamListDropdown extends React.PureComponent<Props, State> {
public constructor(props: Props) {
super(props);
const isAdmin = team.scheme_admin;
const isMember = team.scheme_user && !team.scheme_admin;
const isGuest = team.scheme_guest;
const showMakeTeamAdmin = !isAdmin && !isGuest;
const showMakeTeamMember = !isMember && !isGuest;
this.state = {
serverError: null,
};
}
const makeTeamAdminOnClick = useCallback(() => doMakeUserTeamAdmin(team.id), [team.id, doMakeUserTeamAdmin]);
const makeTeamMemberOnClick = useCallback(() => doMakeUserTeamMember(team.id), [team.id, doMakeUserTeamMember]);
const removeUserTeamOnClick = useCallback(() => doRemoveUserFromTeam(team.id), [team.id, doRemoveUserFromTeam]);
public render(): JSX.Element {
const {team} = this.props;
const isAdmin = team.scheme_admin;
const isMember = team.scheme_user && !team.scheme_admin;
const isGuest = team.scheme_guest;
const showMakeTeamAdmin = !isAdmin && !isGuest;
const showMakeTeamMember = !isMember && !isGuest;
return (
<MenuWrapper
isDisabled={this.props.isDisabled}
return (
<MenuWrapper isDisabled={isDisabled}>
<button
type='button'
id={`teamListDropdown_${team.id}`}
className='dropdown-toggle theme color--link style--none'
aria-expanded='true'
>
<button
type='button'
id={`teamListDropdown_${team.id}`}
className='dropdown-toggle theme color--link style--none'
aria-expanded='true'
<span className='SystemUserDetail__actions-menu-icon'><EllipsisHorizontalIcon/></span>
</button>
<div>
<Menu
openLeft={true}
openUp={false}
ariaLabel={intl.formatMessage({id: 'team_members_dropdown.menuAriaLabel', defaultMessage: 'Change the role of a team member'})}
>
<span className='SystemUserDetail__actions-menu-icon'><EllipsisHorizontalIcon/></span>
</button>
<div>
<Menu
openLeft={true}
openUp={false}
ariaLabel={localizeMessage('team_members_dropdown.menuAriaLabel', 'Change the role of a team member')}
>
<Menu.ItemAction
id='makeTeamAdmin'
show={showMakeTeamAdmin}
onClick={() => this.props.doMakeUserTeamAdmin(team.id)}
text={localizeMessage('team_members_dropdown.makeAdmin', 'Make Team Admin')}
/>
<Menu.ItemAction
show={showMakeTeamMember}
onClick={() => this.props.doMakeUserTeamMember(team.id)}
text={localizeMessage('team_members_dropdown.makeMember', 'Make Team Member')}
/>
<Menu.ItemAction
id='removeFromTeam'
show={true}
onClick={() => this.props.doRemoveUserFromTeam(team.id)}
text={localizeMessage('team_members_dropdown.leave_team', 'Remove from Team')}
buttonClass='SystemUserDetail__action-remove-team'
/>
</Menu>
</div>
</MenuWrapper>
);
}
}
<Menu.ItemAction
id='makeTeamAdmin'
show={showMakeTeamAdmin}
onClick={makeTeamAdminOnClick}
text={intl.formatMessage({id: 'team_members_dropdown.makeAdmin', defaultMessage: 'Make Team Admin'})}
/>
<Menu.ItemAction
show={showMakeTeamMember}
onClick={makeTeamMemberOnClick}
text={intl.formatMessage({id: 'team_members_dropdown.makeMember', defaultMessage: 'Make Team Member'})}
/>
<Menu.ItemAction
id='removeFromTeam'
show={true}
onClick={removeUserTeamOnClick}
text={intl.formatMessage({id: 'team_members_dropdown.leave_team', defaultMessage: 'Remove from Team'})}
buttonClass='SystemUserDetail__action-remove-team'
/>
</Menu>
</div>
</MenuWrapper>
);
};
export default memo(TeamListDropdown);