From 3beb013e92b88b86d13a79dcc4902066075e697b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 28 Apr 2022 13:28:08 -0500
Subject: [PATCH] ReportStatus: convert to TSX

---
 .../admin/components/report_status.js         | Bin 4380 -> 0 bytes
 .../admin/components/report_status.tsx        | 134 ++++++++++++++++++
 2 files changed, 134 insertions(+)
 delete mode 100644 app/soapbox/features/admin/components/report_status.js
 create mode 100644 app/soapbox/features/admin/components/report_status.tsx

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 721dfdfb229f57e2150fdcdd51697710a8b9ec20..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4380
zcmcInS#R7n5PsiZF%JQx1=cI4ed@+CoZ3ZUpl$=V$V(77v_yN^NaU8Jd{oeX@61r=
z?)m_lyzD{FJ>MKu<;GYK+L#U8SW`k&m|VDZLMPF?nF{xpQe?g*u=IPlIxox0i|ayu
zux9hu<3_qM-GS<^4>ox3>3$z?W#y?sU0Ujio-set9Aq8QAfyJR|CX6Q*S=UlE^m~U
z7t%R#i>5SFV~}Lbm>I2+bBoH#ym~;g&iNY5M(PWUOVLw0BR1FOA;C~6qg_(c?Z~ql
z4Jo9Te|q67_ad*fg5(Ug1-?_G{Sc5&XCDKXI2M0}eh}TjeulBm&Aq;mx@sdZaBD9x
zMAjvFOLbKu84KZyLCnvU&I`FE;6|cLR=T88$;gyzrX6@|xRALLzlx%e_Hh9pRW8i}
z-dDLYJ7FBlth_1`;U0B1WSb&8Loc0&vP*5cmFu{k0o*BhA7Zxx1V+AsNaUr`ODhTJ
zZrLVmNrYD+d=aBYRE2M0gG?Xs8aBrH2$}`T9cOb(au6a1(Si0E;b#nuL3}eu@8knl
zBI1`Ufs+=S@qBhN;Cq%8!a2BPXM&#~A29d1gP{;7#Z=GGe6mqxKqVMTGzE%QxTxG}
z#N3f!#4=;^rE-_@pGsj-P#ge4Aop^VVnZ|ydIM03uULi%zZBv*q{pqokVL9ks@4!Y
zghL8`t=y6fbnjSCAQTyvXWG&&ZzWcF{3*gyQz70Lm|Y}@K2rdLaR^NfpMrA$9)q)D
zUCSF|OVMRG?oh-y2!UK6U`W~uzMQ<N=~wdwntAXVMH#$Ex|@Ws;gUCX@PI6fBb7(<
z=1a$*(1R6*i-Q+OC)^}$LdUNC#I};DV(IQ~qgGFYR<I|pv3(567pxDkUxg^I1(kI`
zVe5OV^A$FGi{oKzG8KpOw!%($CsBi~WC%g?nKIc>W-vV54W0nQ6EI+-)D6VrAeYot
zu7vj@TVvnyE}Ac$`d7j+9M1dTy^70}GFD!egiiVnS)>^iA!5@MqDp_&*hZuIAQ>P@
z;LPC2M8xXbHgFBd!bzB_WvuSnyMRLkF01+6>baxlh)TQM0|fZ<`7ZwV%Iu3^R0wfv
z9vvNZ-CX)?-4ENe=EmGWVMLDpq%{|!#g-!NZ{dt7J{00n+6InCA_3}N5Cw6pj#c)z
z6DGRaSV=87t=Yv8`S$FpvIQ2>4$E~>*)@W1!qXk@V{kT`&^{qo6n;X6aL%mS@Ic;U
zhHx9)87^sHkJ#E=dqGXfSaqwkD7Zl}Iku=>hwfGG(VHKB{Au@YE!FKB?Rxw6aQ9N_
z0w?%RfSlA$Q5B|>w$vZ*i;>ZPU>D*Hr!_5o+uD+8!Y6JVB>__d2{vNNE|&fOD+obr
z!k&WQ^Y2^`yrMi?5KQrn3xdJQ?uBA_4y+@x7r^?>k;1Nj52OsO&q^NR<7V<y@8Y4-
zu9(keY)Uxbm7qH9VMl$>!c`MT&9s(wJMX-KzQCrm{V~=ZjO!Uf(XmZ!zYQaqN|8?+
zNRG#a_*|iJ!SR%(<%~n8tD@*<@0Ms9!R*BX_o7@r?Agt7<u(F`#NNHEyNvrsQ5;?T
za(4b6n_V43)=I|ZiQ56&w!3pYu?vL7u+#F26)`La=lP^7gk>x=qfS;l-k11E7LT{k
z^L%7(n18sq23Uq^T)(`pa%9mG9-`gW6SrM4NTJ78N6{_GM8SF7!v0aN?tpjx-$g0Y
z@Rm6UEBICS!Whu}8ghJ8g~#H+hPy#n15excW(aAAW&-1A*3|6dfX<@?jT{JGWkdT4
ziv~8dVe)9Deaxk(OIKK6G{~Rbq;uol!JV}D$`S2C-9V177Ji?n5f0=vzU4-aOw1nr
J=^)$8{sYPIVMqV~

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<string, any>,
+}
+
+const ReportStatus: React.FC<IReportStatus> = ({ 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 (
+          <Bundle fetchComponent={Video} >
+            {(Component: any) => (
+              <Component
+                preview={video.preview_url}
+                blurhash={video.blurhash}
+                src={video.url}
+                alt={video.description}
+                aspectRatio={video.meta.getIn(['original', 'aspect'])}
+                width={239}
+                height={110}
+                inline
+                sensitive={status.sensitive}
+                onOpenVideo={noop}
+              />
+            )}
+          </Bundle>
+        );
+      } else if (firstAttachment.type === 'audio') {
+        const audio = firstAttachment;
+
+        return (
+          <Bundle fetchComponent={Audio}>
+            {(Component: any) => (
+              <Component
+                src={audio.url}
+                alt={audio.description}
+                inline
+                sensitive={status.sensitive}
+                onOpenAudio={noop}
+              />
+            )}
+          </Bundle>
+        );
+      } else {
+        return (
+          <Bundle fetchComponent={MediaGallery}>
+            {(Component: any) => (
+              <Component
+                media={status.media_attachments}
+                sensitive={status.sensitive}
+                height={110}
+                onOpenMedia={handleOpenMedia}
+              />
+            )}
+          </Bundle>
+        );
+      }
+    }
+
+    return null;
+  };
+
+  const media = getMedia();
+  const menu = makeMenu();
+
+  return (
+    <div className='admin-report__status'>
+      <div className='admin-report__status-content'>
+        <StatusContent status={status} />
+        {media}
+      </div>
+      <div className='admin-report__status-actions'>
+        <DropdownMenu
+          items={menu}
+          src={require('@tabler/icons/icons/dots-vertical.svg')}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ReportStatus;