Convert ThreadStatus to tsx

app/soapbox/components/status.tsx

@@ -87,8 +87,8 @@ interface IStatus extends RouteComponentProps {
   muted: boolean,
   hidden: boolean,
   unread: boolean,
-  onMoveUp: (statusId: string, featured: string) => void,
+  onMoveUp: (statusId: string, featured?: string) => void,
-  onMoveDown: (statusId: string, featured: string) => void,
+  onMoveDown: (statusId: string, featured?: string) => void,
   getScrollPosition?: () => ScrollPosition | undefined,
   updateScrollBottom?: (bottom: number) => void,
   cacheMediaWidth: () => void,
@@ -658,8 +658,8 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
               {quote}
 
               <StatusActionBar
-                // @ts-ignore what?
                 status={status}
+                // @ts-ignore what?
                 account={account}
                 emojiSelectorFocused={this.state.emojiSelectorFocused}
                 handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}

app/soapbox/components/status_action_bar.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, IntlShape } from 'react-intl';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import EmojiSelector from 'soapbox/components/emoji_selector';
@@ -68,7 +68,7 @@ const messages = defineMessages({
   quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
 });
 
-interface IStatusActionBar {
+interface IStatusActionBar extends RouteComponentProps {
   status: Status,
   onOpenUnauthorizedModal: (modalType?: string) => void,
   onOpenReblogsModal: (acct: string, statusId: string) => void,
@@ -718,9 +718,6 @@ const mapDispatchToProps = (dispatch: Dispatch, { status }: { status: Status}) =
   },
 });
 
+const WrappedComponent = withRouter(injectIntl(StatusActionBar));
 // @ts-ignore
-export default withRouter(injectIntl(
+export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(WrappedComponent);
-  // @ts-ignore
-  connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true },
-  // @ts-ignore
-  )(StatusActionBar)));

app/soapbox/features/status/components/thread-status.tsx

@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import React from 'react';
+
+import StatusContainer from 'soapbox/containers/status_container';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
+import { useAppSelector } from 'soapbox/hooks';
+
+interface IThreadStatus {
+  id: string,
+  focusedStatusId: string,
+}
+
+const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
+  const { id, focusedStatusId } = props;
+
+  const replyToId = useAppSelector(state => state.contexts.getIn(['inReplyTos', id]));
+  const replyCount = useAppSelector(state => state.contexts.getIn(['replies', id], ImmutableOrderedSet()).size);
+  const isLoaded = useAppSelector(state => Boolean(state.statuses.get(id)));
+
+  const renderConnector = (): JSX.Element | null => {
+    const isConnectedTop = replyToId && replyToId !== focusedStatusId;
+    const isConnectedBottom = replyCount > 0;
+    const isConnected = isConnectedTop || isConnectedBottom;
+
+    if (!isConnected) return null;
+
+    return (
+      <div
+        className={classNames('thread__connector', {
+          'thread__connector--top': isConnectedTop,
+          'thread__connector--bottom': isConnectedBottom,
+        })}
+      />
+    );
+  };
+
+  return (
+    <div className='thread__status'>
+      {renderConnector()}
+      {isLoaded ? (
+        // @ts-ignore FIXME
+        <StatusContainer {...props} />
+      ) : (
+        <PlaceholderStatus thread />
+      )}
+    </div>
+  );
+};
+
+export default ThreadStatus;

app/soapbox/features/status/components/thread_status.js

@@ -1,64 +0,0 @@
-import classNames from 'classnames';
-import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { connect } from 'react-redux';
-
-import StatusContainer from 'soapbox/containers/status_container';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
-
-const mapStateToProps = (state, { id }) => {
-  return {
-    replyToId: state.getIn(['contexts', 'inReplyTos', id]),
-    replyCount: state.getIn(['contexts', 'replies', id], ImmutableOrderedSet()).size,
-    isLoaded: Boolean(state.getIn(['statuses', id])),
-  };
-};
-
-export default @connect(mapStateToProps)
-class ThreadStatus extends React.Component {
-
-  static propTypes = {
-    focusedStatusId: PropTypes.string,
-    replyToId: PropTypes.string,
-    replyCount: PropTypes.number,
-    isLoaded: PropTypes.bool,
-  }
-
-  renderConnector() {
-    const { focusedStatusId, replyToId, replyCount } = this.props;
-
-    const isConnectedTop = replyToId && replyToId !== focusedStatusId;
-    const isConnectedBottom = replyCount > 0;
-    const isConnected = isConnectedTop || isConnectedBottom;
-
-    if (!isConnected) {
-      return null;
-    }
-
-    return (
-      <div
-        className={classNames('thread__connector', {
-          'thread__connector--top': isConnectedTop,
-          'thread__connector--bottom': isConnectedBottom,
-        })}
-      />
-    );
-  }
-
-  render() {
-    const { isLoaded } = this.props;
-
-    return (
-      <div className='thread__status'>
-        {this.renderConnector()}
-        {isLoaded ? (
-          <StatusContainer {...this.props} />
-        ) : (
-          <PlaceholderStatus thread />
-        )}
-      </div>
-    );
-  }
-
-}

app/soapbox/features/status/index.tsx

@@ -59,7 +59,7 @@ import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from
 
 import ActionBar from './components/action-bar';
 import DetailedStatus from './components/detailed_status';
-import ThreadStatus from './components/thread_status';
+import ThreadStatus from './components/thread-status';
 
 import type { AxiosError } from 'axios';
 import type { History } from 'history';
@@ -558,9 +558,9 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         key={id}
         id={id}
         focusedStatusId={status.id}
+        // @ts-ignore FIXME
         onMoveUp={this.handleMoveUp}
         onMoveDown={this.handleMoveDown}
-        contextType='thread'
       />
     );
   }