diff --git a/app/soapbox/features/admin/awaiting_approval.js b/app/soapbox/features/admin/awaiting_approval.js
deleted file mode 100644
index 03a7d5a05..000000000
--- a/app/soapbox/features/admin/awaiting_approval.js
+++ /dev/null
@@ -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 (
-
- {accountIds.map(id => (
-
- ))}
-
- );
- }
-
-}
diff --git a/app/soapbox/features/admin/awaiting_approval.tsx b/app/soapbox/features/admin/awaiting_approval.tsx
new file mode 100644
index 000000000..2dc608c5c
--- /dev/null
+++ b/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 (
+
+ {accountIds.map(id => (
+
+ ))}
+
+ );
+};
+
+export default AwaitingApproval;