4 import React, { Component } from 'react'; |
4 import React, { Component } from 'react'; |
5 import { connect } from 'react-redux'; |
5 import { connect } from 'react-redux'; |
6 import { withRouter } from 'react-router'; |
6 import { withRouter } from 'react-router'; |
7 import { bindActionCreators } from 'redux'; |
7 import { bindActionCreators } from 'redux'; |
8 // import logo from './logo.svg'; |
8 // import logo from './logo.svg'; |
9 import { NavDropdown, MenuItem, Modal} from 'react-bootstrap'; |
9 import { NavDropdown, MenuItem } from 'react-bootstrap'; |
|
10 import Modal from 'react-modal'; |
10 import * as authActions from '../actions/authActions'; |
11 import * as authActions from '../actions/authActions'; |
11 import { forceSync } from '../actions/networkActions'; |
12 import { forceSync } from '../actions/networkActions'; |
12 import { groupSetCurrent } from '../actions/groupActions'; |
13 import { groupSetCurrent } from '../actions/groupActions'; |
13 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors'; |
14 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors'; |
14 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors'; |
15 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors'; |
25 history.push('/login'); |
26 history.push('/login'); |
26 } |
27 } |
27 |
28 |
28 if (isAuthenticated) { |
29 if (isAuthenticated) { |
29 return ( |
30 return ( |
30 <NavDropdown title={ currentUser.get('username') }> |
31 <NavDropdown className="navs" title={ currentUser.get('username') }> |
31 <li> |
32 <li> |
32 <a className="user-dropdown" href="#settings" onClick={onClickSettings}>Paramètres</a> |
33 <a className="user-dropdown" href="#settings" onClick={onClickSettings}>Paramètres</a> |
33 </li> |
34 </li> |
34 <li> |
35 <li> |
35 <a className="user-dropdown" href="#logout" onClick={onLogout}>Se déconnecter</a> |
36 <a className="user-dropdown" href="#logout" onClick={onLogout}>Se déconnecter</a> |
105 } |
106 } |
106 |
107 |
107 } |
108 } |
108 |
109 |
109 class AppNavbar extends Component { |
110 class AppNavbar extends Component { |
110 |
111 constructor(props) { |
111 state = { |
112 super(props); |
112 showModal: false |
113 this.state = { modalIsOpen: false }; |
|
114 } |
|
115 |
|
116 openModal = () => { |
|
117 this.setState({modalIsOpen: true}); |
113 } |
118 } |
114 |
119 |
115 closeModal = () => { |
120 closeModal = () => { |
116 this.setState({ showModal: false }); |
121 this.setState({modalIsOpen: false}); |
|
122 } |
|
123 |
|
124 handleModalCloseRequest = () => { |
|
125 // opportunity to validate something and keep the modal open even if it |
|
126 // requested to be closed |
|
127 this.setState({modalIsOpen: false}); |
117 } |
128 } |
118 |
129 |
119 onClickHome = (e) => { |
130 onClickHome = (e) => { |
120 e.preventDefault(); |
131 e.preventDefault(); |
121 this.props.history.push('/'); |
132 this.props.history.push('/'); |
191 <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
202 <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
192 <Online {...this.props} /> |
203 <Online {...this.props} /> |
193 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
204 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
194 </ul> |
205 </ul> |
195 </div> |
206 </div> |
196 <Modal show={this.state.showModal} onHide={this.closeModal}> |
207 <Modal |
197 <Modal.Body> |
208 className="Modal__Bootstrap modal-dialog" |
198 <p className="text-center"> |
209 // closeTimeoutMS={150} |
199 Certaines données n'ont pas encore été sauvegardées. |
210 isOpen={this.state.modalIsOpen} |
200 <br /> |
211 onRequestClose={this.handleModalCloseRequest} |
201 Si vous continuez, elles seront perdues. |
212 > |
202 </p> |
213 <div className="modal-content"> |
203 </Modal.Body> |
214 <div className="modal-body"> |
204 <Modal.Footer> |
215 <p className="text-center"> |
205 <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button> |
216 Certaines données n'ont pas encore été sauvegardées. |
206 <button type="submit" className="btn btn-default btn-lg" onClick={this.closeModal}>Fermer</button> |
217 <br /> |
207 </Modal.Footer> |
218 Si vous continuez, elles seront perdues. |
|
219 </p> |
|
220 </div> |
|
221 <div className="modal-footer"> |
|
222 <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button> |
|
223 <button type="submit" className="btn btn-default btn-lg" onClick={this.handleModalCloseRequest}>Fermer</button> |
|
224 </div> |
|
225 </div> |
208 </Modal> |
226 </Modal> |
209 </div> |
227 </div> |
210 </nav> |
228 </nav> |
211 |
229 |
212 ); |
230 ); |