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 } from 'react-bootstrap'; |
|
10 import Modal from 'react-modal'; |
9 import Modal from 'react-modal'; |
11 import * as authActions from '../actions/authActions'; |
10 import * as authActions from '../actions/authActions'; |
12 import { forceSync } from '../actions/networkActions'; |
11 import { forceSync } from '../actions/networkActions'; |
13 import { groupSetCurrent } from '../actions/groupActions'; |
12 import { groupSetCurrent } from '../actions/groupActions'; |
14 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors'; |
13 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors'; |
15 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors'; |
14 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors'; |
16 |
15 import NavbarLogin from './NavbarLogin'; |
17 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => { |
16 import NavbarGroup from './NavbarGroup'; |
18 |
|
19 const onClickSettings = (e) => { |
|
20 e.preventDefault(); |
|
21 history.push('/settings'); |
|
22 } |
|
23 |
|
24 const onClickLogin = (e) => { |
|
25 e.preventDefault(); |
|
26 history.push('/login'); |
|
27 } |
|
28 |
|
29 if (isAuthenticated) { |
|
30 return ( |
|
31 <NavDropdown className="navs" title={ currentUser.get('username') }> |
|
32 <li> |
|
33 <a className="user-dropdown" href="#settings" onClick={onClickSettings}>Paramètres</a> |
|
34 </li> |
|
35 <li> |
|
36 <a className="user-dropdown" href="#logout" onClick={onLogout}>Se déconnecter</a> |
|
37 </li> |
|
38 </NavDropdown> |
|
39 ); |
|
40 } |
|
41 return ( |
|
42 <li> |
|
43 <a className="navs" onClick={onClickLogin} href="/login">Se connecter</a> |
|
44 </li> |
|
45 ); |
|
46 } |
|
47 |
17 |
48 const Online = ({ online }) => { |
18 const Online = ({ online }) => { |
49 return ( |
19 return ( |
50 <li> |
20 <li> |
51 <a> |
21 <a> |
83 </a> |
53 </a> |
84 </li> |
54 </li> |
85 ); |
55 ); |
86 } |
56 } |
87 |
57 |
88 |
|
89 const GroupStatus = ({currentGroup, groups, onSelect}) => { |
|
90 |
|
91 if(currentGroup) { |
|
92 const currentGroupName = currentGroup.get('name'); |
|
93 return ( |
|
94 <NavDropdown className="navs" title={currentGroupName} onSelect={onSelect}> |
|
95 { groups && groups.map((group, key) => { |
|
96 const groupName = group.get('name'); |
|
97 const className = (groupName === currentGroupName)?'active':null; |
|
98 return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem> |
|
99 } |
|
100 )} |
|
101 <MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem> |
|
102 </NavDropdown> |
|
103 ) |
|
104 } else { |
|
105 return null; |
|
106 } |
|
107 |
|
108 } |
|
109 |
58 |
110 class AppNavbar extends Component { |
59 class AppNavbar extends Component { |
111 constructor(props) { |
60 constructor(props) { |
112 super(props); |
61 super(props); |
113 this.state = { modalIsOpen: false }; |
62 this.state = { modalIsOpen: false }; |
196 <li> |
145 <li> |
197 <a className="navs" onClick={this.onClickSessions} href="/sessions">Accueil</a> |
146 <a className="navs" onClick={this.onClickSessions} href="/sessions">Accueil</a> |
198 </li> |
147 </li> |
199 </ul> |
148 </ul> |
200 <ul className="nav navbar-nav navbar-right"> |
149 <ul className="nav navbar-nav navbar-right"> |
201 <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/> |
150 <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/> |
202 <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
151 <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
203 <Online {...this.props} /> |
152 <Online {...this.props} /> |
204 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
153 <NavbarLogin {...this.props} onLogout={this.onClickLogout} /> |
205 </ul> |
154 </ul> |
206 </div> |
155 </div> |
207 <Modal |
156 <Modal |
208 className="Modal__Bootstrap modal-dialog" |
157 className="Modal__Bootstrap modal-dialog" |
209 // closeTimeoutMS={150} |
158 // closeTimeoutMS={150} |