add modal

src/client/js/components/Admin/Notification/GlobalNotificationList.jsx

@@ -7,10 +7,25 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
+import NotificationDeleteModal from './NotificationDeleteModal';
 
 
 class GlobalNotificationList extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isNotificationDeleteModalShown: false,
+    };
+
+    this.toggleDeleteModal = this.toggleDeleteModal.bind(this);
+  }
+
+  toggleDeleteModal() {
+    this.setState({ isNotificationDeleteModalShown: !this.state.isNotificationDeleteModalShown });
+  }
+
   render() {
     const { t, adminNotificationContainer } = this.props;
     const { globalNotifications } = adminNotificationContainer.state;
@@ -76,24 +91,18 @@ class GlobalNotificationList extends React.Component {
                         <i className="icon-fw icon-note"></i> {t('Edit')}
                       </a>
                     </li>
-                    {/*  TODO GW-780 create delete modal  */}
-                    <li className="btn-delete">
-                      <a
-                        href="#"
-                        data-setting-id="{{ notification.id }}"
-                        data-target="#admin-delete-global-notification"
-                        data-toggle="modal"
-                      >
+                    <li onClick={this.toggleDeleteModal}>
+                      <a>
                         <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
                       </a>
                     </li>
-
                   </ul>
                 </div>
               </td>
             </tr>
           );
         })}
+        <NotificationDeleteModal isOpen={this.state.isNotificationDeleteModalShown} onClose={this.toggleDeleteModal} />;
       </React.Fragment>
     );
 

src/client/js/components/Admin/Notification/NotificationDeleteModal.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import Modal from 'react-bootstrap/es/Modal';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+
+class NotificationDeleteModal extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    };
+
+  }
+
+
+  render() {
+
+    return (
+      <Modal show={this.props.isOpen} onHide={this.props.onClose}>
+        <Modal.Header className="modal-header" closeButton>
+          <Modal.Title>
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          hoge
+        </Modal.Body>
+        <Modal.Footer className="d-flex">
+
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const NotificationDeleteModalWrapper = (props) => {
+  return createSubscribedElement(NotificationDeleteModal, props, [AppContainer]);
+};
+
+
+NotificationDeleteModal.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(NotificationDeleteModalWrapper);