client/src/components/SessionList.js
changeset 95 7bc08467c726
parent 93 469da13402e2
child 124 c77570164050
--- 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>
     );
   }