create api

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

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import apiErrorHandler from '../../../util/apiErrorHandler';
+
 class UserGroupCreateForm extends React.Component {
 
   constructor(props) {
@@ -11,11 +13,12 @@ class UserGroupCreateForm extends React.Component {
       name: '',
     };
 
-    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
     this.validateForm = this.validateForm.bind(this);
   }
 
-  handleInputChange(event) {
+  handleChange(event) {
     const target = event.target;
     const value = target.type === 'checkbox' ? target.checked : target.value;
     const name = target.name;
@@ -26,23 +29,24 @@ class UserGroupCreateForm extends React.Component {
   }
 
   async handleSubmit(e) {
-    // e.preventDefault();
-
-    // try {
-    //   const res = await this.props.crowi.apiGet('/bookmarks.get', { page_id: this.props.pageId });
-
-    //   if (res.ok) {
-    //     groups = res.userGroups;
-
-    //     this.props.addGroup();
-    //   }
-    //   else {
-    //     throw new Error('Unable to create a group');
-    //   }
-    // }
-    // catch (err) {
-    //   this.handleError(err);
-    // }
+    e.preventDefault();
+
+    try {
+      const res = await this.props.crowi.apiPost('/v3/user-groups/create', {
+        name: this.state.name,
+      });
+
+      if (res.ok) {
+        const { userGroup } = res;
+        this.props.onCreate(userGroup);
+      }
+      else {
+        throw new Error('Unable to create a group');
+      }
+    }
+    catch (err) {
+      apiErrorHandler(err);
+    }
   }
 
   validateForm() {
@@ -76,7 +80,7 @@ class UserGroupCreateForm extends React.Component {
                 className="form-control"
                 placeholder={t('user_group_management.group_example')}
                 value={this.state.name}
-                onChange={this.handleInputChange}
+                onChange={this.handleChange}
               >
               </textarea>
             </div>
@@ -94,7 +98,7 @@ UserGroupCreateForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   crowi: PropTypes.object.isRequired,
   isAclEnabled: PropTypes.bool,
-  addGroup: PropTypes.func.isRequired,
+  onCreate: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(UserGroupCreateForm);

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

@@ -44,9 +44,6 @@ class UserGroupDeleteModal extends React.Component {
 
     this.state = this.initialState;
 
-    // logger
-    this.logger = require('@alias/logger')('growi:GroupDeleteModal:GroupDeleteModal');
-
     // retrieve xss library from window
     this.xss = window.xss;
 

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

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
-import * as toastr from 'toastr';
-
 import UserGroupTable from './UserGroupTable';
 import UserGroupCreateForm from './UserGroupCreateForm';
 import UserGroupDeleteModal from './UserGroupDeleteModal';
 
+import apiErrorHandler from '../../../util/apiErrorHandler';
+
 class UserGroupPage extends React.Component {
 
   constructor(props) {
@@ -20,7 +20,8 @@ class UserGroupPage extends React.Component {
 
     this.showDeleteModal = this.showDeleteModal.bind(this);
     this.hideDeleteModal = this.hideDeleteModal.bind(this);
-    this.addGroup = this.addGroup.bind(this);
+    this.addUserGroup = this.addUserGroup.bind(this);
+    this.removeUserGroupAt = this.removeUserGroupAt.bind(this);
   }
 
   async showDeleteModal(group) {
@@ -39,20 +40,28 @@ class UserGroupPage extends React.Component {
     });
   }
 
-  addGroup(newUserGroup) {
+  addUserGroup(newUserGroup) {
     this.setState((prevState) => {
       return {
         userGroups: [...prevState.userGroups, newUserGroup],
-        isDeleteModalShow: false,
       };
     });
   }
 
+  removeUserGroupAt(index) {
+    // this.setState((prevState) => {
+    //   return {
+    //     userGroups: [...prevState.userGroups, newUserGroup],
+    //     isDeleteModalShow: false,
+    //   };
+    // });
+  }
+
   async syncUserGroupState() {
     let userGroups = [];
 
     try {
-      const res = await this.props.crowi.apiGet('/admin/user-groups');
+      const res = await this.props.crowi.apiGet('/v3/user-groups');
       if (res.ok) {
         userGroups = res.userGroups;
       }
@@ -61,31 +70,19 @@ class UserGroupPage extends React.Component {
       }
     }
     catch (err) {
-      this.handleError(err);
+      apiErrorHandler(err);
     }
 
     this.setState({ userGroups });
   }
 
-  handleError(err) {
-    this.logger.error(err);
-    toastr.error(err, 'Error occured', {
-      closeButton: true,
-      progressBar: true,
-      newestOnTop: false,
-      showDuration: '100',
-      hideDuration: '100',
-      timeOut: '3000',
-    });
-  }
-
   render() {
     return (
       <Fragment>
         <UserGroupCreateForm
           crowi={this.props.crowi}
           isAclEnabled={this.props.isAclEnabled}
-          addGroup={this.addGroup}
+          onCreate={this.addUserGroup}
         />
         <UserGroupTable
           crowi={this.props.crowi}

src/client/js/util/apiErrorHandler.js

@@ -0,0 +1,18 @@
+import * as toastr from 'toastr';
+
+const logger = require('@alias/logger')('growi');
+
+const apiErrorHandler = (err) => {
+  logger.error(err);
+
+  toastr.error(err, 'Error occured', {
+    closeButton: true,
+    progressBar: true,
+    newestOnTop: false,
+    showDuration: '100',
+    hideDuration: '100',
+    timeOut: '3000',
+  });
+};
+
+export default apiErrorHandler;

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

@@ -15,7 +15,7 @@ module.exports = (crowi) => {
     }
     catch (err) {
       logger.error('Error', err);
-      return res.json(ApiResponse.error('Error occurred in fetching user-groups'));
+      return res.json(ApiResponse.error('Error occurred in fetching user groups'));
     }
   };
 
@@ -23,6 +23,17 @@ module.exports = (crowi) => {
   // };
 
   api.create = async(req, res) => {
+    const { name } = req.body;
+    try {
+      const userGroupName = crowi.xss.process(name);
+      const newUserGroup = await UserGroup.createGroupByName(userGroupName);
+
+      return res.json(ApiResponse.success({ userGroup: newUserGroup }));
+    }
+    catch (err) {
+      logger.error('Error', err);
+      return res.json(ApiResponse.error('Error occurred in creating a user group'));
+    }
   };
 
   // api.update = async(req, res) => {

src/server/routes/apiv3/index.js

@@ -15,6 +15,10 @@ module.exports = (crowi) => {
   router.use('/healthcheck', require('./healthcheck')(crowi));
 
   router.get('/user-groups', loginRequired(crowi), adminRequired(), adminUserGroup.find);
+  // router.get('/user-groups/:id', loginRequired(crowi), adminRequired(), adminUserGroup.findOne);
+  router.post('/user-groups/create', loginRequired(crowi), adminRequired(), adminUserGroup.create);
+  // router.post('/user-groups/update/:id', loginRequired(crowi), adminRequired(), adminUserGroup.update);
+  router.post('/user-groups/delete/:id', loginRequired(crowi), adminRequired(), adminUserGroup.delete);
 
   return router;
 };