AwaitingApproval: convert to TSX

app/soapbox/features/admin/awaiting_approval.js

@@ -1,61 +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 { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchUsers } from 'soapbox/actions/admin';
-import ScrollableList from 'soapbox/components/scrollable_list';
-
-import UnapprovedAccount from './components/unapproved_account';
-
-const messages = defineMessages({
-  heading: { id: 'column.admin.awaiting_approval', defaultMessage: 'Awaiting Approval' },
-  emptyMessage: { id: 'admin.awaiting_approval.empty_message', defaultMessage: 'There is nobody waiting for approval. When a new user signs up, you can review them here.' },
-});
-
-const mapStateToProps = state => ({
-  accountIds: state.getIn(['admin', 'awaitingApproval']),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class AwaitingApproval extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    accountIds: ImmutablePropTypes.orderedSet.isRequired,
-  };
-
-  state = {
-    isLoading: true,
-  }
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch(fetchUsers(['local', 'need_approval']))
-      .then(() => this.setState({ isLoading: false }))
-      .catch(() => {});
-  }
-
-  render() {
-    const { intl, accountIds } = this.props;
-    const { isLoading } = this.state;
-    const showLoading = isLoading && accountIds.count() === 0;
-
-    return (
-      <ScrollableList
-        isLoading={isLoading}
-        showLoading={showLoading}
-        scrollKey='awaiting-approval'
-        emptyMessage={intl.formatMessage(messages.emptyMessage)}
-      >
-        {accountIds.map(id => (
-          <UnapprovedAccount accountId={id} key={id} />
-        ))}
-      </ScrollableList>
-    );
-  }
-
-}

app/soapbox/features/admin/awaiting_approval.tsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { fetchUsers } from 'soapbox/actions/admin';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+
+import UnapprovedAccount from './components/unapproved_account';
+
+const messages = defineMessages({
+  heading: { id: 'column.admin.awaiting_approval', defaultMessage: 'Awaiting Approval' },
+  emptyMessage: { id: 'admin.awaiting_approval.empty_message', defaultMessage: 'There is nobody waiting for approval. When a new user signs up, you can review them here.' },
+});
+
+const AwaitingApproval: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const accountIds = useAppSelector(state => state.admin.awaitingApproval);
+
+  const [isLoading, setLoading] = useState(true);
+
+  useEffect(() => {
+    dispatch(fetchUsers(['local', 'need_approval']))
+      .then(() => setLoading(false))
+      .catch(() => {});
+  }, []);
+
+  const showLoading = isLoading && accountIds.count() === 0;
+
+  return (
+    <ScrollableList
+      isLoading={isLoading}
+      showLoading={showLoading}
+      scrollKey='awaiting-approval'
+      emptyMessage={intl.formatMessage(messages.emptyMessage)}
+    >
+      {accountIds.map(id => (
+        <UnapprovedAccount accountId={id} key={id} />
+      ))}
+    </ScrollableList>
+  );
+};
+
+export default AwaitingApproval;