fix search ordering; add room labels; hide input areas if searching

src/controllers/organisms/RoomView.js

@@ -288,6 +288,7 @@ module.exports = {
 
     fillSpace: function() {
         if (!this.refs.messagePanel) return;
+        if (this.state.searchResults) return; // TODO: paginate search results
         var messageWrapperScroll = this._getScrollNode();
         if (messageWrapperScroll.scrollTop < messageWrapperScroll.clientHeight && this.state.room.oldState.paginationToken) {
             this.setState({paginating: true});
@@ -426,7 +427,7 @@ module.exports = {
 
     onSearch: function(term, scope) {
         var filter;
-        if (scope === "Room") { // FIXME: should be enum
+        if (scope === "Room") {
             filter = {
                 // XXX: it's unintuitive that the filter for searching doesn't have the same shape as the v2 filter API :(
                 rooms: [
@@ -443,6 +444,14 @@ module.exports = {
                         search_term: term,
                         filter: filter,
                         order_by: "recent",
+                        include_state: true,
+                        groupings: {
+                            group_by: [
+                                {
+                                    key: "room_id"
+                                }
+                            ]
+                        },
                         event_context: {
                             before_limit: 1,
                             after_limit: 1,
@@ -465,13 +474,14 @@ module.exports = {
                              .sort(function(a, b) { b.length - a.length });
             }
             else {
-                // sqlite doesn't, so just highlight the literal search term
+                // sqlite doesn't, so just try to highlight the literal search term
                 highlights = [ term ];
             }
 
             self.setState({
                 highlights: highlights,
                 searchResults: data,
+                searchScope: scope,
             });
         }, function(error) {
             var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
@@ -484,20 +494,31 @@ module.exports = {
 
     getEventTiles: function() {
         var DateSeparator = sdk.getComponent('molecules.DateSeparator');
+        var cli = MatrixClientPeg.get();
 
         var ret = [];
         var count = 0;
 
         var EventTile = sdk.getComponent('messages.Event');
+        var self = this;
 
         if (this.state.searchResults) {
-            // XXX: this dance is foul, due to the results API not returning sorted results
+            // XXX: this dance is foul, due to the results API not directly returning sorted results
             var results = this.state.searchResults.search_categories.room_events.results;
-            var eventIds = Object.keys(results);
+            var roomIdGroups = this.state.searchResults.search_categories.room_events.groups.room_id;
+
+            Object.keys(roomIdGroups)
+                  .sort(function(a, b) { roomIdGroups[a].order - roomIdGroups[b].order }) // WHY NOT RETURN AN ORDERED ARRAY?!?!?!
+                  .forEach(function(roomId)
+            {
                 // XXX: todo: merge overlapping results somehow?
                 // XXX: why doesn't searching on name work?
-            var resultList = eventIds.map(function(key) { return results[key]; }); // .sort(function(a, b) { b.rank - a.rank });
+                if (self.state.searchScope === 'All') {
-            for (var i = 0; i < resultList.length; i++) {
+                    ret.push(<li key={ roomId }><h1>Room: { cli.getRoom(roomId).name }</h1></li>);
+                }
+
+                var resultList = roomIdGroups[roomId].results.map(function(eventId) { return results[eventId]; });
+                for (var i = resultList.length - 1; i >= 0; i--) {
                     var ts1 = resultList[i].result.origin_server_ts;
                     ret.push(<li key={ts1 + "-search"}><DateSeparator ts={ts1}/></li>); // Rank: {resultList[i].rank}
                     var mxEv = new Matrix.MatrixEvent(resultList[i].result);
@@ -508,7 +529,7 @@ module.exports = {
                         }
                     }
                     if (EventTile.haveTileForEvent(mxEv)) {
-                    ret.push(<li key={mxEv.getId() + "+0"}><EventTile mxEvent={mxEv} highlights={this.state.highlights}/></li>);
+                        ret.push(<li key={mxEv.getId() + "+0"}><EventTile mxEvent={mxEv} highlights={self.state.highlights}/></li>);
                     }
                     if (resultList[i].context.events_after[0]) {
                         var mxEv2 = new Matrix.MatrixEvent(resultList[i].context.events_after[0]);
@@ -517,6 +538,7 @@ module.exports = {
                         }
                     }
                 }
+            });
             return ret;
         }
 

src/skins/vector/views/organisms/RoomView.js

@@ -291,6 +291,20 @@ module.exports = React.createClass({
                                  </div>;
             }
 
+            var statusArea, messageComposer;
+            if (!this.state.searchResults) {
+                statusArea =
+                    <div className="mx_RoomView_statusArea">
+                        <div className="mx_RoomView_statusAreaBox">
+                            <div className="mx_RoomView_statusAreaBox_line"></div>
+                            {statusBar}
+                        </div>
+                    </div>
+
+                messageComposer =
+                    <MessageComposer room={this.state.room} roomView={this} uploadFile={this.uploadFile} />
+            }
+
             return (
                 <div className="mx_RoomView">
                     <RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings} onSearchClick={this.onSearchClick}
@@ -310,13 +324,8 @@ module.exports = React.createClass({
                             </ol>
                         </div>
                     </GeminiScrollbar>
-                    <div className="mx_RoomView_statusArea">
+                    { statusArea }
-                        <div className="mx_RoomView_statusAreaBox">
+                    { messageComposer }
-                            <div className="mx_RoomView_statusAreaBox_line"></div>
-                            {statusBar}
-                        </div>
-                    </div>
-                    <MessageComposer room={this.state.room} roomView={this} uploadFile={this.uploadFile} />
                 </div>
             );
         }