show err message

src/client/js/components/PageManagement/ApiErrorMessage.jsx

@@ -5,76 +5,86 @@ import { withTranslation } from 'react-i18next';
 
 const ApiErrorMessage = (props) => {
   const {
-    t, errorCode, errorMessage, targetPath,
+    t, errors, targetPath,
   } = props;
 
   function reload() {
     window.location.reload();
   }
 
-  function renderMessageByErrorCode() {
-    switch (errorCode) {
-      case 'already_exists':
-        return (
-          <>
-            <strong><i className="icon-fw icon-ban"></i>{ t('page_api_error.already_exists') }</strong>
-            <small><a href={targetPath}>{targetPath} <i className="icon-login"></i></a></small>
-          </>
-        );
-      case 'notfound_or_forbidden':
-        return (
-          <strong><i className="icon-fw icon-ban"></i>{ t('page_api_error.notfound_or_forbidden') }</strong>
-        );
-      case 'user_not_admin':
-        return (
-          <strong><i className="icon-fw icon-ban"></i>{ t('page_api_error.user_not_admin') }</strong>
-        );
-      case 'outdated':
-        return (
-          <>
-            <strong><i className="icon-fw icon-bulb"></i> { t('page_api_error.outdated') }</strong>
-            <a className="btn-link" onClick={reload}>
-              <i className="fa fa-angle-double-right"></i> { t('Load latest') }
-            </a>
-          </>
-        );
-      case 'invalid_path':
-        return (
-          <strong><i className="icon-fw icon-ban"></i> Invalid path</strong>
-        );
-      default:
-        return (
-          <strong><i className="icon-fw icon-ban"></i> Unknown error occured</strong>
-        );
+  function renderMessage(err) {
+
+    function renderMessageByErrorCode() {
+      switch (err.code) {
+        case 'already_exists':
+          return (
+            <>
+              <strong><i className="icon-fw icon-ban"></i>{ t('page_api_error.already_exists') }</strong>
+              <small><a href={targetPath}>{targetPath} <i className="icon-login"></i></a></small>
+            </>
+          );
+        case 'notfound_or_forbidden':
+          return (
+            <strong><i className="icon-fw icon-ban"></i>{ t('page_api_error.notfound_or_forbidden') }</strong>
+          );
+        case 'user_not_admin':
+          return (
+            <strong><i className="icon-fw icon-ban"></i>{ t('page_api_error.user_not_admin') }</strong>
+          );
+        case 'outdated':
+          return (
+            <>
+              <strong><i className="icon-fw icon-bulb"></i> { t('page_api_error.outdated') }</strong>
+              <a className="btn-link" onClick={reload}>
+                <i className="fa fa-angle-double-right"></i> { t('Load latest') }
+              </a>
+            </>
+          );
+        case 'invalid_path':
+          return (
+            <strong><i className="icon-fw icon-ban"></i> Invalid path</strong>
+          );
+        default:
+          return (
+            <strong><i className="icon-fw icon-ban"></i> Unknown error occured</strong>
+          );
+      }
     }
-  }
 
-  if (errorCode != null) {
-    return (
-      <span className="text-danger">
-        {renderMessageByErrorCode()}
-      </span>
-    );
-  }
+    if (err.code != null) {
+      return (
+        <span className="text-danger">
+          {renderMessageByErrorCode()}
+        </span>
+      );
+    }
+
+    if (err.message != null) {
+      return (
+        <span className="text-danger">
+          {err.message}
+        </span>
+      );
+    }
 
-  if (errorMessage != null) {
-    return (
-      <span className="text-danger">
-        {errorMessage}
-      </span>
-    );
+    // render null if no error has occurred
+    return null;
   }
 
-  // render null if no error has occurred
-  return null;
+  return (
+    <>
+      {errors.map((error) => {
+        return renderMessage(error);
+      })}
+    </>
+  );
 
 };
 
 ApiErrorMessage.propTypes = {
   t:            PropTypes.func.isRequired, //  i18next
 
-  errorCode:    PropTypes.string,
-  errorMessage: PropTypes.string,
+  errors:       PropTypes.array,
   targetPath:   PropTypes.string,
 };
 

src/client/js/components/PageRenameModal.jsx

@@ -23,8 +23,8 @@ const PageRenameModal = (props) => {
   const { crowi } = appContainer.config;
 
   const [pageNameInput, setPageNameInput] = useState(path);
-  const [errorCode, setErrorCode] = useState(null);
-  const [errorMessage, setErrorMessage] = useState(null);
+
+  const [errors, setErrors] = useState([]);
 
   const [isRenameRecursively, SetIsRenameRecursively] = useState(true);
   const [isRenameRedirect, SetIsRenameRedirect] = useState(false);
@@ -52,8 +52,7 @@ const PageRenameModal = (props) => {
 
   async function rename() {
     try {
-      setErrorCode(null);
-      setErrorMessage(null);
+      setErrors([]);
 
       const response = await pageContainer.rename(
         pageNameInput,
@@ -71,9 +70,8 @@ const PageRenameModal = (props) => {
 
       window.location.href = `${url.pathname}${url.search}`;
     }
-    catch (err) {
-      setErrorCode(err[0].code);
-      setErrorMessage(err.message);
+    catch (errs) {
+      setErrors(errs);
     }
   }
 
@@ -150,7 +148,7 @@ const PageRenameModal = (props) => {
         </div>
       </ModalBody>
       <ModalFooter>
-        <ApiErrorMessage errorCode={errorCode} errorMessage={errorMessage} targetPath={pageNameInput} />
+        <ApiErrorMessage errors={errors} targetPath={pageNameInput} />
         <button type="button" className="btn btn-primary" onClick={rename}>Rename</button>
       </ModalFooter>
     </Modal>

src/client/js/services/AppContainer.js

@@ -339,9 +339,8 @@ export default class AppContainer extends Container {
       return res.data;
     }
     catch (err) {
-      const { code } = err.response.data;
       const errors = apiv3ErrorHandler(err);
-      throw { ...errors, code };
+      throw errors;
     }
   }
 

src/server/routes/apiv3/pages.js

@@ -174,7 +174,7 @@ module.exports = (crowi) => {
     const isExist = await Page.count({ path: newPagePath }) > 0;
     if (isExist) {
       // if page found, cannot cannot rename to that path
-      return res.apiv3Err(new ErrorV3(`'new_path=${newPagePath}' already exists`, 'already_exists'), 409);
+      return res.apiv3Err(new ErrorV3(`${newPagePath} already exists`, 'already_exists'), 409);
     }
 
     let page;