refactor page rename modal

src/client/js/app.jsx

@@ -23,7 +23,6 @@ import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
 import PageManagement from './components/Page/PageManagement';
 import PageDuplicateModal from './components/PageDuplicateModal';
-import PageRenameModal from './components/PageRenameModal';
 import TrashPageAlert from './components/Page/TrashPageAlert';
 import PageAttachment from './components/PageAttachment';
 import PageStatusAlert from './components/PageStatusAlert';
@@ -94,7 +93,6 @@ if (pageContainer.state.pageId != null) {
     'page-comment-write': <CommentEditorLazyRenderer />,
     'page-management': <PageManagement />,
     'page-duplicate-modal': <PageDuplicateModal />,
-    'page-rename-modal': <PageRenameModal />,
 
     'revision-toc': <TableOfContents />,
     'seen-user-list': <UserPictureList userIds={pageContainer.state.seenUserIds} />,

src/client/js/components/EmptyTrashModal.jsx

@@ -21,7 +21,6 @@ const EmptyTrashModal = (props) => {
         { t('modal_empty.notice')}
       </ModalBody>
       <ModalFooter>
-        {/* TODO add error message */}
         <button type="button" className="btn btn-danger" onClick={onClickEmptyBtn}>
           <i className="icon-trash mr-2" aria-hidden="true"></i>Empty
         </button>

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

@@ -7,6 +7,7 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 import PageDeleteModal from '../PageDeleteModal';
+import PageRenameModal from '../PageRenameModal';
 
 
 const PageManagement = (props) => {
@@ -16,8 +17,17 @@ const PageManagement = (props) => {
   const { currentUser } = appContainer;
   const isTopPagePath = isTopPage(path);
 
+  const [isPageRenameModalShown, setIsPageRenameModalShown] = useState(false);
   const [isPageDeleteModalShown, setIsPageDeleteModalShown] = useState(false);
 
+  function openPageRenameModalHandler() {
+    setIsPageRenameModalShown(true);
+  }
+
+  function closePageRenameModalHandler() {
+    setIsPageRenameModalShown(false);
+  }
+
   function openPageDeleteModalHandler() {
     setIsPageDeleteModalShown(true);
   }
@@ -26,10 +36,11 @@ const PageManagement = (props) => {
     setIsPageDeleteModalShown(false);
   }
 
+
   function renderDropdownItemForNotTopPage() {
     return (
       <>
-        <a className="dropdown-item" type="button" onClick={pageContainer.openPageRenameModal}>
+        <a className="dropdown-item" type="button" onClick={openPageRenameModalHandler}>
           <i className="icon-fw icon-action-redo"></i> { t('Move/Rename') }
         </a>
         <a className="dropdown-item" type="button" onClick={pageContainer.openPageDuplicateModal}>
@@ -71,6 +82,11 @@ const PageManagement = (props) => {
         </a>
         {(!isTopPagePath && isDeletable) && renderDropdownItemForDeletablePage()}
       </div>
+      <PageRenameModal
+        isOpen={isPageRenameModalShown}
+        onClose={closePageRenameModalHandler}
+        path={path}
+      />
       <PageDeleteModal
         isOpen={isPageDeleteModalShown}
         onClose={closePageDeleteModalHandler}

src/client/js/components/PageRenameModal.jsx

@@ -63,8 +63,8 @@ const PageRenameModal = (props) => {
   }
 
   return (
-    <Modal isOpen={pageContainer.state.isPageRenameModalShown} toggle={pageContainer.closePageRenameModal} className="grw-create-page">
-      <ModalHeader tag="h4" toggle={pageContainer.closePageRenameModal} className="bg-primary text-light">
+    <Modal isOpen={props.isOpen} toggle={props.onClose} className="grw-create-page">
+      <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">
         { t('modal_rename.label.Move/Rename page') }
       </ModalHeader>
       <ModalBody>
@@ -153,6 +153,9 @@ PageRenameModal.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+
   path: PropTypes.string.isRequired,
 };
 

src/client/js/services/PageContainer.js

@@ -65,7 +65,6 @@ export default class PageContainer extends Container {
 
       isPageDuplicateModalShown: false,
       isCreateTemplatePageModalShown: false,
-      isPageRenameModalShown: false,
 
       isHeaderSticky: false,
       isSubnavCompact: false,
@@ -110,8 +109,6 @@ export default class PageContainer extends Container {
     this.closePageDuplicateModal = this.closePageDuplicateModal.bind(this);
     this.openCreateTemplatePageModal = this.openCreateTemplatePageModal.bind(this);
     this.closeCreateTemplatePageModal = this.closeCreateTemplatePageModal.bind(this);
-    this.openPageRenameModal = this.openPageRenameModal.bind(this);
-    this.closePageRenameModal = this.closePageRenameModal.bind(this);
   }
 
   /**
@@ -474,12 +471,4 @@ export default class PageContainer extends Container {
     this.setState({ isCreateTemplatePageModalShown: false });
   }
 
-  openPageRenameModal() {
-    this.setState({ isPageRenameModalShown: true });
-  }
-
-  closePageRenameModal() {
-    this.setState({ isPageRenameModalShown: false });
-  }
-
 }