--- 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>
);