client/src/components/SessionList.js
changeset 146 4f4bb2b3ef39
parent 145 5d2bc8c877ea
child 147 a2e61192db50
--- a/client/src/components/SessionList.js	Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/SessionList.js	Thu Aug 16 22:32:36 2018 +0200
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Modal } from 'react-bootstrap';
+import Modal from 'react-modal';
 import moment from 'moment';
 import '../App.css';
 import './SessionList.css';
@@ -12,10 +12,26 @@
 import { getCurrentUser, getGroups, getCurrentGroup } from '../selectors/authSelectors';
 
 class SessionList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalIsOpen: false,
+      sessionToDelete: null
+    };
+  }
 
-  state = {
-    showModal: false,
-    sessionToDelete: null
+  openModal = () => {
+    this.setState({modalIsOpen: true});
+  }
+
+  closeModal = () => {
+    this.setState({modalIsOpen: false});
+  }
+
+  handleModalCloseRequest = () => {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    this.setState({modalIsOpen: false});
   }
 
   createSession = () => {
@@ -45,22 +61,18 @@
     e.stopPropagation();
 
     this.setState({
-      showModal: true,
+      modalIsOpen: true,
       sessionToDelete: session
     })
   }
 
-  closeModal = () => {
-    this.setState({ showModal: false })
-  }
-
   deleteSession = () => {
     const { sessionToDelete } = this.state;
 
     this.props.sessionsActions.deleteSession(sessionToDelete);
 
     this.setState({
-      showModal: false,
+      modalIsOpen: false,
       sessionToDelete: null
     })
   }
@@ -87,14 +99,21 @@
           </div>
         </div>
 
-        <Modal show={ this.state.showModal } onHide={ this.closeModal }>
-          <Modal.Body>
-          Êtes-vous sûr(e) ?
-          </Modal.Body>
-          <Modal.Footer>
-            <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
-            <button type="button" className="btn btn-default btn-lg" onClick={ this.closeModal }>Fermer</button>
-          </Modal.Footer>
+        <Modal
+        className="Modal__Bootstrap modal-dialog"
+        // closeTimeoutMS={150}
+        isOpen={this.state.modalIsOpen}
+        onRequestClose={this.handleModalCloseRequest}
+        >
+          <div className="modal-content">
+            <div className="modal-body">
+            Êtes-vous sûr(e) ?
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
+              <button type="button" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button>
+            </div>
+          </div>
         </Modal>
       </div>
     );