delete api

src/client/js/components/Admin/UserGroup/UserGroupDeleteModal.jsx

@@ -49,8 +49,9 @@ class UserGroupDeleteModal extends React.Component {
 
     this.onHide = this.onHide.bind(this);
     this.getGroupName = this.getGroupName.bind(this);
-    this.changeActionHandler = this.changeActionHandler.bind(this);
-    this.changeGroupHandler = this.changeGroupHandler.bind(this);
+    this.handleActionChange = this.handleActionChange.bind(this);
+    this.handleGroupChange = this.handleGroupChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
     this.renderPageActionSelector = this.renderPageActionSelector.bind(this);
     this.renderGroupSelector = this.renderGroupSelector.bind(this);
     this.validateForm = this.validateForm.bind(this);
@@ -65,16 +66,26 @@ class UserGroupDeleteModal extends React.Component {
     return this.xss.process(group.name);
   }
 
-  changeActionHandler(e) {
+  handleActionChange(e) {
     const actionName = e.target.value;
     this.setState({ actionName });
   }
 
-  changeGroupHandler(e) {
+  handleGroupChange(e) {
     const transferToUserGroupId = e.target.value;
     this.setState({ transferToUserGroupId });
   }
 
+  handleSubmit(e) {
+    e.preventDefault();
+
+    this.props.onDelete({
+      deleteGroupId: this.props.deleteUserGroup._id,
+      actionName: this.state.actionName,
+      transferToUserGroupId: this.state.transferToUserGroupId,
+    });
+  }
+
   renderPageActionSelector() {
     const { t } = this.props;
 
@@ -89,7 +100,7 @@ class UserGroupDeleteModal extends React.Component {
         className="form-control"
         placeholder="select"
         value={this.state.actionName}
-        onChange={this.changeActionHandler}
+        onChange={this.handleActionChange}
       >
         <option value="" disabled>{t('user_group_management.choose_action')}</option>
         {optoins}
@@ -116,7 +127,7 @@ class UserGroupDeleteModal extends React.Component {
         name="transferToUserGroupId"
         className={`form-control ${this.state.actionName === this.actionForPages.transfer ? '' : 'd-none'}`}
         value={this.state.transferToUserGroupId}
-        onChange={this.changeGroupHandler}
+        onChange={this.handleGroupChange}
       >
         <option value="" disabled>{defaultOptionText}</option>
         {options}
@@ -156,14 +167,11 @@ class UserGroupDeleteModal extends React.Component {
           </div>
         </Modal.Body>
         <Modal.Footer>
-          <form action="/admin/user-group.remove" method="post" id="admin-user-groups-delete" className="d-flex justify-content-between">
+          <form className="d-flex justify-content-between" onSubmit={this.handleSubmit}>
             <div className="d-flex">
               {this.renderPageActionSelector()}
               {this.renderGroupSelector()}
             </div>
-            {/* keep these two hidden inputs controlled */}
-            <input type="hidden" id="deleteGroupId" name="deleteGroupId" value={this.props.deleteUserGroup._id || ''} onChange={() => {}} />
-            <input type="hidden" name="_csrf" value={this.props.crowi.csrfToken} onChange={() => {}} />
             <button type="submit" value="" className="btn btn-sm btn-danger" disabled={!this.validateForm()}>
               <i className="icon icon-fire"></i> {t('Delete')}
             </button>
@@ -180,6 +188,7 @@ UserGroupDeleteModal.propTypes = {
   crowi: PropTypes.object.isRequired,
   userGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
   deleteUserGroup: PropTypes.object,
+  onDelete: PropTypes.func.isRequired,
   isShow: PropTypes.bool.isRequired,
   onShow: PropTypes.func.isRequired,
   onHide: PropTypes.func.isRequired,

src/client/js/components/Admin/UserGroup/UserGroupPage.jsx

@@ -22,7 +22,7 @@ class UserGroupPage extends React.Component {
     this.showDeleteModal = this.showDeleteModal.bind(this);
     this.hideDeleteModal = this.hideDeleteModal.bind(this);
     this.addUserGroup = this.addUserGroup.bind(this);
-    this.removeUserGroupAt = this.removeUserGroupAt.bind(this);
+    this.deleteUserGroupById = this.deleteUserGroupById.bind(this);
   }
 
   async showDeleteModal(group) {
@@ -54,13 +54,36 @@ class UserGroupPage extends React.Component {
     });
   }
 
-  removeUserGroupAt(index) {
-    // this.setState((prevState) => {
-    //   return {
-    //     userGroups: [...prevState.userGroups, newUserGroup],
-    //     isDeleteModalShow: false,
-    //   };
-    // });
+  async deleteUserGroupById({ deleteGroupId, actionName, transferToUserGroupId }) {
+    try {
+      const res = await this.props.crowi.apiPost(`/v3/user-groups/delete/${deleteGroupId}`, {
+        actionName,
+        transferToUserGroupId,
+      });
+
+      if (res.ok) {
+        this.setState((prevState) => {
+          const userGroups = prevState.userGroups.filter((userGroup) => {
+            return userGroup._id !== deleteGroupId;
+          });
+
+          delete prevState.userGroupRelations[deleteGroupId];
+
+          return {
+            userGroups,
+            userGroupRelations: prevState.userGroupRelations,
+            selectedUserGroup: undefined,
+            isDeleteModalShow: false,
+          };
+        });
+      }
+      else {
+        throw new Error('Unable to create a group');
+      }
+    }
+    catch (err) {
+      apiErrorHandler(err);
+    }
   }
 
   async syncUserGroupAndRelations() {
@@ -111,6 +134,7 @@ class UserGroupPage extends React.Component {
           crowi={this.props.crowi}
           userGroups={this.state.userGroups}
           deleteUserGroup={this.state.selectedUserGroup}
+          onDelete={this.deleteUserGroupById}
           isShow={this.state.isDeleteModalShow}
           onShow={this.showDeleteModal}
           onHide={this.hideDeleteModal}

src/server/routes/admin.js

@@ -762,23 +762,6 @@ module.exports = function(crowi, app) {
       });
   };
 
-
-  // app.post('/_api/admin/user-group/delete' , admin.userGroup.removeCompletely);
-  actions.userGroup.removeCompletely = async(req, res) => {
-    const { deleteGroupId, actionName, transferToUserGroupId } = req.body;
-
-    try {
-      await UserGroup.removeCompletelyById(deleteGroupId, actionName, transferToUserGroupId);
-      req.flash('successMessage', '削除しました');
-    }
-    catch (err) {
-      debug('Error while removing userGroup.', err, deleteGroupId);
-      req.flash('errorMessage', '完全な削除に失敗しました。');
-    }
-
-    return res.redirect('/admin/user-groups');
-  };
-
   actions.userGroupRelation = {};
   actions.userGroupRelation.index = function(req, res) {
 

src/server/routes/apiv3/user-group.js

@@ -37,8 +37,9 @@ module.exports = (crowi) => {
       return res.json(ApiResponse.success(data));
     }
     catch (err) {
-      logger.error('Error', err);
-      return res.json(ApiResponse.error('Error occurred in creating a user group'));
+      const msg = 'Error occurred in creating a user group';
+      logger.error(msg, err);
+      return res.json(ApiResponse.error(msg));
     }
   };
 
@@ -46,6 +47,18 @@ module.exports = (crowi) => {
   // };
 
   api.delete = async(req, res) => {
+    const { id: deleteGroupId } = req.params;
+    const { actionName, transferToUserGroupId } = req.body;
+    try {
+      await UserGroup.removeCompletelyById(deleteGroupId, actionName, transferToUserGroupId);
+
+      return res.json(ApiResponse.success());
+    }
+    catch (err) {
+      const msg = 'Error occurred in deleting a user group';
+      logger.error(msg, err);
+      return res.json(ApiResponse.error(msg));
+    }
   };
 
   return api;

src/server/routes/index.js

@@ -141,7 +141,6 @@ module.exports = function(crowi, app) {
   app.get('/admin/user-groups'             , loginRequired(crowi, app), middleware.adminRequired(), admin.userGroup.index);
   app.get('/admin/user-group-detail/:id'          , loginRequired(crowi, app), middleware.adminRequired(), admin.userGroup.detail);
   app.post('/admin/user-group/:userGroupId/update', loginRequired(crowi, app), middleware.adminRequired(), csrf, admin.userGroup.update);
-  app.post('/admin/user-group.remove' , loginRequired(crowi, app), middleware.adminRequired(), csrf, admin.userGroup.removeCompletely);
 
   // user-group-relations admin
   app.post('/admin/user-group-relation/create', loginRequired(crowi, app), middleware.adminRequired(), csrf, admin.userGroupRelation.create);