Hide "leave group" button if you've already left

This commit is contained in:
Evan Hahn 2021-09-01 16:08:33 -05:00 committed by GitHub
parent 0cb340fd1e
commit ce922eed7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 34 deletions

View file

@ -388,6 +388,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
i18n={i18n} i18n={i18n}
cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin} cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin}
conversationTitle={conversation.title} conversationTitle={conversation.title}
left={Boolean(conversation.left)}
onLeave={onLeave} onLeave={onLeave}
onBlock={onBlock} onBlock={onBlock}
/> />

View file

@ -28,6 +28,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
? overrideProps.cannotLeaveBecauseYouAreLastAdmin ? overrideProps.cannotLeaveBecauseYouAreLastAdmin
: false, : false,
conversationTitle: overrideProps.conversationTitle || '', conversationTitle: overrideProps.conversationTitle || '',
left: isBoolean(overrideProps.left) ? overrideProps.left : false,
onBlock: action('onBlock'), onBlock: action('onBlock'),
onLeave: action('onLeave'), onLeave: action('onLeave'),
i18n, i18n,
@ -39,6 +40,12 @@ story.add('Basic', () => {
return <ConversationDetailsActions {...props} />; return <ConversationDetailsActions {...props} />;
}); });
story.add('Left the group', () => {
const props = createProps({ left: true });
return <ConversationDetailsActions {...props} />;
});
story.add('Cannot leave because you are the last admin', () => { story.add('Cannot leave because you are the last admin', () => {
const props = createProps({ cannotLeaveBecauseYouAreLastAdmin: true }); const props = createProps({ cannotLeaveBecauseYouAreLastAdmin: true });

View file

@ -1,7 +1,7 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import React from 'react'; import React, { ReactNode } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { LocalizerType } from '../../../types/Util'; import { LocalizerType } from '../../../types/Util';
@ -15,6 +15,7 @@ import { ConversationDetailsIcon } from './ConversationDetailsIcon';
export type Props = { export type Props = {
cannotLeaveBecauseYouAreLastAdmin: boolean; cannotLeaveBecauseYouAreLastAdmin: boolean;
conversationTitle: string; conversationTitle: string;
left: boolean;
onBlock: () => void; onBlock: () => void;
onLeave: () => void; onLeave: () => void;
i18n: LocalizerType; i18n: LocalizerType;
@ -23,6 +24,7 @@ export type Props = {
export const ConversationDetailsActions: React.ComponentType<Props> = ({ export const ConversationDetailsActions: React.ComponentType<Props> = ({
cannotLeaveBecauseYouAreLastAdmin, cannotLeaveBecauseYouAreLastAdmin,
conversationTitle, conversationTitle,
left,
onBlock, onBlock,
onLeave, onLeave,
i18n, i18n,
@ -30,41 +32,44 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
const [confirmingLeave, setConfirmingLeave] = React.useState<boolean>(false); const [confirmingLeave, setConfirmingLeave] = React.useState<boolean>(false);
const [confirmingBlock, setConfirmingBlock] = React.useState<boolean>(false); const [confirmingBlock, setConfirmingBlock] = React.useState<boolean>(false);
let leaveGroupNode = ( let leaveGroupNode: ReactNode;
<PanelRow if (!left) {
disabled={cannotLeaveBecauseYouAreLastAdmin}
onClick={() => setConfirmingLeave(true)}
icon={
<ConversationDetailsIcon
ariaLabel={i18n('ConversationDetailsActions--leave-group')}
disabled={cannotLeaveBecauseYouAreLastAdmin}
icon="leave"
/>
}
label={
<div
className={classNames(
'module-conversation-details__leave-group',
cannotLeaveBecauseYouAreLastAdmin &&
'module-conversation-details__leave-group--disabled'
)}
>
{i18n('ConversationDetailsActions--leave-group')}
</div>
}
/>
);
if (cannotLeaveBecauseYouAreLastAdmin) {
leaveGroupNode = ( leaveGroupNode = (
<Tooltip <PanelRow
content={i18n( disabled={cannotLeaveBecauseYouAreLastAdmin}
'ConversationDetailsActions--leave-group-must-choose-new-admin' onClick={() => setConfirmingLeave(true)}
)} icon={
direction={TooltipPlacement.Top} <ConversationDetailsIcon
> ariaLabel={i18n('ConversationDetailsActions--leave-group')}
{leaveGroupNode} disabled={cannotLeaveBecauseYouAreLastAdmin}
</Tooltip> icon="leave"
/>
}
label={
<div
className={classNames(
'module-conversation-details__leave-group',
cannotLeaveBecauseYouAreLastAdmin &&
'module-conversation-details__leave-group--disabled'
)}
>
{i18n('ConversationDetailsActions--leave-group')}
</div>
}
/>
); );
if (cannotLeaveBecauseYouAreLastAdmin) {
leaveGroupNode = (
<Tooltip
content={i18n(
'ConversationDetailsActions--leave-group-must-choose-new-admin'
)}
direction={TooltipPlacement.Top}
>
{leaveGroupNode}
</Tooltip>
);
}
} }
return ( return (