client/src/components/Navbar.js
changeset 134 be36eed5e6e0
parent 130 78246db1cbac
child 143 cfcbf4bc66f1
--- a/client/src/components/Navbar.js	Thu Aug 03 09:44:37 2017 +0200
+++ b/client/src/components/Navbar.js	Thu Aug 03 17:33:00 2017 +0200
@@ -7,7 +7,9 @@
 import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap';
 import * as authActions from '../actions/authActions';
 import { forceSync } from '../actions/networkActions';
-import { ActionEnum } from '../constants';
+import { groupSetCurrent } from '../actions/groupActions';
+import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
+import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
 import './Navbar.css';
 
 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {
@@ -63,6 +65,27 @@
   )
 }
 
+const GroupStatus = ({currentGroup, groups, onSelect}) => {
+
+  if(currentGroup) {
+    const currentGroupName = currentGroup.get('name');
+    return (
+      <NavDropdown title={currentGroupName} id="group-dropdown" onSelect={onSelect}>
+        { groups && groups.map((group, key) => {
+            const groupName = group.get('name');
+            const className = (groupName === currentGroupName)?'active':null;
+            return <MenuItem className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
+          }
+        )}
+        <MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem>
+      </NavDropdown>
+    )
+  } else {
+    return null;
+  }
+
+}
+
 class AppNavbar extends Component {
 
   state = {
@@ -116,6 +139,14 @@
     this.props.networkActions.forceSync();
   }
 
+  onGroupSelect = (groupName) => {
+    if(groupName === "__create_group__") {
+      this.props.history.push('/create-group');
+    } else {
+      this.props.groupActions.groupSetCurrent(groupName);
+    }
+  }
+
   render() {
     return (
       <Navbar fluid inverse fixedTop>
@@ -130,6 +161,7 @@
             <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
           </Nav>
           <Nav pullRight>
+            <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
             <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
             <Online {...this.props} />
             <LoginNav {...this.props} onLogout={this.onClickLogout} />
@@ -159,19 +191,21 @@
 
 function mapStateToProps(state, props) {
   return {
-    isAuthenticated: state.getIn(['authStatus', 'isAuthenticated']),
-    currentUser: state.getIn(['authStatus', 'currentUser']),
-    online: state.getIn(['status', 'online']),
-    isSynchronizing: state.getIn(['status', 'isSynchronizing']),
-    isSynchronized: state.get('notes').every((n) => n.get('action')===ActionEnum.NONE) &&
-      state.get('sessions').every((n) => n.get('action')===ActionEnum.NONE)
+    isAuthenticated: isAuthenticated(state),
+    currentUser: getCurrentUser(state),
+    online: getOnline(state),
+    isSynchronizing: isSynchronizing(state),
+    isSynchronized: isSynchronized(state),
+    currentGroup: getCurrentGroup(state),
+    groups: getGroups(state)
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     authActions: bindActionCreators(authActions, dispatch),
-    networkActions: bindActionCreators({ forceSync }, dispatch)
+    networkActions: bindActionCreators({ forceSync }, dispatch),
+    groupActions: bindActionCreators({ groupSetCurrent }, dispatch)
   }
 }