remove direct DOM manipulation

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

@@ -2,9 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import _ from 'lodash';
 import cx from 'classnames';
 import styles from './styles.scss';
-
 import { showModal } from '/imports/ui/components/app/service';
-
 import Button from '../button/component';
 import RecordingIndicator from './recording-indicator/component';
 import SettingsDropdownContainer from './settings-dropdown/container';
@@ -50,14 +48,8 @@ class NavBar extends Component {
   }
 
   handleToggleUserList() {
-    let btn = document.getElementById('UserListBtn')
-                      .getAttribute('aria-expanded');
-
-    let isExpanded = (btn == 'true') ? 'false' : 'true';
-
-    document.getElementById('UserListBtn')
-            .setAttribute('aria-expanded', isExpanded);
-
+    let toggled = (this.props.isExpanded == false) ? true : false;
+    this.props.setToggleState(toggled);
     this.props.toggleUserList();
   }
 
@@ -68,7 +60,7 @@ class NavBar extends Component {
   }
 
   render() {
-    const { hasUnreadMessages, beingRecorded } = this.props;
+    const { hasUnreadMessages, beingRecorded, isExpanded } = this.props;
 
     let toggleBtnClasses = {};
     toggleBtnClasses[styles.btn] = true;
@@ -85,8 +77,7 @@ class NavBar extends Component {
             label={'User-List Toggle'}
             icon={'user'}
             className={cx(toggleBtnClasses)}
-            aria-expanded="false"
-            id="UserListBtn"
+            aria-expanded={isExpanded}
           />
         </div>
         <div className={styles.center} role="banner">

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

@@ -1,14 +1,13 @@
 import React, { Component, PropTypes } from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
 import { withRouter } from 'react-router';
-
 import Meetings from '/imports/api/meetings';
 import Auth from '/imports/ui/services/auth';
 import userListService from '../user-list/service';
 import ChatService from '../chat/service';
 import Service from './service';
 import { meetingIsBreakout } from '/imports/ui/components/app/service';
-
+import LocalStorage from '/imports/ui/services/storage/local.js';
 import NavBar from './component';
 
 const CHAT_CONFIG = Meteor.settings.public.chat;
@@ -19,6 +18,10 @@ class NavBarContainer extends Component {
     super(props);
   }
 
+  componentWillUnmount() {
+    LocalStorage.removeItem('bbb.toggleUserList.isExpanded');
+  }
+
   render() {
     return (
       <NavBar {...this.props}>
@@ -29,6 +32,14 @@ class NavBarContainer extends Component {
 }
 
 export default withRouter(createContainer(({ location, router }) => {
+
+  let toggleState = LocalStorage.getItem('bbb.toggleUserList.isExpanded');
+  let isExpanded = (!toggleState) ? false : toggleState;
+
+  const setToggleState = (state) => {
+    LocalStorage.setItem('bbb.toggleUserList.isExpanded', state);
+  };
+
   let meetingTitle;
   let meetingRecorded;
 
@@ -60,6 +71,8 @@ export default withRouter(createContainer(({ location, router }) => {
   const currentUserId = Auth.userID;
 
   return {
+    setToggleState,
+    isExpanded,
     breakouts,
     currentUserId,
     meetingId,