Merge pull request #3234 from oswaldoacauan/userlist-toggle

[HTML5] Fix user-list toggle

bigbluebutton-html5/imports/ui/components/app/container.jsx

@@ -1,16 +1,17 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component, PropTypes, cloneElement } from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
 import App from './component';
 import { subscribeForData, pollExists } from './service';
+
 import NavBarContainer from '../nav-bar/container';
 import ActionsBarContainer from '../actions-bar/container';
 import MediaContainer from '../media/container';
 import SettingsModal from '../modals/settings/SettingsModal';
 
 const defaultProps = {
-  navbar: <NavBarContainer/>,
+  navbar: <NavBarContainer />,
-  actionsbar: <ActionsBarContainer/>,
+  actionsbar: <ActionsBarContainer />,
-  media: <MediaContainer/>,
+  media: <MediaContainer />,
   settings: <SettingsModal />,
 };
 
@@ -20,8 +21,11 @@ class AppContainer extends Component {
   }
 
   render() {
+    // inject location on the navbar container
+    let navbarWithLocation = cloneElement(this.props.navbar, { location: this.props.location });
+
     return (
-      <App {...this.props}>
+      <App {...this.props} navbar={navbarWithLocation}>
         {this.props.children}
       </App>
     );

bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx

@@ -1,6 +1,5 @@
 import React, { Component, PropTypes } from 'react';
 import styles from './styles.scss';
-import { withRouter } from 'react-router';
 import Button from '../button/component';
 import RecordButton from './recordbutton/component';
 
@@ -24,11 +23,7 @@ class NavBar extends Component {
   }
 
   handleToggleUserList() {
-    /*
+    this.props.toggleUserList();
-      TODO: Find out how to get the current route here
-      so we can change the click behavior
-    */
-    this.props.router.push('/users');
   }
 
   render() {
@@ -66,4 +61,4 @@ class NavBar extends Component {
 NavBar.propTypes = propTypes;
 NavBar.defaultProps = defaultProps;
 
-export default withRouter(NavBar);
+export default NavBar;

bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx

@@ -1,5 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
+import { withRouter } from 'react-router';
+
 import Auth from '/imports/ui/services/auth';
 import Meetings from '/imports/api/meetings';
 
@@ -19,7 +21,7 @@ class NavBarContainer extends Component {
   }
 }
 
-export default createContainer(() => {
+export default withRouter(createContainer(({ location, router }) => {
   let meetingTitle;
   let meetingRecorded;
 
@@ -33,10 +35,16 @@ export default createContainer(() => {
     meetingRecorded = meetingObject.currentlyBeingRecorded;
   }
 
-  let data = {
+  return {
     presentationTitle: meetingTitle,
     hasUnreadMessages: true,
     beingRecorded: meetingRecorded,
+    toggleUserList: () => {
+      if (location.pathname.indexOf('/users') !== -1) {
+        router.push('/');
+      } else {
+        router.push('/users');
+      }
+    },
   };
-  return data;
+}, NavBarContainer));
-}, NavBarContainer);