sforkowany z mirror/soapbox
Add dropdown-menu to SensitiveContentOverlay to allow status deletion
rodzic
3a489f98d2
commit
7cce9812ef
|
@ -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} />);
|
||||
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
Ładowanie…
Reference in New Issue