add modal

src/client/js/components/EmptyTrashModal.jsx

@@ -0,0 +1,57 @@
+
+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 EmptyTrashModal = (props) => {
+  const {
+    t, isOpen, toggle,
+  } = props;
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} className="grw-create-page">
+      <ModalHeader tag="h4" toggle={toggle} className="bg-danger text-light">
+        { t('modal_empty.empty_the_trash')}
+      </ModalHeader>
+      <ModalBody>
+        完全削除したページは元に戻すことができません
+      </ModalBody>
+      <ModalFooter>
+        {/* TODO add error message */}
+        <button type="submit" className="btn btn-danger">
+          <i className="icon-trash" aria-hidden="true"></i>
+            Empty
+        </button>
+      </ModalFooter>
+    </Modal>
+
+  );
+};
+
+
+/**
+ * Wrapper component for using unstated
+ */
+const EmptyTrashModalWrapper = (props) => {
+  return createSubscribedElement(EmptyTrashModal, props, [AppContainer]);
+};
+
+
+EmptyTrashModal.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  isOpen: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(EmptyTrashModalWrapper);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
@@ -7,6 +7,7 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 import UserPicture from '../User/UserPicture';
+import EmptyTrashModal from '../EmptyTrashModal';
 
 
 const TrashPageAlert = (props) => {
@@ -15,10 +16,25 @@ const TrashPageAlert = (props) => {
     path, isDeleted, revisionAuthor, updatedAt, hasChildren, isAbleToDeleteCompletely,
   } = pageContainer.state;
   const { currentUser } = appContainer;
+  const [isEmptyTrashModalShown, setIsEmptyTrashModalShown] = useState(false);
+
+  function openEmptyTrashModal() {
+    setIsEmptyTrashModalShown(true);
+  }
+
+  function closeEmptyTrashModal() {
+    setIsEmptyTrashModalShown(false);
+  }
 
   function renderEmptyButton() {
     return (
-      <button href="#" type="button" className="btn btn-danger rounded-pill btn-sm ml-auto" data-target="#emptyTrash" data-toggle="modal">
+      <button
+        href="#"
+        type="button"
+        className="btn btn-danger rounded-pill btn-sm ml-auto"
+        data-target="#emptyTrash"
+        onClick={openEmptyTrashModal}
+      >
         <i className="icon-trash" aria-hidden="true"></i>{ t('modal_empty.empty_the_trash') }
       </button>
     );
@@ -49,14 +65,17 @@ const TrashPageAlert = (props) => {
   }
 
   return (
-    <div className="alert alert-warning py-3 px-4 d-flex align-items-center">
-      <div>
-      This page is in the trash <i className="icon-trash" aria-hidden="true"></i>.
-        {isDeleted && <span><br /><UserPicture user={revisionAuthor} /> Deleted by {revisionAuthor.name} at {updatedAt}</span>}
+    <>
+      <div className="alert alert-warning py-3 px-4 d-flex align-items-center">
+        <div>
+          This page is in the trash <i className="icon-trash" aria-hidden="true"></i>.
+          {isDeleted && <span><br /><UserPicture user={revisionAuthor} /> Deleted by {revisionAuthor.name} at {updatedAt}</span>}
+        </div>
+        {(currentUser.admin && path === '/trash' && hasChildren) && renderEmptyButton()}
+        {(isDeleted && currentUser != null) && renderTrashPageManagementButtons()}
       </div>
-      {(currentUser.admin && path === '/trash' && hasChildren) && renderEmptyButton()}
-      {(isDeleted && currentUser != null) && renderTrashPageManagementButtons()}
-    </div>
+      <EmptyTrashModal isOpen={isEmptyTrashModalShown} toggle={closeEmptyTrashModal} />
+    </>
   );
 };