5 import { bindActionCreators } from 'redux'; |
5 import { bindActionCreators } from 'redux'; |
6 // import logo from './logo.svg'; |
6 // import logo from './logo.svg'; |
7 import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap'; |
7 import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap'; |
8 import * as authActions from '../actions/authActions'; |
8 import * as authActions from '../actions/authActions'; |
9 import { forceSync } from '../actions/networkActions'; |
9 import { forceSync } from '../actions/networkActions'; |
10 import { ActionEnum } from '../constants'; |
10 import { groupSetCurrent } from '../actions/groupActions'; |
|
11 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors'; |
|
12 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors'; |
11 import './Navbar.css'; |
13 import './Navbar.css'; |
12 |
14 |
13 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => { |
15 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => { |
14 |
16 |
15 const onClickSettings = (e) => { |
17 const onClickSettings = (e) => { |
61 <span className={classnames}></span> |
63 <span className={classnames}></span> |
62 </NavItem> |
64 </NavItem> |
63 ) |
65 ) |
64 } |
66 } |
65 |
67 |
|
68 const GroupStatus = ({currentGroup, groups, onSelect}) => { |
|
69 |
|
70 if(currentGroup) { |
|
71 const currentGroupName = currentGroup.get('name'); |
|
72 return ( |
|
73 <NavDropdown title={currentGroupName} id="group-dropdown" onSelect={onSelect}> |
|
74 { groups && groups.map((group, key) => { |
|
75 const groupName = group.get('name'); |
|
76 const className = (groupName === currentGroupName)?'active':null; |
|
77 return <MenuItem className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem> |
|
78 } |
|
79 )} |
|
80 <MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem> |
|
81 </NavDropdown> |
|
82 ) |
|
83 } else { |
|
84 return null; |
|
85 } |
|
86 |
|
87 } |
|
88 |
66 class AppNavbar extends Component { |
89 class AppNavbar extends Component { |
67 |
90 |
68 state = { |
91 state = { |
69 showModal: false |
92 showModal: false |
70 } |
93 } |
112 } |
135 } |
113 |
136 |
114 onSyncClick = (e) => { |
137 onSyncClick = (e) => { |
115 e.preventDefault(); |
138 e.preventDefault(); |
116 this.props.networkActions.forceSync(); |
139 this.props.networkActions.forceSync(); |
|
140 } |
|
141 |
|
142 onGroupSelect = (groupName) => { |
|
143 if(groupName === "__create_group__") { |
|
144 this.props.history.push('/create-group'); |
|
145 } else { |
|
146 this.props.groupActions.groupSetCurrent(groupName); |
|
147 } |
117 } |
148 } |
118 |
149 |
119 render() { |
150 render() { |
120 return ( |
151 return ( |
121 <Navbar fluid inverse fixedTop> |
152 <Navbar fluid inverse fixedTop> |
128 <Navbar.Collapse> |
159 <Navbar.Collapse> |
129 <Nav> |
160 <Nav> |
130 <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem> |
161 <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem> |
131 </Nav> |
162 </Nav> |
132 <Nav pullRight> |
163 <Nav pullRight> |
|
164 <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/> |
133 <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
165 <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} /> |
134 <Online {...this.props} /> |
166 <Online {...this.props} /> |
135 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
167 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
136 </Nav> |
168 </Nav> |
137 </Navbar.Collapse> |
169 </Navbar.Collapse> |
157 isAuthenticated: PropTypes.bool.isRequired |
189 isAuthenticated: PropTypes.bool.isRequired |
158 }; |
190 }; |
159 |
191 |
160 function mapStateToProps(state, props) { |
192 function mapStateToProps(state, props) { |
161 return { |
193 return { |
162 isAuthenticated: state.getIn(['authStatus', 'isAuthenticated']), |
194 isAuthenticated: isAuthenticated(state), |
163 currentUser: state.getIn(['authStatus', 'currentUser']), |
195 currentUser: getCurrentUser(state), |
164 online: state.getIn(['status', 'online']), |
196 online: getOnline(state), |
165 isSynchronizing: state.getIn(['status', 'isSynchronizing']), |
197 isSynchronizing: isSynchronizing(state), |
166 isSynchronized: state.get('notes').every((n) => n.get('action')===ActionEnum.NONE) && |
198 isSynchronized: isSynchronized(state), |
167 state.get('sessions').every((n) => n.get('action')===ActionEnum.NONE) |
199 currentGroup: getCurrentGroup(state), |
|
200 groups: getGroups(state) |
168 }; |
201 }; |
169 } |
202 } |
170 |
203 |
171 function mapDispatchToProps(dispatch) { |
204 function mapDispatchToProps(dispatch) { |
172 return { |
205 return { |
173 authActions: bindActionCreators(authActions, dispatch), |
206 authActions: bindActionCreators(authActions, dispatch), |
174 networkActions: bindActionCreators({ forceSync }, dispatch) |
207 networkActions: bindActionCreators({ forceSync }, dispatch), |
|
208 groupActions: bindActionCreators({ groupSetCurrent }, dispatch) |
175 } |
209 } |
176 } |
210 } |
177 |
211 |
178 export default connect(mapStateToProps, mapDispatchToProps)(withRouter(AppNavbar)); |
212 export default connect(mapStateToProps, mapDispatchToProps)(withRouter(AppNavbar)); |