UserGroupEditForm and usergroup update apiv3

src/client/js/app.jsx

@@ -153,12 +153,13 @@ const adminUserGroupDetailElem = document.getElementById('admin-user-group-detai
 if (adminUserGroupDetailElem != null) {
   const userGroup = JSON.parse(adminUserGroupDetailElem.getAttribute('data-user-group'));
   ReactDOM.render(
-    <I18nextProvider i18n={i18n}>
-      <UserGroupDetailPage
-        crowi={crowi}
-        userGroup={userGroup}
-      />
-    </I18nextProvider>,
+    <Provider inject={[]}>
+      <I18nextProvider i18n={i18n}>
+        <UserGroupDetailPage
+          userGroup={userGroup}
+        />
+      </I18nextProvider>
+    </Provider>,
     adminUserGroupDetailElem,
   );
 }

src/client/js/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx

@@ -17,7 +17,6 @@ class UserGroupDetailPage extends React.Component {
         グループ一覧に戻る
         </a>
         <UserGroupEditForm
-          crowi={this.props.crowi}
           userGroup={this.props.userGroup}
         />
         <UserGroupUserTable />
@@ -30,7 +29,6 @@ class UserGroupDetailPage extends React.Component {
 }
 
 UserGroupDetailPage.propTypes = {
-  crowi: PropTypes.object.isRequired,
   userGroup: PropTypes.object.isRequired,
 };
 

src/client/js/components/Admin/UserGroupDetail/UserGroupEditForm.jsx

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
 
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
 class UserGroupEditForm extends React.Component {
 
   constructor(props) {
@@ -12,6 +16,8 @@ class UserGroupEditForm extends React.Component {
       name: props.userGroup.name,
     };
 
+    this.xss = window.xss;
+
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.validateForm = this.validateForm.bind(this);
@@ -29,22 +35,17 @@ class UserGroupEditForm extends React.Component {
 
   async handleSubmit(e) {
     e.preventDefault();
-    alert(`new name is ${this.state.name}`);
-    this.setState({ name: '' });
-
-    // try {
-    //   // action="/admin/user-group/{{userGroup.id}}/update"
-    //   const res = await this.props.crowi.apiGet('/admin/user-groups');
-    //   if (res.ok) {
-    //     groups = res.userGroups;
-    //   }
-    //   else {
-    //     throw new Error('Unable to fetch groups from server');
-    //   }
-    // }
-    // catch (err) {
-    //   this.handleError(err);
-    // }
+
+    try {
+      const res = await this.props.appContainer.apiv3.put(`/user-groups/${this.props.userGroup._id}`, {
+        name: this.state.name,
+      });
+
+      toastSuccess(`Updated the group name to "${this.xss.process(res.data.userGroup.name)}"`);
+    }
+    catch (err) {
+      toastError(new Error('Unable to update the group name'));
+    }
   }
 
   validateForm() {
@@ -87,7 +88,15 @@ class UserGroupEditForm extends React.Component {
 
 UserGroupEditForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   userGroup: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(UserGroupEditForm);
+/**
+ * Wrapper component for using unstated
+ */
+const UserGroupEditFormWrapper = (props) => {
+  return createSubscribedElement(UserGroupEditForm, props, [AppContainer]);
+};
+
+export default withTranslation()(UserGroupEditFormWrapper);

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

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 
 import Modal from 'react-bootstrap/es/Modal';
 
-import toastError from '../../../util/apiNotification';
+import { toastError } from '../../../util/apiNotification';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 

src/server/models/user-group.js

@@ -118,10 +118,10 @@ class UserGroup {
   }
 
   // グループ名の更新
-  updateName(name) {
+  async updateName(name) {
     // 名前を設定して更新
     this.name = name;
-    return this.save();
+    await this.save();
   }
 
 }

src/server/routes/admin.js

@@ -716,41 +716,6 @@ module.exports = function(crowi, app) {
     return res.render('admin/user-group-detail', renderVar);
   };
 
-  //
-  actions.userGroup.update = function(req, res) {
-    const userGroupId = req.params.userGroupId;
-    const name = crowi.xss.process(req.body.name);
-
-    UserGroup.findById(userGroupId)
-      .then((userGroupData) => {
-        if (userGroupData == null) {
-          req.flash('errorMessage', 'グループの検索に失敗しました。');
-          return new Promise();
-        }
-
-        // 名前存在チェック
-        return UserGroup.isRegisterableName(name)
-          .then((isRegisterableName) => {
-          // 既に存在するグループ名に更新しようとした場合はエラー
-            if (!isRegisterableName) {
-              req.flash('errorMessage', 'グループ名が既に存在します。');
-            }
-            else {
-              return userGroupData.updateName(name)
-                .then(() => {
-                  req.flash('successMessage', 'グループ名を更新しました。');
-                })
-                .catch((err) => {
-                  req.flash('errorMessage', 'グループ名の更新に失敗しました。');
-                });
-            }
-          });
-      })
-      .then(() => {
-        return res.redirect(`/admin/user-group-detail/${userGroupId}`);
-      });
-  };
-
   actions.userGroupRelation = {};
   actions.userGroupRelation.index = function(req, res) {
 

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

@@ -175,9 +175,37 @@ module.exports = (crowi) => {
   // router.get('/:id', async(req, res) => {
   // });
 
+  validator.update = [
+    body('name', 'Group name is required').trim().exists(),
+  ];
+
   // update one group with the id
-  // router.put('/:id/update', async(req, res) => {
-  // });
+  router.put('/:id', loginRequired(), adminRequired, csrf, validator.update, ApiV3FormValidator, async(req, res) => {
+    const { id } = req.params;
+    const { name } = req.body;
+
+    try {
+      const userGroup = await UserGroup.findById(id);
+      if (userGroup == null) {
+        throw new Error('The group does not exist');
+      }
+
+      // check if the new group name is available
+      const isRegisterableName = await UserGroup.isRegisterableName(name);
+      if (!isRegisterableName) {
+        throw new Error('The group name is already taken');
+      }
+
+      await userGroup.updateName(name);
+
+      res.apiv3({ userGroup });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating a user group name';
+      logger.error(msg, err);
+      return res.apiv3Err(new ErrorV3(msg, 'user-group-update-failed'));
+    }
+  });
 
   /**
    * @swagger

src/server/routes/index.js

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