Spam Reporting UI changes

This commit is contained in:
Jamie Kyle 2024-03-12 09:29:31 -07:00 committed by GitHub
parent e031d136a1
commit 8387f938eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
88 changed files with 2711 additions and 807 deletions

View file

@ -2,52 +2,57 @@
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import type { PropsType as ContactNameProps } from './ContactName';
import { ContactName } from './ContactName';
import { Button, ButtonVariant } from '../Button';
import type { Props as MessageRequestActionsConfirmationProps } from './MessageRequestActionsConfirmation';
import type { MessageRequestActionsConfirmationProps } from './MessageRequestActionsConfirmation';
import {
MessageRequestActionsConfirmation,
MessageRequestState,
} from './MessageRequestActionsConfirmation';
import { Intl } from '../Intl';
import type { LocalizerType } from '../../types/Util';
import { strictAssert } from '../../util/assert';
export type Props = {
i18n: LocalizerType;
isHidden?: boolean;
} & Omit<ContactNameProps, 'module'> &
Omit<
MessageRequestActionsConfirmationProps,
'i18n' | 'state' | 'onChangeState'
>;
isHidden: boolean | null;
} & Omit<
MessageRequestActionsConfirmationProps,
'i18n' | 'state' | 'onChangeState'
>;
export function MessageRequestActions({
addedByName,
conversationId,
conversationType,
conversationName,
i18n,
isBlocked,
isHidden,
isReported,
acceptConversation,
blockAndReportSpam,
blockConversation,
conversationId,
conversationType,
reportSpam,
deleteConversation,
firstName,
i18n,
isHidden,
isBlocked,
title,
}: Props): JSX.Element {
const [mrState, setMrState] = React.useState(MessageRequestState.default);
const name = (
<strong
key="name"
className="module-message-request-actions__message__name"
>
<ContactName firstName={firstName} title={title} preferFirstName />
</strong>
);
const nameValue =
conversationType === 'direct' ? conversationName : addedByName;
let message: JSX.Element | undefined;
if (conversationType === 'direct') {
strictAssert(nameValue != null, 'nameValue is null');
const name = (
<strong
key="name"
className="module-message-request-actions__message__name"
>
<ContactName {...nameValue} preferFirstName />
</strong>
);
if (isBlocked) {
message = (
<Intl
@ -87,39 +92,26 @@ export function MessageRequestActions({
<>
{mrState !== MessageRequestState.default ? (
<MessageRequestActionsConfirmation
addedByName={addedByName}
conversationId={conversationId}
conversationType={conversationType}
conversationName={conversationName}
i18n={i18n}
isBlocked={isBlocked}
isReported={isReported}
state={mrState}
acceptConversation={acceptConversation}
blockAndReportSpam={blockAndReportSpam}
blockConversation={blockConversation}
conversationId={conversationId}
conversationType={conversationType}
reportSpam={reportSpam}
deleteConversation={deleteConversation}
i18n={i18n}
onChangeState={setMrState}
state={mrState}
title={title}
/>
) : null}
<div className="module-message-request-actions">
<p className="module-message-request-actions__message">{message}</p>
<div className="module-message-request-actions__buttons">
<Button
onClick={() => {
setMrState(MessageRequestState.deleting);
}}
variant={ButtonVariant.SecondaryDestructive}
>
{i18n('icu:MessageRequests--delete')}
</Button>
{isBlocked ? (
<Button
onClick={() => {
setMrState(MessageRequestState.unblocking);
}}
variant={ButtonVariant.SecondaryAffirmative}
>
{i18n('icu:MessageRequests--unblock')}
</Button>
) : (
{!isBlocked && (
<Button
onClick={() => {
setMrState(MessageRequestState.blocking);
@ -129,6 +121,36 @@ export function MessageRequestActions({
{i18n('icu:MessageRequests--block')}
</Button>
)}
{(isReported || isBlocked) && (
<Button
onClick={() => {
setMrState(MessageRequestState.deleting);
}}
variant={ButtonVariant.SecondaryDestructive}
>
{i18n('icu:MessageRequests--delete')}
</Button>
)}
{!isReported && (
<Button
onClick={() => {
setMrState(MessageRequestState.reportingAndMaybeBlocking);
}}
variant={ButtonVariant.SecondaryDestructive}
>
{i18n('icu:MessageRequests--reportAndMaybeBlock')}
</Button>
)}
{isBlocked && (
<Button
onClick={() => {
setMrState(MessageRequestState.unblocking);
}}
variant={ButtonVariant.SecondaryAffirmative}
>
{i18n('icu:MessageRequests--unblock')}
</Button>
)}
{!isBlocked ? (
<Button
onClick={() => acceptConversation(conversationId)}