1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import { connect } from 'react-redux'; |
2 import { connect } from 'react-redux'; |
3 import { bindActionCreators } from 'redux'; |
3 import { bindActionCreators } from 'redux'; |
4 import { Modal } from 'react-bootstrap'; |
4 import Modal from 'react-modal'; |
5 import moment from 'moment'; |
5 import moment from 'moment'; |
6 import '../App.css'; |
6 import '../App.css'; |
7 import './SessionList.css'; |
7 import './SessionList.css'; |
8 import Navbar from './Navbar'; |
8 import Navbar from './Navbar'; |
9 import * as sessionsActions from '../actions/sessionsActions'; |
9 import * as sessionsActions from '../actions/sessionsActions'; |
10 import uuidV1 from 'uuid/v1'; |
10 import uuidV1 from 'uuid/v1'; |
11 import { getActiveSessions } from '../selectors/coreSelectors'; |
11 import { getActiveSessions } from '../selectors/coreSelectors'; |
12 import { getCurrentUser, getGroups, getCurrentGroup } from '../selectors/authSelectors'; |
12 import { getCurrentUser, getGroups, getCurrentGroup } from '../selectors/authSelectors'; |
13 |
13 |
14 class SessionList extends Component { |
14 class SessionList extends Component { |
|
15 constructor(props) { |
|
16 super(props); |
|
17 this.state = { |
|
18 modalIsOpen: false, |
|
19 sessionToDelete: null |
|
20 }; |
|
21 } |
15 |
22 |
16 state = { |
23 openModal = () => { |
17 showModal: false, |
24 this.setState({modalIsOpen: true}); |
18 sessionToDelete: null |
25 } |
|
26 |
|
27 closeModal = () => { |
|
28 this.setState({modalIsOpen: false}); |
|
29 } |
|
30 |
|
31 handleModalCloseRequest = () => { |
|
32 // opportunity to validate something and keep the modal open even if it |
|
33 // requested to be closed |
|
34 this.setState({modalIsOpen: false}); |
19 } |
35 } |
20 |
36 |
21 createSession = () => { |
37 createSession = () => { |
22 const sessionId = uuidV1(); |
38 const sessionId = uuidV1(); |
23 let groupName = null; |
39 let groupName = null; |
43 onClickDelete(session, e) { |
59 onClickDelete(session, e) { |
44 e.preventDefault(); |
60 e.preventDefault(); |
45 e.stopPropagation(); |
61 e.stopPropagation(); |
46 |
62 |
47 this.setState({ |
63 this.setState({ |
48 showModal: true, |
64 modalIsOpen: true, |
49 sessionToDelete: session |
65 sessionToDelete: session |
50 }) |
66 }) |
51 } |
|
52 |
|
53 closeModal = () => { |
|
54 this.setState({ showModal: false }) |
|
55 } |
67 } |
56 |
68 |
57 deleteSession = () => { |
69 deleteSession = () => { |
58 const { sessionToDelete } = this.state; |
70 const { sessionToDelete } = this.state; |
59 |
71 |
60 this.props.sessionsActions.deleteSession(sessionToDelete); |
72 this.props.sessionsActions.deleteSession(sessionToDelete); |
61 |
73 |
62 this.setState({ |
74 this.setState({ |
63 showModal: false, |
75 modalIsOpen: false, |
64 sessionToDelete: null |
76 sessionToDelete: null |
65 }) |
77 }) |
66 } |
78 } |
67 |
79 |
68 render() { |
80 render() { |
85 <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button> |
97 <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button> |
86 </div> |
98 </div> |
87 </div> |
99 </div> |
88 </div> |
100 </div> |
89 |
101 |
90 <Modal show={ this.state.showModal } onHide={ this.closeModal }> |
102 <Modal |
91 <Modal.Body> |
103 className="Modal__Bootstrap modal-dialog" |
92 Êtes-vous sûr(e) ? |
104 // closeTimeoutMS={150} |
93 </Modal.Body> |
105 isOpen={this.state.modalIsOpen} |
94 <Modal.Footer> |
106 onRequestClose={this.handleModalCloseRequest} |
95 <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button> |
107 > |
96 <button type="button" className="btn btn-default btn-lg" onClick={ this.closeModal }>Fermer</button> |
108 <div className="modal-content"> |
97 </Modal.Footer> |
109 <div className="modal-body"> |
|
110 Êtes-vous sûr(e) ? |
|
111 </div> |
|
112 <div className="modal-footer"> |
|
113 <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button> |
|
114 <button type="button" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button> |
|
115 </div> |
|
116 </div> |
98 </Modal> |
117 </Modal> |
99 </div> |
118 </div> |
100 ); |
119 ); |
101 } |
120 } |
102 } |
121 } |