Merge branch 'tsx-conversions' into 'develop'

TSX conversions

See merge request soapbox-pub/soapbox-fe!1412

app/soapbox/components/__tests__/column_back_button.test.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '../../jest/test-helpers';
-import ColumnBackButton from '../column_back_button';
-
-describe('<ColumnBackButton />', () => {
-  it('renders correctly', () => {
-    render(<ColumnBackButton />);
-
-    expect(screen.getByRole('button')).toHaveTextContent('Back');
-  });
-});

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/attachment_thumbs.js

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } 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';
-
-export default @connect()
-class AttachmentThumbs extends ImmutablePureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    media: ImmutablePropTypes.list.isRequired,
-    onClick: PropTypes.func,
-    sensitive: PropTypes.bool,
-  };
-
-  renderLoading() {
-    return <div className='media-gallery--compact' />;
-  }
-
-  onOpenMedia = (media, index) => {
-    this.props.dispatch(openModal('MEDIA', { media, index }));
-  }
-
-  render() {
-    const { media, onClick, sensitive } = this.props;
-
-    return (
-      <div className='attachment-thumbs'>
-        <Bundle fetchComponent={MediaGallery} loading={this.renderLoading}>
-          {Component => (
-            <Component
-              media={media}
-              onOpenMedia={this.onOpenMedia}
-              height={50}
-              compact
-              sensitive={sensitive}
-            />
-          )}
-        </Bundle>
-        {onClick && (
-          <div className='attachment-thumbs__clickable-region' onClick={onClick} />
-        )}
-      </div>
-    );
-  }
-
-}

app/soapbox/components/column_back_button.js

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { withRouter } from 'react-router-dom';
-
-import Icon from 'soapbox/components/icon';
-
-export default @withRouter
-class ColumnBackButton extends React.PureComponent {
-
-  static propTypes = {
-    to: PropTypes.string,
-    history: PropTypes.object,
-  };
-
-  handleClick = () => {
-    const { to } = this.props;
-
-    if (window.history?.length === 1) {
-      this.props.history.push(to ? to : '/');
-    } else {
-      this.props.history.goBack();
-    }
-  }
-
-  handleKeyUp = (e) => {
-    if (e.key === 'Enter') {
-      this.handleClick();
-    }
-  }
-
-  render() {
-    return (
-      <button onClick={this.handleClick} onKeyUp={this.handleKeyUp} className='column-back-button'>
-        <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
-        <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
-      </button>
-    );
-  }
-
-}

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/chats/chat_room.js

@@ -77,7 +77,6 @@ class ChatRoom extends ImmutablePureComponent {
     return (
       <Column label={`@${getAcct(account, displayFqn)}`}>
         {/* <div className='chatroom__back'>
-          <ColumnBackButton />
           <Link to={`/@${account.get('acct')}`} className='chatroom__header'>
             <Avatar account={account} size={18} />
             <div className='chatroom__title'>

app/soapbox/features/compose/components/reply_indicator.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-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';
 
@@ -28,7 +28,7 @@ export default class ReplyIndicator extends ImmutablePureComponent {
       return null;
     }
 
-    const style   = {
+    const style = {
       direction: isRtl(status.get('search_index')) ? 'rtl' : 'ltr',
     };
 
@@ -59,7 +59,6 @@ export default class ReplyIndicator extends ImmutablePureComponent {
 
         {status.get('media_attachments').size > 0 && (
           <AttachmentThumbs
-            compact
             media={status.get('media_attachments')}
             sensitive={status.get('sensitive')}
           />

app/soapbox/features/scheduled_statuses/components/scheduled_status.js

@@ -4,7 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 import { Link, NavLink } from 'react-router-dom';
 
-import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
 import RelativeTimestamp from 'soapbox/components/relative_timestamp';
@@ -74,7 +74,6 @@ class ScheduledStatus extends ImmutablePureComponent {
 
             {status.get('media_attachments').size > 0 && (
               <AttachmentThumbs
-                compact
                 media={status.get('media_attachments')}
                 sensitive={status.get('sensitive')}
               />

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
+                <AttachmentThumbs media={version.media_attachments} />
-                  compact
-                  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')}
         />