Add confirmation when deleting session.
--- a/client/src/components/SessionList.js Mon Jun 26 17:50:24 2017 +0200
+++ b/client/src/components/SessionList.js Mon Jun 26 18:15:44 2017 +0200
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, ListGroup, ListGroupItem, Button } from 'react-bootstrap';
+import { Grid, Row, Col, ListGroup, ListGroupItem, Button, Modal } from 'react-bootstrap';
import moment from 'moment';
import '../App.css';
import Navbar from './Navbar';
@@ -10,6 +10,11 @@
class SessionList extends Component {
+ state = {
+ showModal: false,
+ sessionToDelete: null
+ }
+
createSession = () => {
const sessionId = uuidV1();
this.props.sessionsActions.createSession(sessionId);
@@ -20,7 +25,25 @@
e.preventDefault();
e.stopPropagation();
- this.props.sessionsActions.deleteSession(session);
+ this.setState({
+ showModal: true,
+ sessionToDelete: session
+ })
+ }
+
+ closeModal = () => {
+ this.setState({ showModal: false })
+ }
+
+ deleteSession = () => {
+ const { sessionToDelete } = this.state;
+
+ this.props.sessionsActions.deleteSession(sessionToDelete);
+
+ this.setState({
+ showModal: false,
+ sessionToDelete: null
+ })
}
render() {
@@ -46,6 +69,17 @@
</Col>
</Row>
</Grid>
+
+ <Modal show={ this.state.showModal } onHide={ this.closeModal }>
+ <Modal.Body>
+ Are you sure?
+ </Modal.Body>
+ <Modal.Footer>
+ <Button bsStyle="primary" onClick={ this.deleteSession }>Confirm</Button>
+ <Button onClick={ this.closeModal }>Close</Button>
+ </Modal.Footer>
+ </Modal>
+
</div>
);
}