2015-07-21 06:11:24 +03:00
|
|
|
/*
|
2016-01-07 07:17:56 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-07-21 06:11:24 +03:00
|
|
|
|
|
|
|
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');
|
|
|
|
|
2015-09-22 21:09:23 +03:00
|
|
|
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
2016-02-20 16:36:48 +03:00
|
|
|
var ContentRepo = require("matrix-js-sdk").ContentRepo;
|
2015-09-22 21:09:23 +03:00
|
|
|
var Modal = require('matrix-react-sdk/lib/Modal');
|
2015-09-22 20:49:04 +03:00
|
|
|
var sdk = require('matrix-react-sdk')
|
2015-09-22 21:09:23 +03:00
|
|
|
var dis = require('matrix-react-sdk/lib/dispatcher');
|
2015-07-21 06:11:24 +03:00
|
|
|
|
2016-02-20 16:36:48 +03:00
|
|
|
var linkify = require('linkifyjs');
|
|
|
|
var linkifyElement = require('linkifyjs/element');
|
|
|
|
var linkifyMatrix = require('matrix-react-sdk/lib/linkify-matrix');
|
|
|
|
|
|
|
|
linkifyMatrix(linkify);
|
|
|
|
|
2015-07-21 06:11:24 +03:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'RoomDirectory',
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
publicRooms: [],
|
|
|
|
roomAlias: '',
|
2015-07-28 00:31:24 +03:00
|
|
|
loading: true,
|
2015-07-21 06:11:24 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount: function() {
|
|
|
|
var self = this;
|
|
|
|
MatrixClientPeg.get().publicRooms(function (err, data) {
|
|
|
|
if (err) {
|
2015-07-28 00:31:24 +03:00
|
|
|
self.setState({ loading: false });
|
2015-07-21 06:11:24 +03:00
|
|
|
console.error("Failed to get publicRooms: %s", JSON.stringify(err));
|
2015-11-30 17:11:28 +03:00
|
|
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2015-07-21 06:11:24 +03:00
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Failed to get public room list",
|
|
|
|
description: err.message
|
|
|
|
});
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
self.setState({
|
2015-07-28 00:31:24 +03:00
|
|
|
publicRooms: data.chunk,
|
|
|
|
loading: false,
|
2015-07-21 06:11:24 +03:00
|
|
|
});
|
|
|
|
self.forceUpdate();
|
|
|
|
}
|
|
|
|
});
|
2016-02-20 16:36:48 +03:00
|
|
|
|
|
|
|
//linkifyElement(this.refs.directory_table, linkifyMatrix.options);
|
2015-07-21 06:11:24 +03:00
|
|
|
},
|
|
|
|
|
2016-02-02 18:51:23 +03:00
|
|
|
showRoom: function(roomId) {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
|
|
|
room_id: roomId
|
2015-07-21 06:11:24 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
getRows: function(filter) {
|
2016-02-20 16:36:48 +03:00
|
|
|
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
|
|
|
|
2015-07-21 06:11:24 +03:00
|
|
|
if (!this.state.publicRooms) return [];
|
|
|
|
|
|
|
|
var rooms = this.state.publicRooms.filter(function(a) {
|
|
|
|
// FIXME: if incrementally typing, keep narrowing down the search set
|
2015-07-28 00:31:24 +03:00
|
|
|
// incrementally rather than starting over each time.
|
2016-02-14 14:32:15 +03:00
|
|
|
return (a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0 && a.num_joined_members > 0);
|
2015-07-21 06:11:24 +03:00
|
|
|
}).sort(function(a,b) {
|
2015-07-23 20:24:34 +03:00
|
|
|
return a.num_joined_members - b.num_joined_members;
|
2015-07-21 06:11:24 +03:00
|
|
|
});
|
|
|
|
var rows = [];
|
|
|
|
var self = this;
|
2016-01-18 20:37:13 +03:00
|
|
|
var guestRead, guestJoin, perms;
|
2015-07-21 06:11:24 +03:00
|
|
|
for (var i = 0; i < rooms.length; i++) {
|
2015-07-28 00:31:24 +03:00
|
|
|
var name = rooms[i].name || rooms[i].aliases[0];
|
2016-01-07 17:43:12 +03:00
|
|
|
guestRead = null;
|
|
|
|
guestJoin = null;
|
|
|
|
|
|
|
|
if (rooms[i].world_readable) {
|
|
|
|
guestRead = (
|
2016-02-20 16:36:48 +03:00
|
|
|
<div className="mx_RoomDirectory_perm">World readable</div>
|
2016-01-07 17:43:12 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
if (rooms[i].guest_can_join) {
|
|
|
|
guestJoin = (
|
2016-02-20 16:36:48 +03:00
|
|
|
<div className="mx_RoomDirectory_perm">Guests can join</div>
|
2016-01-07 17:43:12 +03:00
|
|
|
);
|
2016-01-18 20:37:13 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
perms = null;
|
|
|
|
if (guestRead || guestJoin) {
|
2016-02-20 16:36:48 +03:00
|
|
|
perms = <div className="mx_RoomDirectory_perms">{guestRead} {guestJoin}</div>;
|
2016-01-07 17:43:12 +03:00
|
|
|
}
|
|
|
|
|
2015-07-21 06:11:24 +03:00
|
|
|
rows.unshift(
|
2016-02-20 16:36:48 +03:00
|
|
|
<tr key={ rooms[i].room_id } onClick={self.showRoom.bind(null, rooms[i].room_id)}>
|
|
|
|
<td className="mx_RoomDirectory_roomAvatar">
|
|
|
|
<BaseAvatar width={24} height={24} resizeMethod='crop'
|
|
|
|
name={ name } idName={ name }
|
|
|
|
url={ ContentRepo.getHttpUriForMxc(
|
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
|
|
|
rooms[i].avatar_url, 24, 24, "crop") } />
|
|
|
|
</td>
|
|
|
|
<td className="mx_RoomDirectory_roomDescription">
|
|
|
|
<div className="mx_RoomDirectory_name">{ name }</div>
|
|
|
|
{ perms }
|
|
|
|
<div className="mx_RoomDirectory_topic">{ rooms[i].topic }</div>
|
|
|
|
<div className="mx_RoomDirectory_alias">{ rooms[i].aliases[0] }</div>
|
|
|
|
</td>
|
|
|
|
<td className="mx_RoomDirectory_roomMemberCount">
|
|
|
|
{ rooms[i].num_joined_members }
|
|
|
|
</td>
|
|
|
|
</tr>
|
2015-07-21 06:11:24 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
return rows;
|
|
|
|
},
|
|
|
|
|
|
|
|
onKeyUp: function(ev) {
|
|
|
|
this.forceUpdate();
|
2015-11-10 02:54:10 +03:00
|
|
|
this.setState({ roomAlias : this.refs.roomAlias.value })
|
2015-07-21 06:11:24 +03:00
|
|
|
if (ev.key == "Enter") {
|
2016-02-02 18:51:23 +03:00
|
|
|
this.showRoom(this.refs.roomAlias.value);
|
2015-07-21 06:11:24 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2015-07-28 00:31:24 +03:00
|
|
|
if (this.state.loading) {
|
2015-11-26 17:25:20 +03:00
|
|
|
var Loader = sdk.getComponent("elements.Spinner");
|
2015-07-28 00:31:24 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_RoomDirectory">
|
|
|
|
<Loader />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-11-27 13:42:25 +03:00
|
|
|
var RoomHeader = sdk.getComponent('rooms.RoomHeader');
|
2015-07-21 06:11:24 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_RoomDirectory">
|
2016-02-20 16:36:48 +03:00
|
|
|
<RoomHeader simpleHeader="Directory" />
|
2015-07-21 06:11:24 +03:00
|
|
|
<div className="mx_RoomDirectory_list">
|
|
|
|
<input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
|
2015-07-23 20:24:34 +03:00
|
|
|
<div className="mx_RoomDirectory_tableWrapper">
|
2016-02-20 16:36:48 +03:00
|
|
|
<table ref="directory_table" className="mx_RoomDirectory_table">
|
|
|
|
<tbody>
|
|
|
|
{ this.getRows(this.state.roomAlias) }
|
|
|
|
</tbody>
|
2015-07-23 20:24:34 +03:00
|
|
|
</table>
|
|
|
|
</div>
|
2015-07-21 06:11:24 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|