Implement user deleting.

admin/src/components/UserDetail/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { view } from 'react-easy-state';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { Row, Col, Card, Button, Collapse, Popconfirm, Avatar, List } from 'antd';
+import { Row, Col, Card, Button, Collapse, Popconfirm, Avatar, List, message } from 'antd';
 import TextArea from 'antd/lib/input/TextArea';
 import store from 'src/store';
 import { Proposal, Comment, Contribution } from 'src/types';
@@ -20,9 +20,11 @@ type State = typeof STATE;
 class UserDetailNaked extends React.Component<Props, State> {
   state = STATE;
   rejectInput: null | TextArea = null;
+
   componentDidMount() {
     this.loadDetail();
   }
+  
   render() {
     const id = this.getIdFromQuery();
     const { userDetail: u, userDetailFetching } = store;
@@ -34,11 +36,16 @@ class UserDetailNaked extends React.Component<Props, State> {
     const renderDelete = () => (
       <Popconfirm
         onConfirm={this.handleDelete}
-        title="Delete user?"
-        okText="delete"
-        cancelText="cancel"
+        title={<>
+          Are you sure? Due to GDPR compliance,
+          <br/>
+          this <strong>cannot</strong> be undone.
+        </>}
+        okText="Delete"
+        cancelText="Cancel"
+        okType="danger"
       >
-        <Button icon="delete" block>
+        <Button icon="delete" type="danger" ghost block>
           Delete
         </Button>
       </Popconfirm>
@@ -197,9 +204,13 @@ class UserDetailNaked extends React.Component<Props, State> {
     store.fetchUserDetail(this.getIdFromQuery());
   };
 
-  private handleDelete = () => {
+  private handleDelete = async () => {
     if (!store.userDetail) return;
-    store.deleteUser(store.userDetail.userid);
+    await store.deleteUser(store.userDetail.userid);
+    if (store.userDeleted) {
+      message.success('Successfully deleted', 2);
+      this.props.history.replace('/users');
+    }
   };
 }
 

admin/src/components/Users/UserItem.tsx

@@ -1,27 +1,14 @@
 import React from 'react';
 import { view } from 'react-easy-state';
-import { Popconfirm, List, Avatar } from 'antd';
+import { List, Avatar } from 'antd';
 import { Link } from 'react-router-dom';
-import store from 'src/store';
 import { User } from 'src/types';
 import './UserItem.less';
 
 class UserItemNaked extends React.Component<User> {
   render() {
     const p = this.props;
-
-    const deleteAction = (
-      <Popconfirm
-        onConfirm={this.handleDelete}
-        title="Are you sure?"
-        okText="delete"
-        cancelText="cancel"
-      >
-        <div>delete</div>
-      </Popconfirm>
-    );
-    const viewAction = <Link to={`/users/${p.userid}`}>view</Link>;
-    const actions = [viewAction, deleteAction];
+    const actions = [<Link to={`/users/${p.userid}`} key="view">view</Link>];
 
     return (
       <List.Item key={p.userid} className="UserItem" actions={actions}>
@@ -39,9 +26,6 @@ class UserItemNaked extends React.Component<User> {
       </List.Item>
     );
   }
-  private handleDelete = () => {
-    store.deleteUser(this.props.userid);
-  };
 }
 
 const UserItem = view(UserItemNaked);

admin/src/store.ts

@@ -41,7 +41,7 @@ async function fetchUserDetail(id: number) {
   return data;
 }
 
-async function deleteUser(id: number | string) {
+async function deleteUser(id: number) {
   const { data } = await api.delete('/admin/users/' + id);
   return data;
 }
@@ -119,6 +119,8 @@ const app = store({
   users: [] as User[],
   userDetailFetching: false,
   userDetail: null as null | User,
+  userDeleting: false,
+  userDeleted: false,
 
   proposalsFetching: false,
   proposalsFetched: false,
@@ -204,13 +206,18 @@ const app = store({
     app.userDetailFetching = false;
   },
 
-  async deleteUser(id: string | number) {
+  async deleteUser(id: number) {
+    app.userDeleting = false;
+    app.userDeleted = false;
     try {
       await deleteUser(id);
-      app.users = app.users.filter(u => u.userid !== id && u.emailAddress !== id);
+      app.users = app.users.filter(u => u.userid !== id);
+      app.userDeleted = true;
+      app.userDetail = null;
     } catch (e) {
       handleApiError(e);
     }
+    app.userDeleting = false;
   },
 
   async fetchProposals(statusFilters?: PROPOSAL_STATUS[]) {

backend/grant/admin/views.py

@@ -66,11 +66,17 @@ def stats():
 # USERS
 
 
-@blueprint.route('/users/<id>', methods=['DELETE'])
+@blueprint.route('/users/<user_id>', methods=['DELETE'])
 @endpoint.api()
 @admin_auth_required
-def delete_user(id):
-    return {"message": "Not implemented."}, 400
+def delete_user(user_id):
+    user = User.query.filter(User.id == user_id).first()
+    if not user:
+        return {"message": "No user matching that id"}, 404
+
+    db.session.delete(user)
+    db.session.commit()
+    return None, 200
 
 
 @blueprint.route("/users", methods=["GET"])