Add dropdown-menu to SensitiveContentOverlay to allow status deletion

ads-account
Chewbacca 2022-11-28 09:05:13 -05:00
rodzic 3a489f98d2
commit 7cce9812ef
2 zmienionych plików z 59 dodań i 7 usunięć

Wyświetl plik

@ -20,6 +20,11 @@ describe('<SensitiveContentOverlay />', () => {
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content');
});
it('does not allow user to delete the status', () => {
render(<SensitiveContentOverlay status={status} />);
expect(screen.queryAllByTestId('icon-button')).toHaveLength(0);
});
it('can be toggled', () => {
render(<SensitiveContentOverlay status={status} />);
@ -43,6 +48,11 @@ describe('<SensitiveContentOverlay />', () => {
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
});
it('allows the user to delete the status', () => {
render(<SensitiveContentOverlay status={status} />);
expect(screen.getByTestId('icon-button')).toBeInTheDocument();
});
it('can be toggled', () => {
render(<SensitiveContentOverlay status={status} />);

Wyświetl plik

@ -1,8 +1,11 @@
import classNames from 'clsx';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
import { openModal } from 'soapbox/actions/modals';
import { deleteStatus } from 'soapbox/actions/statuses';
import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
import { defaultMediaVisibility } from 'soapbox/utils/status';
import { Button, HStack, Text } from '../ui';
@ -10,6 +13,10 @@ import { Button, HStack, Text } from '../ui';
import type { Status as StatusEntity } from 'soapbox/types/entities';
const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' },
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide content' },
sensitiveTitle: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
underReviewTitle: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
@ -27,15 +34,17 @@ interface ISensitiveContentOverlay {
const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
const { onToggleVisibility, status } = props;
const isUnderReview = status.visibility === 'self';
const settings = useSettings();
const displayMedia = settings.get('displayMedia') as string;
const account = useOwnAccount();
const dispatch = useAppDispatch();
const intl = useIntl();
const settings = useSettings();
const { links } = useSoapboxConfig();
const isUnderReview = status.visibility === 'self';
const isOwnStatus = status.getIn(['account', 'id']) === account?.id;
const displayMedia = settings.get('displayMedia') as string;
const [visible, setVisible] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
@ -48,6 +57,32 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
}
};
const handleDeleteStatus = () => {
const deleteModal = settings.get('deleteModal');
if (!deleteModal) {
dispatch(deleteStatus(status.id, false));
} else {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/trash.svg'),
heading: intl.formatMessage(messages.deleteHeading),
message: intl.formatMessage(messages.deleteMessage),
confirm: intl.formatMessage(messages.deleteConfirm),
onConfirm: () => dispatch(deleteStatus(status.id, false)),
}));
}
};
const menu = useMemo(() => {
return [
{
text: intl.formatMessage(messages.delete),
action: handleDeleteStatus,
icon: require('@tabler/icons/trash.svg'),
destructive: true,
},
];
}, []);
useEffect(() => {
if (typeof props.visible !== 'undefined') {
setVisible(!!props.visible);
@ -122,6 +157,13 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
>
{intl.formatMessage(messages.show)}
</Button>
{(isUnderReview && isOwnStatus) ? (
<DropdownMenu
items={menu}
src={require('@tabler/icons/dots.svg')}
/>
) : null}
</HStack>
</div>
)}