From e29227db4e44b71d9529dc6ac0378253075926a3 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 2 Nov 2018 15:27:17 +0100
Subject: [PATCH] bring back "filter rooms" field

this does the filtering in RoomList instead of RoomSubList, so
we can hide sections that don't have any results.

The filtering does happen with every rerender of RoomList,
but only does something while searching, so the performance
implications are probably negligible.
---
 src/components/structures/LeftPanel.js   |  9 +--
 src/components/structures/RoomSubList.js | 37 +++--------
 src/components/views/rooms/RoomList.js   | 80 ++++++++++++++----------
 3 files changed, 57 insertions(+), 69 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 247b12dc88..989644304b 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -179,13 +179,9 @@ const LeftPanel = React.createClass({
         const RoomList = sdk.getComponent('rooms.RoomList');
         const TagPanel = sdk.getComponent('structures.TagPanel');
         const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
+        const SearchBox = sdk.getComponent('structures.SearchBox');
         const CallPreview = sdk.getComponent('voip.CallPreview');
 
-        const topBox = <TopLeftMenuButton collapsed={ this.props.collapsed } />;
-/*
-        const SearchBox = sdk.getComponent('structures.SearchBox');
-        const topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
-*/
         const tagPanelEnabled = !SettingsStore.getValue("TagPanel.disableTagPanel");
         const tagPanel = tagPanelEnabled ? <TagPanel /> : <div />;
 
@@ -202,7 +198,8 @@ const LeftPanel = React.createClass({
             <div className={containerClasses}>
                 { tagPanel }
                 <aside className={"mx_LeftPanel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
-                    { topBox }
+                    <TopLeftMenuButton collapsed={ this.props.collapsed }/>
+                    <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList
                         ref={this.collectRoomList}
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 3ea819e088..f99c4bf90b 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -52,7 +52,7 @@ const RoomSubList = React.createClass({
         collapsed: PropTypes.bool.isRequired, // is LeftPanel collapsed?
         onHeaderClick: PropTypes.func,
         incomingCall: PropTypes.object,
-        searchFilter: PropTypes.string,
+        isFiltered: PropTypes.bool,
         headerItems: PropTypes.node, // content shown in the sublist header
         extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles
     },
@@ -60,7 +60,6 @@ const RoomSubList = React.createClass({
     getInitialState: function() {
         return {
             hidden: this.props.startAsHidden || false,
-            sortedList: [],
         };
     },
 
@@ -74,9 +73,6 @@ const RoomSubList = React.createClass({
     },
 
     componentWillMount: function() {
-        this.setState({
-            sortedList: this.applySearchFilter(this.props.list, this.props.searchFilter),
-        });
         this.dispatcherRef = dis.register(this.onAction);
     },
 
@@ -84,23 +80,6 @@ const RoomSubList = React.createClass({
         dis.unregister(this.dispatcherRef);
     },
 
-    componentWillReceiveProps: function(newProps) {
-        // order the room list appropriately before we re-render
-        //if (debug) console.log("received new props, list = " + newProps.list);
-        this.setState({
-            sortedList: this.applySearchFilter(newProps.list, newProps.searchFilter),
-        });
-    },
-
-    applySearchFilter: function(list, filter) {
-        if (filter === "") return list;
-        const lcFilter = filter.toLowerCase();
-        // case insensitive if room name includes filter,
-        // or if starts with `#` and one of room's aliases starts with filter
-        return list.filter((room) => (room.name && room.name.toLowerCase().includes(lcFilter)) ||
-            (filter[0] === '#' && room.getAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter))));
-    },
-
     // The header is collapsable if it is hidden or not stuck
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isCollapsableOnClick: function() {
@@ -196,7 +175,7 @@ const RoomSubList = React.createClass({
 
     makeRoomTiles: function() {
         const RoomTile = sdk.getComponent("rooms.RoomTile");
-        return this.state.sortedList.map((room, index) => {
+        return this.props.list.map((room, index) => {
             return <RoomTile
                 room={room}
                 roomSubList={this}
@@ -218,7 +197,7 @@ const RoomSubList = React.createClass({
         e.preventDefault();
         e.stopPropagation();
         // find first room which has notifications and switch to it
-        for (const room of this.state.sortedList) {
+        for (const room of this.props.list) {
             const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
             const highlight = room.getUnreadNotificationCount('highlight') > 0;
             const notificationCount = room.getUnreadNotificationCount();
@@ -241,10 +220,10 @@ const RoomSubList = React.createClass({
         e.preventDefault();
         e.stopPropagation();
         // switch to first room in sortedList as that'll be the top of the list for the user
-        if (this.state.sortedList && this.state.sortedList.length > 0) {
+        if (this.props.list && this.props.list.length > 0) {
             dis.dispatch({
                 action: 'view_room',
-                room_id: this.state.sortedList[0].roomId,
+                room_id: this.props.list[0].roomId,
             });
         } else if (this.props.extraTiles && this.props.extraTiles.length > 0) {
             // Group Invites are different in that they are all extra tiles and not rooms
@@ -312,7 +291,7 @@ const RoomSubList = React.createClass({
             );
         }
 
-        const len = this.state.sortedList.length + this.props.extraTiles.length;
+        const len = this.props.list.length + this.props.extraTiles.length;
         let chevron;
         if (len) {
             const chevronClasses = classNames({
@@ -323,7 +302,7 @@ const RoomSubList = React.createClass({
             chevron = (<div className={chevronClasses}></div>);
         }
 
-        const tabindex = this.props.searchFilter === "" ? "0" : "-1";
+        const tabindex = this.props.isFiltered ? "0" : "-1";
         return (
             <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
                 <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
@@ -338,7 +317,7 @@ const RoomSubList = React.createClass({
     },
 
     render: function() {
-        const len = this.state.sortedList.length + this.props.extraTiles.length;
+        const len = this.props.list.length + this.props.extraTiles.length;
         if (len) {
             const subListClasses = classNames({
                 "mx_RoomSubList": true,
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index c2baccc676..126ff5b3b9 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -33,8 +33,9 @@ const Receipt = require('../../../utils/Receipt');
 import TagOrderStore from '../../../stores/TagOrderStore';
 import RoomListStore from '../../../stores/RoomListStore';
 import GroupStore from '../../../stores/GroupStore';
-
+import RoomSubList from '../../structures/RoomSubList';
 import ResizeHandle from '../elements/ResizeHandle';
+
 import {Resizer, FixedDistributor, FlexSizer} from '../../../resizer'
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -440,39 +441,50 @@ module.exports = React.createClass({
         return ret;
     },
 
+    _applySearchFilter: function(list, filter) {
+        if (filter === "") return list;
+        const lcFilter = filter.toLowerCase();
+        // case insensitive if room name includes filter,
+        // or if starts with `#` and one of room's aliases starts with filter
+        return list.filter((room) => (room.name && room.name.toLowerCase().includes(lcFilter)) ||
+            (filter[0] === '#' && room.getAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter))));
+    },
+
+    _mapSubListProps: function(subListsProps) {
+        const defaultProps = {
+            collapsed: this.props.collapsed,
+            isFiltered: !!this.props.searchFilter,
+            incomingCall: this.state.incomingCall,
+        };
+
+        subListsProps.forEach((p) => {
+            p.list = this._applySearchFilter(p.list, this.props.searchFilter);
+        });
+
+        subListsProps = subListsProps.filter((props => {
+            const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
+            return len !== 0 || (props.onAddRoom && !this.props.searchFilter);
+        }));
+
+        return subListsProps.reduce((components, props, i) => {
+            props = Object.assign({}, defaultProps, props);
+            const isLast = i === subListsProps.length - 1;
+            const {key, label, ... otherProps} = props;
+            const chosenKey = key || label;
+
+            let subList = <RoomSubList key={chosenKey} label={label} {...otherProps} />;
+            if (!isLast) {
+                return components.concat(
+                    subList,
+                    <ResizeHandle key={chosenKey+"-resizer"} vertical={true} />
+                );
+            } else {
+                return components.concat(subList);
+            }
+        }, []);
+    },
+
     render: function() {
-        const RoomSubList = sdk.getComponent('structures.RoomSubList');
-
-        const mapProps = (subListsProps) => {
-            const defaultProps = {
-                collapsed: this.props.collapsed,
-                searchFilter: this.props.searchFilter,
-                incomingCall: this.state.incomingCall,
-            };
-
-            subListsProps = subListsProps.filter((props => {
-                const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
-                return len !== 0 || props.onAddRoom;
-            }));
-
-            return subListsProps.reduce((components, props, i) => {
-                props = Object.assign({}, defaultProps, props);
-                const isLast = i === subListsProps.length - 1;
-                const {key, label, ... otherProps} = props;
-                const chosenKey = key || label;
-
-                let subList = <RoomSubList key={chosenKey} label={label} {...otherProps} />;
-                if (!isLast) {
-                    return components.concat(
-                        subList,
-                        <ResizeHandle key={chosenKey+"-resizer"} vertical={true} />
-                    );
-                } else {
-                    return components.concat(subList);
-                }
-            }, []);
-        }
-
         let subLists = [
             {
                 list: [],
@@ -545,7 +557,7 @@ module.exports = React.createClass({
             },
         ]);
 
-        const subListComponents = mapProps(subLists);
+        const subListComponents = this._mapSubListProps(subLists);
 
         return (
             <div ref={(d) => this.resizeContainer = d} className="mx_RoomList">