|
1 import React, { Component } from 'react'; |
|
2 import { connect } from 'react-redux'; |
|
3 import { bindActionCreators } from 'redux'; |
|
4 import Modal from 'react-modal'; |
|
5 import uuidV1 from 'uuid/v1'; |
|
6 import '../App.css'; |
|
7 import * as sessionsActions from '../actions/sessionsActions'; |
|
8 import * as authActions from '../actions/authActions'; |
|
9 // import _ from 'lodash'; |
|
10 import './CreateSession.css'; |
|
11 |
|
12 class CreateSession extends Component { |
|
13 state = { |
|
14 createGroup: false, |
|
15 protocolOpen: false, |
|
16 // protocol:null |
|
17 } |
|
18 |
|
19 componentWillMount() { |
|
20 Modal.setAppElement('body'); |
|
21 } |
|
22 |
|
23 |
|
24 openSessionModal = () => { |
|
25 this.setState({modalIsOpen: true}); |
|
26 let groupName = null; |
|
27 // let protocol = null; |
|
28 if(this.props.currentGroup) { |
|
29 groupName = this.props.currentGroup.get('name'); |
|
30 // protocol = this.props.currentGroup.get('protocol'); |
|
31 } |
|
32 if(groupName === null) { |
|
33 groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null; |
|
34 if(groupName != null) { |
|
35 const group = this.props.groups.find((g) => g.name === groupName); |
|
36 if(group) { |
|
37 return( |
|
38 this.setState({ |
|
39 protocol: group.get('protocol') |
|
40 })) |
|
41 } |
|
42 } |
|
43 } |
|
44 |
|
45 } |
|
46 |
|
47 createSession = () => { |
|
48 const sessionId = uuidV1(); |
|
49 let groupName = null; |
|
50 let protocol = null; |
|
51 if(this.props.currentGroup) { |
|
52 groupName = this.props.currentGroup.get('name'); |
|
53 protocol = this.props.currentGroup.get('protocol'); |
|
54 } |
|
55 if(groupName === null) { |
|
56 groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null; |
|
57 if(groupName != null) { |
|
58 const group = this.props.groups.find((g) => g.name === groupName); |
|
59 if(group) { |
|
60 protocol = group.get('protocol'); |
|
61 } |
|
62 } |
|
63 } |
|
64 |
|
65 this.props.sessionsActions.createSession(sessionId, groupName, protocol); |
|
66 this.props.history.push('/sessions/' + sessionId); |
|
67 } |
|
68 |
|
69 getGroupProtocol = () => { |
|
70 let groupName = null; |
|
71 let protocol = null; |
|
72 if(this.props.currentGroup) { |
|
73 groupName = this.props.currentGroup.get('name'); |
|
74 protocol = this.props.currentGroup.get('protocol'); |
|
75 } |
|
76 if(groupName === null) { |
|
77 groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null; |
|
78 if(groupName != null) { |
|
79 const group = this.props.groups.find((g) => g.name === groupName); |
|
80 if(group) { |
|
81 protocol = group.get('protocol'); |
|
82 return( |
|
83 protocol |
|
84 ); |
|
85 } |
|
86 } |
|
87 } |
|
88 } |
|
89 |
|
90 // onChange = (e) => { |
|
91 // const { name, value } = e.target; |
|
92 // const changes = { [name]: value } |
|
93 // this.onChangeThrottle(changes); |
|
94 // } |
|
95 |
|
96 // onChangeThrottle = _.debounce((changes) => { |
|
97 // this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
|
98 // }, 750) |
|
99 |
|
100 onGroupChange = (e) => { |
|
101 const groupName = e.target.value; |
|
102 |
|
103 const group = this.props.groups.find((g) => g.get('name') === groupName); |
|
104 |
|
105 this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' }); |
|
106 } |
|
107 |
|
108 componentWillUpdate = (nextProps, nextState) => { |
|
109 if (nextState.createGroup && nextProps.createGroup.get('success')) { |
|
110 this.setState({ createGroup: false }) |
|
111 } |
|
112 } |
|
113 |
|
114 toggleProtocol = () => { |
|
115 this.setState({ |
|
116 protocolOpen: !this.state.protocolOpen, |
|
117 show: false |
|
118 |
|
119 }); |
|
120 } |
|
121 |
|
122 closeModal = () => { |
|
123 this.setState({modalIsOpen: false}); |
|
124 } |
|
125 |
|
126 handleModalCloseRequest = (e) => { |
|
127 // opportunity to validate something and keep the modal open even if it |
|
128 // requested to be closed |
|
129 e.preventDefault(); |
|
130 this.setState({modalIsOpen: false}); |
|
131 } |
|
132 |
|
133 render() { |
|
134 |
|
135 // if (!this.props.currentSession) { |
|
136 // return ( |
|
137 // <form></form> |
|
138 // ) |
|
139 // } |
|
140 |
|
141 return ( |
|
142 <div> |
|
143 {/* <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={ this.openModal}>Créer une nouvelle session</button> */} |
|
144 <a id="session-button" onClick={this.openSessionModal}>Créer une nouvelle session</a> |
|
145 <Modal |
|
146 className="Modal__Bootstrap modal-dialog bg-primary" |
|
147 // closeTimeoutMS={150} |
|
148 isOpen={this.state.modalIsOpen} |
|
149 onRequestClose={this.handleModalCloseRequest} |
|
150 > |
|
151 <div className="panel-default"> |
|
152 <div className="card-body rouded-bottom"> |
|
153 <form onSubmit={ e => { e.preventDefault() } }> |
|
154 <div className="form-group"> |
|
155 <label className="col-form-label text-secondary">Group</label> |
|
156 {/* <p>{this.props.currentSession.group}</p> */} |
|
157 </div> |
|
158 <div className="form-group"> |
|
159 <label className="col-form-label text-secondary">Titre</label> |
|
160 <input className="form-control text-primary" |
|
161 name="title" |
|
162 // defaultValue={ this.props.currentSession.title } |
|
163 onChange={ this.onChange } |
|
164 type="text" |
|
165 placeholder="Entrez un titre" |
|
166 /> |
|
167 </div> |
|
168 <div className="form-group"> |
|
169 <label className="col-form-label text-secondary">Description</label> |
|
170 <input className="form-control text-primary" |
|
171 type="textarea" |
|
172 name="description" |
|
173 // defaultValue={ this.props.currentSession.description } |
|
174 onChange={ this.onChange } |
|
175 placeholder="Entrez une description" |
|
176 /> |
|
177 </div> |
|
178 <div className="form-group"> |
|
179 <label className="col-form-label text-secondary" onClick={this.toggleProtocol}>Protocole de la prise de note {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label> |
|
180 <div className={ `collapse ${this.state.protocolOpen?'in':''}`} > |
|
181 {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */} |
|
182 <pre>{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre> |
|
183 </div> |
|
184 </div> |
|
185 <div className="text-center"> |
|
186 <button id="create-button" type="submit" className="btn btn-secondary btn-lg text-primary" onClick={this.createSession}>Commencer</button> |
|
187 </div> |
|
188 </form> |
|
189 </div> |
|
190 </div> |
|
191 </Modal> |
|
192 </div> |
|
193 ); |
|
194 } |
|
195 } |
|
196 |
|
197 function mapStateToProps(state, props) { |
|
198 |
|
199 let group; |
|
200 if (props.session && props.session.get('group')) { |
|
201 group = state.get('groups').find(group => props.session.get('group') === group.get('name')) |
|
202 } |
|
203 |
|
204 return { |
|
205 currentSession: props.session, |
|
206 createGroup: state.get('createGroup'), |
|
207 groups: state.get('groups'), |
|
208 group |
|
209 }; |
|
210 } |
|
211 |
|
212 function mapDispatchToProps(dispatch) { |
|
213 return { |
|
214 sessionsActions: bindActionCreators(sessionsActions, dispatch), |
|
215 authActions: bindActionCreators(authActions, dispatch), |
|
216 } |
|
217 } |
|
218 |
|
219 export default connect(mapStateToProps, mapDispatchToProps)(CreateSession); |