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;