create error message

src/client/js/components/PageDuplicateModal.jsx

@@ -13,6 +13,7 @@ import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 import PagePathAutoComplete from './PagePathAutoComplete';
+import ApiErrorMessage from './PageManagement/ApiErrorMessage';
 
 const PageDuplicateModal = (props) => {
   const { t, appContainer, pageContainer } = props;
@@ -23,6 +24,7 @@ const PageDuplicateModal = (props) => {
   const { crowi } = appContainer.config;
 
   const [pageNameInput, setPageNameInput] = useState(path);
+  const [errorMessage, setErrorMessage] = useState(null);
 
   /**
    * change pageNameInput
@@ -34,14 +36,14 @@ const PageDuplicateModal = (props) => {
 
   async function clickDuplicateButtonHandler() {
     try {
+      setErrorMessage(null);
       const res = await appContainer.apiPost('/pages.duplicate', { page_id: pageId, new_path: pageNameInput });
-      const page = res.page;
+      const { page } = res;
       window.location.href = `${page.path}?duplicated=${path}`;
     }
     catch (err) {
-      console.log(err.message);
+      setErrorMessage(err.message);
     }
-
   }
 
 
@@ -77,7 +79,7 @@ const PageDuplicateModal = (props) => {
         </div>
       </ModalBody>
       <ModalFooter>
-        {/* TODO add error massage */}
+        <ApiErrorMessage errorMessage={errorMessage} />
         <button type="button" className="btn btn-primary" onClick={clickDuplicateButtonHandler}>Duplicate page</button>
       </ModalFooter>
     </Modal>

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+const ApiErrorMessage = (props) => {
+  const { t, errorMessage } = props;
+
+  function renderMessage() {
+    switch (errorMessage) {
+      case 'Page exists':
+        return (
+          <span className="text-danger msg msg-already_exists">
+            <strong><i className="icon-fw icon-ban"></i>{ t('page_api_error.already_exists') }</strong><br />
+            <small id="linkToNewPage"></small>
+          </span>
+        );
+      default:
+        return null;
+    }
+  }
+
+  return (
+    <div>
+      {renderMessage()}
+    </div>
+  );
+
+  // TODO Set according to error message
+  // <div>
+  //   <span className="text-danger msg msg-notfound_or_forbidden">
+  //     <strong><i className="icon-fw icon-ban"></i>{ t('page_api_error.notfound_or_forbidden') }</strong>
+  //   </span>
+  //   <span className="text-danger msg msg-user_not_admin">
+  //     <strong><i className="icon-fw icon-ban"></i>{ t('page_api_error.user_not_admin') }</strong>
+  //   </span>
+
+  //   <span className="text-warning msg msg-outdated">
+  //     <strong><i className="icon-fw icon-bulb"></i> { t('page_api_error.outdated') }</strong>
+  //     {/* <a href="javascript:location.reload();"> */}
+  //     <i className="fa fa-angle-double-right"></i> { t('Load latest') }
+  //     {/* </a> */}
+  //   </span>
+  //   <span className="text-danger msg msg-invalid_path">
+  //     <strong><i className="icon-fw icon-ban"></i> Invalid path</strong>
+  //   </span>
+  //   <span className="text-danger msg msg-unknown">
+  //     <strong><i className="icon-fw icon-ban"></i> Unknown error occured</strong>
+  //   </span>
+  // </div>
+};
+
+ApiErrorMessage.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  errorMessage: PropTypes.string,
+};
+
+export default withTranslation()(ApiErrorMessage);