multiple errors

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

@@ -36,24 +36,24 @@ class UserGroupCreateForm extends React.Component {
     e.preventDefault();
 
     try {
-      const res = await this.props.crowi.apiPost('/v3/user-groups/create', {
+      const res = await this.props.crowi.apiv3.post('/user-groups/create', {
         name: this.state.name,
       });
 
-      if (!res.ok) {
-        throw new Error(`Unable to create a group "${this.xss.process(this.state.name)}"`);
+      if (res.errors) {
+        return apiErrorHandler(res.errors);
       }
 
-      const userGroup = res.userGroup;
+      const userGroup = res.data.userGroup;
       const userGroupId = userGroup._id;
 
-      const res2 = await this.props.crowi.apiGet(`/v3/user-groups/${userGroupId}/users`);
+      const res2 = await this.props.crowi.apiv3.get(`/user-groups/${userGroupId}/users`);
 
-      if (!res2.ok) {
-        throw new Error(`Unable to fetch users for the new group "${this.xss.process(userGroup.name)}"`);
+      if (res2.errors) {
+        return apiErrorHandler(res.errors);
       }
 
-      const users = res2.users;
+      const { users } = res2.data;
 
       this.props.onCreate(userGroup, users);
 

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

@@ -60,35 +60,34 @@ class UserGroupPage extends React.Component {
 
   async deleteUserGroupById({ deleteGroupId, actionName, transferToUserGroupId }) {
     try {
-      const res = await this.props.crowi.apiPost(`/v3/user-groups/${deleteGroupId}/delete`, {
+      const res = await this.props.crowi.apiv3.post(`/user-groups/${deleteGroupId}/delete`, {
         actionName,
         transferToUserGroupId,
       });
 
-      if (res.ok) {
-        this.setState((prevState) => {
-          const userGroups = prevState.userGroups.filter((userGroup) => {
-            return userGroup._id !== deleteGroupId;
-          });
-
-          delete prevState.userGroupRelations[deleteGroupId];
+      if (res.errors) {
+        return apiErrorHandler(res.errors);
+      }
 
-          return {
-            userGroups,
-            userGroupRelations: prevState.userGroupRelations,
-            selectedUserGroup: undefined,
-            isDeleteModalShow: false,
-          };
+      this.setState((prevState) => {
+        const userGroups = prevState.userGroups.filter((userGroup) => {
+          return userGroup._id !== deleteGroupId;
         });
 
-        apiSuccessHandler(`Deleted a group "${this.xss.process(res.userGroup.name)}"`);
-      }
-      else {
-        throw new Error(`Unable to delete a group "${this.xss.process(res.userGroup.name)}"`);
-      }
+        delete prevState.userGroupRelations[deleteGroupId];
+
+        return {
+          userGroups,
+          userGroupRelations: prevState.userGroupRelations,
+          selectedUserGroup: undefined,
+          isDeleteModalShow: false,
+        };
+      });
+
+      apiSuccessHandler(`Deleted a group "${this.xss.process(res.data.userGroup.name)}"`);
     }
     catch (err) {
-      apiErrorHandler(err);
+      apiErrorHandler(new Error('Unable to delete the group'));
     }
   }
 
@@ -98,14 +97,18 @@ class UserGroupPage extends React.Component {
 
     try {
       const responses = await Promise.all([
-        this.props.crowi.apiGet('/v3/user-groups'),
-        this.props.crowi.apiGet('/v3/user-group-relations'),
+        this.props.crowi.apiv3.get('/user-groups'),
+        this.props.crowi.apiv3.get('/user-group-relations'),
       ]);
 
-      if (responses.reduce((isAllOk, res) => { return isAllOk && res.ok }, true)) {
+      const isAllOk = responses.reduce((isAllOk, res) => {
+        return isAllOk && !res.errors;
+      }, true);
+
+      if (isAllOk) {
         const [userGroupsRes, userGroupRelationsRes] = responses;
-        userGroups = userGroupsRes.userGroups;
-        userGroupRelations = userGroupRelationsRes.userGroupRelations;
+        userGroups = userGroupsRes.data.userGroups;
+        userGroupRelations = userGroupRelationsRes.data.userGroupRelations;
       }
       else {
         throw new Error('Unable to fetch groups from server');

src/client/js/util/Crowi.js

@@ -36,6 +36,12 @@ export default class Crowi {
     this.apiGet = this.apiGet.bind(this);
     this.apiPost = this.apiPost.bind(this);
     this.apiRequest = this.apiRequest.bind(this);
+    this.apiv3 = {
+      get: this.apiv3Get.bind(this),
+      post: this.apiv3Post.bind(this),
+      put: this.apiv3Put.bind(this),
+      delete: this.apiv3Delete.bind(this),
+    };
 
     this.interceptorManager = new InterceptorManager();
     this.interceptorManager.addInterceptor(new DetachCodeBlockInterceptor(this), 10); // process as soon as possible
@@ -294,4 +300,38 @@ export default class Crowi {
     });
   }
 
+  async apiv3Request(method, path, params) {
+    const res = await axios[method](`/_api/v3${path}`, params);
+
+    return res.data;
+  }
+
+  apiv3Get(path, params) {
+    return this.apiv3Request('get', path, { params });
+  }
+
+  apiv3Post(path, params) {
+    if (!params._csrf) {
+      params._csrf = this.csrfToken;
+    }
+
+    return this.apiv3Request('post', path, params);
+  }
+
+  apiv3Put(path, params) {
+    if (!params._csrf) {
+      params._csrf = this.csrfToken;
+    }
+
+    return this.apiv3Request('put', path, { params });
+  }
+
+  apiv3Delete(path, params) {
+    if (!params._csrf) {
+      params._csrf = this.csrfToken;
+    }
+
+    return this.apiv3Request('delete', path, { params });
+  }
+
 }

src/client/js/util/apiNotification.js

@@ -1,16 +1,11 @@
 import * as toastr from 'toastr';
+import toArrayIfNot from '../../../lib/util/toArrayIfNot';
 
 const logger = require('@alias/logger')('growi');
 
-const errorFormatter = {};
-
-errorFormatter.logger = (err) => {
-  return err.toString().replace(/\n/g, ', ');
-};
-
-errorFormatter.toastr = (err) => {
+const errorFormatter = (err) => {
   const prefixRegexp = /^Error: /;
-  let message = err.toString().replace(/\n/g, '<br>');
+  let message = err.toString();
 
   if (prefixRegexp.test(message)) {
     message = message.replace(prefixRegexp, '');
@@ -20,16 +15,20 @@ errorFormatter.toastr = (err) => {
 };
 
 export const apiErrorHandler = (err, header = 'Error') => {
-  logger.error(errorFormatter.logger(err));
-
-  toastr.error(errorFormatter.toastr(err), header, {
-    closeButton: true,
-    progressBar: true,
-    newestOnTop: false,
-    showDuration: '100',
-    hideDuration: '100',
-    timeOut: '3000',
-  });
+  const errs = toArrayIfNot(err);
+
+  for (const err of errs) {
+    logger.error(err);
+
+    toastr.error(errorFormatter(err), header, {
+      closeButton: true,
+      progressBar: true,
+      newestOnTop: false,
+      showDuration: '100',
+      hideDuration: '100',
+      timeOut: '3000',
+    });
+  }
 };
 
 export const apiSuccessHandler = (body, header = 'Success') => {

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

@@ -12,7 +12,6 @@ const {
   adminRequired,
 } = require('../../util/middlewares');
 
-const ApiResponse = require('../../util/apiResponse');
 
 module.exports = (crowi) => {
   const { UserGroup, UserGroupRelation } = crowi.models;
@@ -39,11 +38,11 @@ module.exports = (crowi) => {
         userGroupRelations: userGroupRelationsObj,
       };
 
-      return res.json(ApiResponse.success(data));
+      return res.apiv3(data);
     }
     catch (err) {
       logger.error('Error', err);
-      return res.json(ApiResponse.error('Error occurred in fetching user group relations'));
+      return res.apiv3Err('Error occurred in fetching user group relations');
     }
   });
 

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

@@ -18,8 +18,6 @@ const {
   formValid,
 } = require('../../util/middlewares');
 
-const ApiResponse = require('../../util/apiResponse');
-
 module.exports = (crowi) => {
   const { UserGroup, UserGroupRelation } = crowi.models;
 
@@ -29,11 +27,11 @@ module.exports = (crowi) => {
     // TODO: filter with querystring
     try {
       const userGroups = await UserGroup.find();
-      return res.json(ApiResponse.success({ userGroups }));
+      return res.apiv3({ userGroups });
     }
     catch (err) {
       logger.error('Error', err);
-      return res.json(ApiResponse.error('Error occurred in fetching user groups'));
+      return res.apiv3Err('Error occurred in fetching user groups');
     }
   });
 
@@ -48,12 +46,12 @@ module.exports = (crowi) => {
       const userGroupName = crowi.xss.process(name);
       const userGroup = await UserGroup.createGroupByName(userGroupName);
 
-      return res.json(ApiResponse.success({ userGroup }));
+      return res.apiv3({ userGroup });
     }
     catch (err) {
       const msg = 'Error occurred in creating a user group';
       logger.error(msg, err);
-      return res.json(ApiResponse.error(msg));
+      return res.apiv3Err(msg);
     }
   });
 
@@ -70,12 +68,12 @@ module.exports = (crowi) => {
     try {
       const userGroup = await UserGroup.removeCompletelyById(deleteGroupId, actionName, transferToUserGroupId);
 
-      return res.json(ApiResponse.success({ userGroup }));
+      return res.apiv3({ userGroup });
     }
     catch (err) {
       const msg = 'Error occurred in deleting a user group';
       logger.error(msg, err);
-      return res.json(ApiResponse.error(msg));
+      return res.apiv3Err(msg);
     }
   });
 
@@ -98,12 +96,12 @@ module.exports = (crowi) => {
         return userGroupRelation.relatedUser;
       });
 
-      return res.json(ApiResponse.success({ users }));
+      return res.apiv3({ users });
     }
     catch (err) {
       const msg = `Error occurred in fetching users for group: ${id}`;
       logger.error(msg, err);
-      return res.json(ApiResponse.error(msg));
+      return res.apiv3Err(msg);
     }
   });