QuotedStatus: convert to FC

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

@@ -1,9 +1,7 @@
 import classNames from 'classnames';
-import { History } from 'history';
 import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
-import { defineMessages, injectIntl, FormattedMessage, IntlShape, FormattedList } from 'react-intl';
+import { useHistory } from 'react-router-dom';
-import { withRouter } from 'react-router-dom';
 
 import StatusMedia from 'soapbox/components/status-media';
 import { Stack, Text } from 'soapbox/components/ui';
@@ -16,49 +14,42 @@ const messages = defineMessages({
 });
 
 interface IQuotedStatus {
+  /** The quoted status entity. */
   status?: StatusEntity,
+  /** Callback when cancelled (during compose). */
   onCancel?: Function,
-  intl: IntlShape,
+  /** Whether the status is shown in the post composer. */
   compose?: boolean,
-  history: History,
 }
 
-class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
+/** Status embedded in a quote post. */
-
+const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) => {
-  handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  const intl = useIntl();
-    const { compose, status } = this.props;
+  const history = useHistory();
 
+  const handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!status) return;
-
     const account = status.account as AccountEntity;
 
     if (!compose && e.button === 0) {
-      if (!this.props.history) {
+      history.push(`/@${account.acct}/posts/${status.id}`);
-        return;
-      }
-
-      this.props.history.push(`/@${account.acct}/posts/${status.id}`);
-
       e.stopPropagation();
       e.preventDefault();
     }
-  }
+  };
 
-  handleClose = () => {
+  const handleClose = () => {
-    if (this.props.onCancel) {
+    if (onCancel) {
-      this.props.onCancel();
+      onCancel();
-    }
     }
+  };
 
-  renderReplyMentions = () => {
+  const renderReplyMentions = () => {
-    const { status } = this.props;
-
     if (!status?.in_reply_to_id) {
       return null;
     }
 
     const account = status.account as AccountEntity;
-
     const to = status.mentions || [];
 
     if (to.size === 0) {
@@ -102,10 +93,7 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
         />
       </div>
     );
-  }
+  };
-
-  render() {
-    const { status, onCancel, intl, compose } = this.props;
 
   if (!status) {
     return null;
@@ -116,20 +104,20 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
   let actions = {};
   if (onCancel) {
     actions = {
-        onActionClick: this.handleClose,
+      onActionClick: handleClose,
       actionIcon: require('@tabler/icons/icons/x.svg'),
       actionAlignment: 'top',
       actionTitle: intl.formatMessage(messages.cancel),
     };
   }
 
-    const quotedStatus = (
+  return (
     <Stack
       space={2}
       className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-100 dark:border-slate-700 cursor-pointer', {
         'hover:bg-gray-50 dark:hover:bg-slate-700': !compose,
       })}
-        onClick={this.handleExpandClick}
+      onClick={handleExpandClick}
     >
       <AccountContainer
         {...actions}
@@ -139,7 +127,7 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
         showProfileHoverCard={!compose}
       />
 
-        {this.renderReplyMentions()}
+      {renderReplyMentions()}
 
       <Text
         className='break-words'
@@ -150,10 +138,6 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
       <StatusMedia status={status} />
     </Stack>
   );
+};
 
-    return quotedStatus;
+export default QuotedStatus;
-  }
-
-}
-
-export default withRouter(injectIntl(QuotedStatus) as any);