Convert QuotedStatus containers to TSX

app/soapbox/components/status.tsx

@@ -422,7 +422,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
           </div>
         );
       } else {
-        quote = <QuotedStatus statusId={status.quote} />;
+        quote = <QuotedStatus statusId={status.quote as string} />;
       }
     }
 

app/soapbox/features/compose/containers/quoted_status_container.js

@@ -1,26 +0,0 @@
-import { connect } from 'react-redux';
-
-import { cancelQuoteCompose } from 'soapbox/actions/compose';
-import QuotedStatus from 'soapbox/features/status/components/quoted_status';
-import { makeGetStatus } from 'soapbox/selectors';
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = state => ({
-    status: getStatus(state, { id: state.getIn(['compose', 'quote']) }),
-    compose: true,
-  });
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = dispatch => ({
-
-  onCancel() {
-    dispatch(cancelQuoteCompose());
-  },
-
-});
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(QuotedStatus);

app/soapbox/features/compose/containers/quoted_status_container.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { cancelQuoteCompose } from 'soapbox/actions/compose';
+import QuotedStatus from 'soapbox/features/status/components/quoted_status';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+const getStatus = makeGetStatus();
+
+/** QuotedStatus shown in post composer. */
+const QuotedStatusContainer: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const status = useAppSelector(state => getStatus(state, { id: state.compose.get('quote') }));
+
+  const onCancel = () => {
+    dispatch(cancelQuoteCompose());
+  };
+
+  if (!status) {
+    return null;
+  }
+
+  return (
+    <QuotedStatus
+      status={status}
+      onCancel={onCancel}
+      compose
+    />
+  );
+};
+
+export default QuotedStatusContainer;

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

@@ -116,7 +116,7 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
           </div>
         );
       } else {
-        quote = <QuotedStatus statusId={status.quote} />;
+        quote = <QuotedStatus statusId={status.quote as string} />;
       }
     }
 

app/soapbox/features/status/containers/quoted_status_container.js

@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-
-import { makeGetStatus } from 'soapbox/selectors';
-
-import QuotedStatus from '../components/quoted_status';
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = (state, { statusId }) => ({
-    status: getStatus(state, { id: statusId }),
-  });
-
-  return mapStateToProps;
-};
-
-export default connect(makeMapStateToProps)(QuotedStatus);

app/soapbox/features/status/containers/quoted_status_container.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+import QuotedStatus from '../components/quoted_status';
+
+const getStatus = makeGetStatus();
+
+interface IQuotedStatusContainer {
+  /** Status ID to the quoted status. */
+  statusId: string,
+}
+
+const QuotedStatusContainer: React.FC<IQuotedStatusContainer> = ({ statusId }) => {
+  const status = useAppSelector(state => getStatus(state, { id: statusId }));
+
+  if (!status) {
+    return null;
+  }
+
+  return (
+    <QuotedStatus
+      status={status}
+    />
+  );
+};
+
+export default QuotedStatusContainer;

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

@@ -83,7 +83,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
 
             {status.poll && <PollPreview poll={status.poll} />}
 
-            {status.quote && <QuotedStatus statusId={status.quote} />}
+            {status.quote && <QuotedStatus statusId={status.quote as string} />}
           </div>
 
           {/* TODO */}