Add more buttons to ContactModal

This commit is contained in:
Fedor Indutny 2024-02-14 12:25:27 -08:00 committed by GitHub
parent 307fb7346d
commit 848ed95bda
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 150 additions and 30 deletions

View file

@ -14,16 +14,15 @@ import type { LocalizerType, ThemeType } from '../../types/Util';
import type { ViewUserStoriesActionCreatorType } from '../../state/ducks/stories';
import { StoryViewModeType } from '../../types/Stories';
import * as log from '../../logging/log';
import { About } from './About';
import { Avatar, AvatarSize } from '../Avatar';
import { AvatarLightbox } from '../AvatarLightbox';
import { BadgeDialog } from '../BadgeDialog';
import { ConfirmationDialog } from '../ConfirmationDialog';
import { Modal } from '../Modal';
import { RemoveGroupMemberConfirmationDialog } from './RemoveGroupMemberConfirmationDialog';
import { SharedGroupNames } from '../SharedGroupNames';
import { missingCaseError } from '../../util/missingCaseError';
import { UserText } from '../UserText';
import { Button, ButtonIconType, ButtonVariant } from '../Button';
export type PropsDataType = {
areWeASubscriber: boolean;
@ -36,10 +35,14 @@ export type PropsDataType = {
isAdmin: boolean;
isMember: boolean;
theme: ThemeType;
hasActiveCall: boolean;
};
type PropsActionType = {
blockConversation: (id: string) => void;
hideContactModal: () => void;
onOutgoingAudioCallInConversation: (conversationId: string) => unknown;
onOutgoingVideoCallInConversation: (conversationId: string) => unknown;
removeMemberFromGroup: (conversationId: string, contactId: string) => void;
showConversation: ShowConversationType;
toggleAdmin: (conversationId: string, contactId: string) => void;
@ -62,19 +65,24 @@ enum SubModalState {
None = 'None',
ToggleAdmin = 'ToggleAdmin',
MemberRemove = 'MemberRemove',
ConfirmingBlock = 'ConfirmingBlock',
}
export function ContactModal({
areWeAdmin,
areWeASubscriber,
badges,
blockConversation,
contact,
conversation,
hasActiveCall,
hasStories,
hideContactModal,
i18n,
isAdmin,
isMember,
onOutgoingAudioCallInConversation,
onOutgoingVideoCallInConversation,
removeMemberFromGroup,
showConversation,
theme,
@ -160,6 +168,27 @@ export function ContactModal({
/>
);
break;
case SubModalState.ConfirmingBlock:
modalNode = (
<ConfirmationDialog
dialogName="ContactModal.confirmBlock"
actions={[
{
text: i18n('icu:MessageRequests--block'),
action: () => blockConversation(contact.id),
style: 'affirmative',
},
]}
i18n={i18n}
onClose={() => setSubModalState(SubModalState.None)}
title={i18n('icu:MessageRequests--block-direct-confirm-title', {
title: contact.title,
})}
>
{i18n('icu:MessageRequests--block-direct-confirm-body')}
</ConfirmationDialog>
);
break;
default: {
const state: never = subModalState;
log.warn(`ContactModal: unexpected ${state}!`);
@ -221,31 +250,61 @@ export function ContactModal({
<UserText text={contact.title} />
<i className="ContactModal__name__chevron" />
</button>
<div className="module-about__container">
<About text={contact.about} />
</div>
{!contact.isMe && (
<div className="ContactModal__info">
<SharedGroupNames
i18n={i18n}
sharedGroupNames={contact.sharedGroupNames || []}
/>
<div className="ContactModal__quick-actions">
<Button
icon={ButtonIconType.message}
variant={ButtonVariant.Details}
onClick={() => {
hideContactModal();
showConversation({
conversationId: contact?.id,
switchToAssociatedView: true,
});
}}
>
{i18n('icu:ConversationDetails__HeaderButton--Message')}
</Button>
<Button
icon={ButtonIconType.video}
variant={ButtonVariant.Details}
disabled={hasActiveCall}
onClick={() => {
hideContactModal();
onOutgoingVideoCallInConversation(contact.id);
}}
>
{i18n('icu:video')}
</Button>
<Button
icon={ButtonIconType.audio}
variant={ButtonVariant.Details}
disabled={hasActiveCall}
onClick={() => {
hideContactModal();
onOutgoingAudioCallInConversation(contact.id);
}}
>
{i18n('icu:audio')}
</Button>
</div>
)}
<div className="ContactModal__divider" />
<div className="ContactModal__button-container">
<button
type="button"
className="ContactModal__button ContactModal__send-message"
onClick={() => {
hideContactModal();
showConversation({ conversationId: contact.id });
}}
>
<div className="ContactModal__bubble-icon">
<div className="ContactModal__send-message__bubble-icon" />
</div>
<span>{i18n('icu:ContactModal--message')}</span>
</button>
{!contact.isMe && (
<button
type="button"
className="ContactModal__button ContactModal__block"
onClick={() =>
setSubModalState(SubModalState.ConfirmingBlock)
}
>
<div className="ContactModal__bubble-icon">
<div className="ContactModal__block__bubble-icon" />
</div>
<span>{i18n('icu:MessageRequests--block')}</span>
</button>
)}
{!contact.isMe && (
<button
type="button"