Convert 'AttachmentThumbs' to TSX

app/soapbox/components/attachment-thumbs.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import { openModal } from 'soapbox/actions/modals';
+import Bundle from 'soapbox/features/ui/components/bundle';
+import { MediaGallery } from 'soapbox/features/ui/util/async-components';
+
+import type { List as ImmutableList } from 'immutable';
+
+interface IAttachmentThumbs {
+  media: ImmutableList<Immutable.Record<any>>
+  onClick?(): void
+  sensitive?: boolean
+}
+
+const AttachmentThumbs = (props: IAttachmentThumbs) => {
+  const { media, onClick, sensitive } = props;
+  const dispatch = useDispatch();
+
+  const renderLoading = () => <div className='media-gallery--compact' />;
+  const onOpenMedia = (media: Immutable.Record<any>, index: number) => dispatch(openModal('MEDIA', { media, index }));
+
+  return (
+    <div className='attachment-thumbs'>
+      <Bundle fetchComponent={MediaGallery} loading={renderLoading}>
+        {(Component: any) => (
+          <Component
+            media={media}
+            onOpenMedia={onOpenMedia}
+            height={50}
+            compact
+            sensitive={sensitive}
+          />
+        )}
+      </Bundle>
+
+      {onClick && (
+        <div className='attachment-thumbs__clickable-region' onClick={onClick} />
+      )}
+    </div>
+  );
+};
+
+export default AttachmentThumbs;

app/soapbox/components/status.tsx

@@ -14,7 +14,7 @@ import Card from '../features/status/components/card';
 import Bundle from '../features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
 
-import AttachmentThumbs from './attachment_thumbs';
+import AttachmentThumbs from './attachment-thumbs';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import StatusReplyMentions from './status_reply_mentions';
@@ -160,7 +160,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
 
   // Compensate height changes
   componentDidUpdate(_prevProps: IStatus, _prevState: IStatusState, snapshot?: ScrollPosition): void {
-    const doShowCard: boolean  = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
+    const doShowCard: boolean = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
 
     if (doShowCard && !this.didShowCard) {
       this.didShowCard = true;

app/soapbox/features/status/components/quoted_status.tsx

@@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage, IntlShape } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 
-import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import { Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 
@@ -143,7 +143,6 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
 
         {status.media_attachments.size > 0 && (
           <AttachmentThumbs
-            compact
             media={status.media_attachments}
             sensitive={status.sensitive}
           />

app/soapbox/features/ui/components/compare_history_modal.tsx

@@ -4,7 +4,7 @@ import React, { useEffect } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
 import { fetchHistory } from 'soapbox/actions/history';
-import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import { HStack, Modal, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
@@ -75,10 +75,7 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
               )}
 
               {version.media_attachments.size > 0 && (
-                <AttachmentThumbs
-                  compact
-                  media={version.media_attachments}
-                />
+                <AttachmentThumbs media={version.media_attachments} />
               )}
 
               <Text align='right' tag='span' theme='muted' size='sm'>

app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx

@@ -6,7 +6,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { blockAccount } from 'soapbox/actions/accounts';
 import { submitReport, submitReportSuccess, submitReportFail } from 'soapbox/actions/reports';
 import { expandAccountTimeline } from 'soapbox/actions/timelines';
-import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import StatusContent from 'soapbox/components/status_content';
 import { Modal, ProgressBar, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
@@ -61,7 +61,6 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => {
 
       {status.get('media_attachments').size > 0 && (
         <AttachmentThumbs
-          compact
           media={status.get('media_attachments')}
           sensitive={status.get('sensitive')}
         />