From 75302b1f971ac1b277f1149caaa962f4982f5b28 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 23 Dec 2015 10:10:08 +0000 Subject: [PATCH 1/2] Factor out a separate SearchResultTile --- src/component-index.js | 1 + src/components/structures/RoomView.js | 26 ++------ .../views/rooms/SearchResultTile.js | 59 +++++++++++++++++++ 3 files changed, 65 insertions(+), 21 deletions(-) create mode 100644 src/components/views/rooms/SearchResultTile.js diff --git a/src/component-index.js b/src/component-index.js index f10549ce4d..abb1c054d7 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -66,6 +66,7 @@ module.exports.components['views.rooms.RoomHeader'] = require('./components/view module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList'); module.exports.components['views.rooms.RoomSettings'] = require('./components/views/rooms/RoomSettings'); module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile'); +module.exports.components['views.rooms.SearchResultTile'] = require('./components/views/rooms/SearchResultTile'); module.exports.components['views.rooms.TabCompleteBar'] = require('./components/views/rooms/TabCompleteBar'); module.exports.components['views.settings.ChangeAvatar'] = require('./components/views/settings/ChangeAvatar'); module.exports.components['views.settings.ChangeDisplayName'] = require('./components/views/settings/ChangeDisplayName'); diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index ad30f25b22..daa429d79f 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -574,8 +574,8 @@ module.exports = React.createClass({ getSearchResultTiles: function() { - var DateSeparator = sdk.getComponent('messages.DateSeparator'); var EventTile = sdk.getComponent('rooms.EventTile'); + var SearchResultTile = sdk.getComponent('rooms.SearchResultTile'); var cli = MatrixClientPeg.get(); // XXX: todo: merge overlapping results somehow? @@ -615,33 +615,17 @@ module.exports = React.createClass({ continue; } - var eventId = mxEv.getId(); - if (this.state.searchScope === 'All') { var roomId = mxEv.getRoomId(); if(roomId != lastRoomId) { - ret.push(

  • Room: { cli.getRoom(roomId).name }

    • ); + ret.push(

  • Room: { cli.getRoom(roomId).name }

    • ); lastRoomId = roomId; } } - var ts1 = mxEv.getTs(); - ret.push(
    • ); // Rank: {resultList[i].rank} - - var timeline = result.context.getTimeline(); - for (var j = 0; j < timeline.length; j++) { - var ev = timeline[j]; - var highlights; - var contextual = (j != result.context.getOurEventIndex()); - if (!contextual) { - highlights = this.state.searchHighlights; - } - if (EventTile.haveTileForEvent(ev)) { - ret.push(
  • - -
    • ); - } - } + ret.push(); } return ret; }, diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.js new file mode 100644 index 0000000000..73ed74b169 --- /dev/null +++ b/src/components/views/rooms/SearchResultTile.js @@ -0,0 +1,59 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +'use strict'; + +var React = require('react'); +var sdk = require('../../../index'); + +module.exports = React.createClass({ + displayName: 'SearchResult', + + propTypes: { + searchResult: React.PropTypes.object.isRequired, + searchHighlights: React.PropTypes.array, + onClick: React.PropTypes.func, + }, + + render: function() { + var DateSeparator = sdk.getComponent('messages.DateSeparator'); + var EventTile = sdk.getComponent('rooms.EventTile'); + var result = this.props.searchResult; + var mxEv = result.context.getEvent(); + var eventId = mxEv.getId(); + + var ts1 = mxEv.getTs(); + var ret = []; + + var timeline = result.context.getTimeline(); + for (var j = 0; j < timeline.length; j++) { + var ev = timeline[j]; + var highlights; + var contextual = (j != result.context.getOurEventIndex()); + if (!contextual) { + highlights = this.props.searchHighlights; + } + if (EventTile.haveTileForEvent(ev)) { + ret.push() + } + } + return ( +
  • + {ret} +
    • ); + }, +}); From 4624e7a4858807f4b5330291d28818d03942f1c3 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 6 Jan 2016 16:46:29 +0000 Subject: [PATCH 2/2] Address review comments s/onClick/onSelect/ --- src/components/structures/RoomView.js | 12 +++++++++++- src/components/views/rooms/SearchResultTile.js | 9 +++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index daa429d79f..5f1ce2284d 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -618,7 +618,17 @@ module.exports = React.createClass({ if (this.state.searchScope === 'All') { var roomId = mxEv.getRoomId(); if(roomId != lastRoomId) { - ret.push(

  • Room: { cli.getRoom(roomId).name }

    • ); + var room = cli.getRoom(roomId); + + // XXX: if we've left the room, we might not know about + // it. We should tell the js sdk to go and find out about + // it. But that's not an issue currently, as synapse only + // returns results for rooms we're joined to. + var roomName = room ? room.name : "Unknown room "+roomId; + + ret.push(
  • +

    Room: { roomName }

    +
    • ); lastRoomId = roomId; } } diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.js index 73ed74b169..9d3af16ee7 100644 --- a/src/components/views/rooms/SearchResultTile.js +++ b/src/components/views/rooms/SearchResultTile.js @@ -23,9 +23,14 @@ module.exports = React.createClass({ displayName: 'SearchResult', propTypes: { + // a matrix-js-sdk SearchResult containing the details of this result searchResult: React.PropTypes.object.isRequired, + + // a list of strings to be highlighted in the results searchHighlights: React.PropTypes.array, - onClick: React.PropTypes.func, + + // callback to be called when the user selects this result + onSelect: React.PropTypes.func, }, render: function() { @@ -48,7 +53,7 @@ module.exports = React.createClass({ } if (EventTile.haveTileForEvent(ev)) { ret.push() + onHighlightClick={this.props.onSelect}/>) } } return (