fix bugs in RoomSubListHeader splitout

src/components/structures/RoomSubList.js

@@ -28,6 +28,7 @@ var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
 var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 var ConstantTimeDispatcher = require('matrix-react-sdk/lib/ConstantTimeDispatcher');
+var RoomSubListHeader = require('./RoomSubListHeader.js');
 
 // turn this on for drag & drop console debugging galore
 var debug = false;
@@ -104,7 +105,7 @@ var RoomSubList = React.createClass({
     componentWillMount: function() {
         constantTimeDispatcher.register("RoomSubList.sort", this.props.tagName, this.onSort);
         this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order);
-        this._fixUndefinedOrder(list);
+        this._fixUndefinedOrder(this.props.list);
     },
 
     componentWillUnmount: function() {
@@ -115,7 +116,7 @@ var RoomSubList = React.createClass({
         // order the room list appropriately before we re-render
         //if (debug) console.log("received new props, list = " + newProps.list);
         this.sortList(this.applySearchFilter(newProps.list, newProps.searchFilter), newProps.order);
-        this._fixUndefinedOrder(list);
+        this._fixUndefinedOrder(newProps.list);
     },
 
     onSort: function() {
@@ -133,7 +134,7 @@ var RoomSubList = React.createClass({
     // The header is collapsable if it is hidden or not stuck
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isCollapsableOnClick: function() {
-        var stuck = this.refs.header.dataset.stuck;
+        var stuck = this.refs.header.refs.header.dataset.stuck;
         if (this.state.hidden || stuck === undefined || stuck === "none") {
             return true;
         } else {
@@ -156,7 +157,7 @@ var RoomSubList = React.createClass({
             this.props.onHeaderClick(isHidden);
         } else {
             // The header is stuck, so the click is to be interpreted as a scroll to the header
-            this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
+            this.props.onHeaderClick(this.state.hidden, this.refs.header.refs.header.dataset.originalPosition);
         }
     },
 
@@ -508,12 +509,15 @@ var RoomSubList = React.createClass({
             return connectDropTarget(
                 <div>
                     <RoomSubListHeader
+                        ref='header'
                         label={ this.props.label }
                         tagName={ this.props.tagName }
                         roomCount={ roomCount }
                         collapsed={ this.props.collapsed }
                         hidden={ this.state.hidden }
                         isIncomingCallRoom={ isIncomingCallRoom }
+                        roomNotificationCount={ this.roomNotificationCount() }
+                        onClick={ this.onClick }
                         onHeaderClick={ this.props.onHeaderClick }
                     />
                     { subList }
@@ -526,12 +530,15 @@ var RoomSubList = React.createClass({
                 <div className="mx_RoomSubList">
                     { this.props.alwaysShowHeader ? 
                         <RoomSubListHeader
+                            ref='header'
                             label={ this.props.label }
                             tagName={ this.props.tagName }
                             roomCount={ roomCount }
                             collapsed={ this.props.collapsed }
                             hidden={ this.state.hidden }
                             isIncomingCallRoom={ isIncomingCallRoom }
+                            roomNotificationCount={ this.roomNotificationCount() }
+                            onClick={ this.onClick }
                             onHeaderClick={ this.props.onHeaderClick }
                         />
                      : undefined }

src/components/structures/RoomSubListHeader.js

@@ -20,8 +20,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var classNames = require('classnames');
 var sdk = require('matrix-react-sdk')
-var dis = require('matrix-react-sdk/lib/dispatcher');
+var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 var ConstantTimeDispatcher = require('matrix-react-sdk/lib/ConstantTimeDispatcher');
@@ -32,10 +31,15 @@ module.exports = React.createClass({
     propTypes: {
         label: React.PropTypes.string.isRequired,
         tagName: React.PropTypes.string,
-        roomCount: React.PropTypes.string,
+        roomCount: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.number
+        ]),
         collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed?
         isIncomingCallRoom: React.PropTypes.bool,
+        roomNotificationCount: React.PropTypes.array,
         hidden: React.PropTypes.bool,
+        onClick: React.PropTypes.func,
         onHeaderClick: React.PropTypes.func,
     },
 
@@ -60,7 +64,7 @@ module.exports = React.createClass({
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        var subListNotifications = this.roomNotificationCount();
+        var subListNotifications = this.props.roomNotificationCount;
         var subListNotifCount = subListNotifications[0];
         var subListNotifHighlight = subListNotifications[1];
 
@@ -86,6 +90,7 @@ module.exports = React.createClass({
         // When collapsed, allow a long hover on the header to show user
         // the full tag name and room count
         var title;
+        var roomCount = this.props.roomCount;
         if (this.props.collapsed) {
             title = this.props.label;
             if (roomCount !== '') {
@@ -93,6 +98,7 @@ module.exports = React.createClass({
             }
         }
 
+        var incomingCall;
         if (this.props.isIncomingCallRoom) {
             var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
             incomingCall = <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={ this.props.incomingCall }/>;
@@ -102,7 +108,7 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
-                <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
+                <AccessibleButton onClick={ this.props.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
                     { this.props.collapsed ? '' : this.props.label }
                     <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
                     <div className={chevronClasses}></div>