diff --git a/app/soapbox/features/admin/components/report_status.js b/app/soapbox/features/admin/components/report_status.js deleted file mode 100644 index 721dfdfb22..0000000000 Binary files a/app/soapbox/features/admin/components/report_status.js and /dev/null differ diff --git a/app/soapbox/features/admin/components/report_status.tsx b/app/soapbox/features/admin/components/report_status.tsx new file mode 100644 index 0000000000..00755a6c4f --- /dev/null +++ b/app/soapbox/features/admin/components/report_status.tsx @@ -0,0 +1,134 @@ +import noop from 'lodash/noop'; +import React from 'react'; +import { useIntl, defineMessages } from 'react-intl'; + +import { openModal } from 'soapbox/actions/modals'; +import { deleteStatusModal } from 'soapbox/actions/moderation'; +import StatusContent from 'soapbox/components/status_content'; +import DropdownMenu from 'soapbox/containers/dropdown_menu_container'; +import Bundle from 'soapbox/features/ui/components/bundle'; +import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components'; +import { useAppDispatch } from 'soapbox/hooks'; + +import type { Map as ImmutableMap } from 'immutable'; +import type { Status, Attachment } from 'soapbox/types/entities'; + +const messages = defineMessages({ + viewStatus: { id: 'admin.reports.actions.view_status', defaultMessage: 'View post' }, + deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' }, +}); + +interface IReportStatus { + status: Status, + report?: ImmutableMap, +} + +const ReportStatus: React.FC = ({ status }) => { + const intl = useIntl(); + const dispatch = useAppDispatch(); + + const handleOpenMedia = (media: Attachment, index: number) => { + dispatch(openModal('MEDIA', { media, index })); + }; + + const handleDeleteStatus = () => { + dispatch(deleteStatusModal(intl, status.id)); + }; + + const makeMenu = () => { + const acct = status.getIn(['account', 'acct']); + + return [{ + text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }), + to: `/@${acct}/posts/${status.get('id')}`, + icon: require('@tabler/icons/icons/pencil.svg'), + }, { + text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }), + action: handleDeleteStatus, + icon: require('@tabler/icons/icons/trash.svg'), + destructive: true, + }]; + }; + + const getMedia = () => { + const firstAttachment = status.media_attachments.get(0); + + if (firstAttachment) { + if (status.media_attachments.some(item => item.type === 'unknown')) { + // Do nothing + } else if (firstAttachment.type === 'video') { + const video = firstAttachment; + + return ( + + {(Component: any) => ( + + )} + + ); + } else if (firstAttachment.type === 'audio') { + const audio = firstAttachment; + + return ( + + {(Component: any) => ( + + )} + + ); + } else { + return ( + + {(Component: any) => ( + + )} + + ); + } + } + + return null; + }; + + const media = getMedia(); + const menu = makeMenu(); + + return ( +
+
+ + {media} +
+
+ +
+
+ ); +}; + +export default ReportStatus;