Admin: make awaiting approval actions work

app/soapbox/features/admin/awaiting_approval.js

@@ -5,16 +5,18 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Column from '../ui/components/column';
-import { fetchUsers } from 'soapbox/actions/admin';
+import IconButton from 'soapbox/components/icon_button';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { fetchUsers, deleteUsers, approveUsers } from 'soapbox/actions/admin';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.awaiting_approval', defaultMessage: 'Awaiting Approval' },
 });
 
 const mapStateToProps = state => {
-  const userIds = state.getIn(['admin', 'awaitingApproval']);
+  const nicknames = state.getIn(['admin', 'awaitingApproval']);
   return {
-    users: userIds.map(id => state.getIn(['admin', 'users', id])),
+    users: nicknames.toList().map(nickname => state.getIn(['admin', 'users', nickname])),
   };
 };
 
@@ -27,18 +29,52 @@ class AwaitingApproval extends ImmutablePureComponent {
     users: ImmutablePropTypes.list.isRequired,
   };
 
+  state = {
+    isLoading: true,
+  }
+
   componentDidMount() {
-    this.props.dispatch(fetchUsers({ page: 1, filters: 'local,need_approval' }));
+    const { dispatch } = this.props;
+    const params = { page: 1, filters: 'local,need_approval' };
+    dispatch(fetchUsers(params))
+      .then(() => this.setState({ isLoading: false }))
+      .catch(() => {});
+  }
+
+  handleApprove = nickname => {
+    const { dispatch } = this.props;
+    return e => {
+      dispatch(approveUsers([nickname]));
+    };
+  }
+
+  handleReject = nickname => {
+    const { dispatch } = this.props;
+    return e => {
+      dispatch(deleteUsers([nickname]));
+    };
   }
 
   render() {
     const { intl, users } = this.props;
+    const { isLoading } = this.state;
 
     return (
       <Column icon='user' heading={intl.formatMessage(messages.heading)} backBtnSlim>
-        {users.map((user, i) => (
-          <div key={i}>{user.get('nickname')}</div>
-        ))}
+        <ScrollableList isLoading={isLoading} showLoading={isLoading} scrollKey='awaiting-approval'>
+          {users.map((user, i) => (
+            <div className='unapproved-account' key={user.get('id')}>
+              <div className='unapproved-account__bio'>
+                <div className='unapproved-account__nickname'>@{user.get('nickname')}</div>
+                <blockquote className='unapproved-account__reason'>{user.get('registration_reason')}</blockquote>
+              </div>
+              <div className='unapproved-account__actions'>
+                <IconButton icon='check' onClick={this.handleApprove(user.get('nickname'))} />
+                <IconButton icon='close' onClick={this.handleReject(user.get('nickname'))} />
+              </div>
+            </div>
+          ))}
+        </ScrollableList>
       </Column>
     );
   }