remove user

src/client/js/components/Admin/Users/UserMenu.jsx

@@ -49,7 +49,7 @@ class UserMenu extends React.Component {
             <li>
               {(user.status === 1 || user.status === 3) && <StatusActivateForm user={user} />}
               {user.status === 2 && <StatusSuspendedForm user={user} />}
-              {(user.status === 1 || user.status === 3 || user.status === 5) && <RemoveUserButton user={user} removeUser={this.props.removeUser} />}
+              {(user.status === 1 || user.status === 3 || user.status === 5) && <RemoveUserButton user={user} />}
             </li>
             <li className="divider pl-0"></li>
             <li className="dropdown-header">{ t('user_management.administrator_menu') }</li>
@@ -75,7 +75,6 @@ UserMenu.propTypes = {
   usersContainer: PropTypes.instanceOf(UsersContainer).isRequired,
 
   user: PropTypes.object.isRequired,
-  removeUser: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(UserMenuWrapper);

src/client/js/components/Admin/Users/UserRemoveButton.jsx

@@ -4,6 +4,8 @@ import { withTranslation } from 'react-i18next';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
+import UsersContainer from '../../../services/UsersContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 class UserRemoveButton extends React.Component {
 
@@ -13,8 +15,14 @@ class UserRemoveButton extends React.Component {
     this.onClickDeleteBtn = this.onClickDeleteBtn.bind(this);
   }
 
-  onClickDeleteBtn() {
-    this.props.removeUser(this.props.user);
+  async onClickDeleteBtn() {
+    try {
+      const username = await this.props.usersContainer.removeUser(this.props.user._id);
+      toastSuccess(`Delete ${username} success`);
+    }
+    catch (err) {
+      toastError(err);
+    }
   }
 
   render() {
@@ -33,15 +41,15 @@ class UserRemoveButton extends React.Component {
  * Wrapper component for using unstated
  */
 const UserRemoveButtonWrapper = (props) => {
-  return createSubscribedElement(UserRemoveButton, props, [AppContainer]);
+  return createSubscribedElement(UserRemoveButton, props, [AppContainer, UsersContainer]);
 };
 
 UserRemoveButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  usersContainer: PropTypes.instanceOf(UsersContainer).isRequired,
 
   user: PropTypes.object.isRequired,
-  removeUser: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(UserRemoveButtonWrapper);

src/client/js/components/Admin/Users/UserTable.jsx

@@ -62,7 +62,7 @@ class UserTable extends React.Component {
   }
 
   render() {
-    const { t } = this.props;
+    const { t, usersContainer } = this.props;
 
     return (
       <Fragment>
@@ -82,7 +82,7 @@ class UserTable extends React.Component {
             </tr>
           </thead>
           <tbody>
-            {this.props.users.map((user) => {
+            {usersContainer.state.users.map((user) => {
               return (
                 <tr key={user._id}>
                   <td>
@@ -100,7 +100,7 @@ class UserTable extends React.Component {
                     { user.lastLoginAt && <span>{dateFnsFormat(new Date(user.lastLoginAt), 'yyyy-MM-dd HH:mm')}</span> }
                   </td>
                   <td>
-                    <UserMenu user={user} removeUser={this.props.removeUser} />
+                    <UserMenu user={user} />
                   </td>
                 </tr>
               );
@@ -122,8 +122,6 @@ UserTable.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   usersContainer: PropTypes.instanceOf(UsersContainer).isRequired,
 
-  users: PropTypes.array.isRequired,
-  removeUser: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(UserTableWrapper);

src/client/js/components/Admin/Users/Users.jsx

@@ -2,8 +2,6 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { toastSuccess, toastError } from '../../../util/apiNotification';
-
 import PasswordResetModal from './PasswordResetModal';
 import PaginationWrapper from '../../PaginationWrapper';
 import InviteUserControl from './InviteUserControl';
@@ -23,21 +21,6 @@ class UserPage extends React.Component {
       pagingLimit: Infinity,
     };
 
-    this.removeUser = this.removeUser.bind(this);
-  }
-
-  async removeUser(user) {
-
-    const { appContainer } = this.props;
-
-    try {
-      const response = await appContainer.apiv3.delete(`/users/${user._id}/remove`);
-      const { username } = response.data.userData;
-      toastSuccess(`Delete ${username} success`);
-    }
-    catch (err) {
-      toastError(err);
-    }
   }
 
   render() {
@@ -53,10 +36,7 @@ class UserPage extends React.Component {
             { t('user_management.external_account') }
           </a>
         </p>
-        <UserTable
-          users={usersContainer.state.users}
-          removeUser={this.removeUser}
-        />
+        <UserTable />
         <PaginationWrapper
           activePage={this.state.activePage}
           changePage={this.handlePage} // / TODO GW-314 create function

src/client/js/services/UsersContainer.js

@@ -57,9 +57,22 @@ export default class UsersContainer extends Container {
 
   /**
    * toggle user invite modal
+   * @memberOf UsersContainer
    */
   async toggleUserInviteModal() {
     await this.setState({ isUserInviteModalShown: !this.state.isUserInviteModalShown });
   }
 
+  /**
+   * remove user
+   * @memberOf UsersContainer
+   * @param {string} userId
+   * @return {string} username
+   */
+  async removeUser(userId) {
+    const response = await this.appContainer.apiv3.delete(`/users/${userId}/remove`);
+    const { username } = response.data.userData;
+    return username;
+  }
+
 }