create delete modal

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

@@ -8,7 +8,9 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 import UserPicture from '../User/UserPicture';
+
 import EmptyTrashModal from '../EmptyTrashModal';
+import PageDeleteModal from '../PageDeleteModal';
 
 
 const TrashPageAlert = (props) => {
@@ -18,6 +20,7 @@ const TrashPageAlert = (props) => {
   } = pageContainer.state;
   const { currentUser } = appContainer;
   const [isEmptyTrashModalShown, setIsEmptyTrashModalShown] = useState(false);
+  const [isPageDeleteModalShown, setIsPageDeleteModalShown] = useState(false);
 
   function openEmptyTrashModal() {
     setIsEmptyTrashModalShown(true);
@@ -27,7 +30,15 @@ const TrashPageAlert = (props) => {
     setIsEmptyTrashModalShown(false);
   }
 
-  async function onClickDeleteBtn() {
+  function openPageDeleteModal() {
+    setIsPageDeleteModalShown(true);
+  }
+
+  function closePageDeleteModal() {
+    setIsPageDeleteModalShown(false);
+  }
+
+  async function onClickEmptyBtn() {
     try {
       await appContainer.apiv3Delete('/pages/empty-trash');
       window.location.reload();
@@ -37,6 +48,10 @@ const TrashPageAlert = (props) => {
     }
   }
 
+  async function onClickDeleteBtn() {
+    console.log('pushed');
+  }
+
   function renderEmptyButton() {
     return (
       <button
@@ -66,8 +81,7 @@ const TrashPageAlert = (props) => {
           type="button"
           className="btn btn-danger rounded-pill btn-sm mr-2"
           disabled={!isAbleToDeleteCompletely}
-          data-target="#deletePage"
-          data-toggle="modal"
+          onClick={openPageDeleteModal}
         >
           <i className="icon-fire" aria-hidden="true"></i> { t('Delete Completely') }
         </button>
@@ -85,7 +99,8 @@ const TrashPageAlert = (props) => {
         {(currentUser.admin && path === '/trash' && hasChildren) && renderEmptyButton()}
         {(isDeleted && currentUser != null) && renderTrashPageManagementButtons()}
       </div>
-      <EmptyTrashModal isOpen={isEmptyTrashModalShown} toggle={closeEmptyTrashModal} onClickSubmit={onClickDeleteBtn} />
+      <EmptyTrashModal isOpen={isEmptyTrashModalShown} toggle={closeEmptyTrashModal} onClickSubmit={onClickEmptyBtn} />
+      <PageDeleteModal isOpen={isPageDeleteModalShown} toggle={closePageDeleteModal} onClickSubmit={onClickDeleteBtn} isDeleteCompletely />
     </>
   );
 };

src/client/js/components/PageDeleteModal.jsx

@@ -0,0 +1,61 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from './UnstatedUtils';
+
+import AppContainer from '../services/AppContainer';
+
+const PageDeleteModal = (props) => {
+  const {
+    t, isOpen, toggle, isDeleteCompletely,
+  } = props;
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} className="grw-create-page">
+      <ModalHeader tag="h4" toggle={toggle} className="bg-danger text-light">
+        <i className="icon-fw icon-fire"></i> { t('modal_delete.delete_completely') }
+        <i className="icon-fw icon-trash"></i> { t('modal_delete.delete_page') }
+      </ModalHeader>
+      <ModalBody>
+        { t('modal_empty.notice')}
+      </ModalBody>
+      <ModalFooter>
+
+      </ModalFooter>
+    </Modal>
+
+  );
+};
+
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageDeleteModalWrapper = (props) => {
+  return createSubscribedElement(PageDeleteModal, props, [AppContainer]);
+};
+
+
+PageDeleteModal.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  isOpen: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  onClickSubmit: PropTypes.func.isRequired,
+
+  isDeleteCompletely: PropTypes.bool,
+};
+
+PageDeleteModal.defaultProps = {
+  isDeleteCompletely: false,
+};
+
+export default withTranslation()(PageDeleteModalWrapper);