diff -r 5d2bc8c877ea -r 4f4bb2b3ef39 client/src/components/SessionList.js --- 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 @@ - - - Êtes-vous sûr(e) ? - - - - - + +
+
+ Êtes-vous sûr(e) ? +
+
+ + +
+
);