Merge pull request #1429 from matrix-org/luke/groups-add-rooms
Implement "Add room to group" feature
This commit is contained in:
commit
3bdf347a08
7 changed files with 332 additions and 4 deletions
|
@ -18,11 +18,12 @@ import Modal from './Modal';
|
||||||
import sdk from './';
|
import sdk from './';
|
||||||
import MultiInviter from './utils/MultiInviter';
|
import MultiInviter from './utils/MultiInviter';
|
||||||
import { _t } from './languageHandler';
|
import { _t } from './languageHandler';
|
||||||
|
import MatrixClientPeg from './MatrixClientPeg';
|
||||||
|
|
||||||
export function showGroupInviteDialog(groupId) {
|
export function showGroupInviteDialog(groupId) {
|
||||||
const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
|
const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
|
||||||
Modal.createTrackedDialog('Group Invite', '', AddressPickerDialog, {
|
Modal.createTrackedDialog('Group Invite', '', AddressPickerDialog, {
|
||||||
title: _t('Invite new group members'),
|
title: _t("Invite new group members"),
|
||||||
description: _t("Who would you like to add to this group?"),
|
description: _t("Who would you like to add to this group?"),
|
||||||
placeholder: _t("Name or matrix ID"),
|
placeholder: _t("Name or matrix ID"),
|
||||||
button: _t("Invite to Group"),
|
button: _t("Invite to Group"),
|
||||||
|
@ -35,6 +36,25 @@ export function showGroupInviteDialog(groupId) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function showGroupAddRoomDialog(groupId) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
|
||||||
|
Modal.createTrackedDialog('Add Rooms to Group', '', AddressPickerDialog, {
|
||||||
|
title: _t("Add rooms to the group"),
|
||||||
|
description: _t("Which rooms would you like to add to this group?"),
|
||||||
|
placeholder: _t("Room name or alias"),
|
||||||
|
button: _t("Add to group"),
|
||||||
|
pickerType: 'room',
|
||||||
|
validAddressTypes: ['mx'],
|
||||||
|
onFinished: (success, addrs) => {
|
||||||
|
if (!success) return;
|
||||||
|
|
||||||
|
_onGroupAddRoomFinished(groupId, addrs).then(resolve, reject);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function _onGroupInviteFinished(groupId, addrs) {
|
function _onGroupInviteFinished(groupId, addrs) {
|
||||||
const multiInviter = new MultiInviter(groupId);
|
const multiInviter = new MultiInviter(groupId);
|
||||||
|
|
||||||
|
@ -65,3 +85,27 @@ function _onGroupInviteFinished(groupId, addrs) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function _onGroupAddRoomFinished(groupId, addrs) {
|
||||||
|
const errorList = [];
|
||||||
|
return Promise.all(addrs.map((addr) => {
|
||||||
|
return MatrixClientPeg.get()
|
||||||
|
.addRoomToGroup(groupId, addr.address)
|
||||||
|
.catch(() => { errorList.push(addr.address); })
|
||||||
|
.reflect();
|
||||||
|
})).then(() => {
|
||||||
|
if (errorList.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||||
|
Modal.createTrackedDialog(
|
||||||
|
'Failed to add the following room to the group',
|
||||||
|
'', ErrorDialog,
|
||||||
|
{
|
||||||
|
title: _t(
|
||||||
|
"Failed to add the following rooms to %(groupId)s:",
|
||||||
|
{groupId},
|
||||||
|
),
|
||||||
|
description: errorList.join(", "),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
|
@ -155,7 +155,7 @@ module.exports = React.createClass({
|
||||||
if (this.props.groupId) {
|
if (this.props.groupId) {
|
||||||
this._doNaiveGroupRoomSearch(query);
|
this._doNaiveGroupRoomSearch(query);
|
||||||
} else {
|
} else {
|
||||||
console.error('Room searching only implemented for groups');
|
this._doRoomSearch(query);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.error('Unknown pickerType', this.props.pickerType);
|
console.error('Unknown pickerType', this.props.pickerType);
|
||||||
|
@ -248,7 +248,7 @@ module.exports = React.createClass({
|
||||||
results.push({
|
results.push({
|
||||||
room_id: r.room_id,
|
room_id: r.room_id,
|
||||||
avatar_url: r.avatar_url,
|
avatar_url: r.avatar_url,
|
||||||
name: r.name,
|
name: r.name || r.canonical_alias,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this._processResults(results, query);
|
this._processResults(results, query);
|
||||||
|
@ -264,6 +264,37 @@ module.exports = React.createClass({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_doRoomSearch: function(query) {
|
||||||
|
const lowerCaseQuery = query.toLowerCase();
|
||||||
|
const rooms = MatrixClientPeg.get().getRooms();
|
||||||
|
const results = [];
|
||||||
|
rooms.forEach((room) => {
|
||||||
|
const nameEvent = room.currentState.getStateEvents('m.room.name', '');
|
||||||
|
const topicEvent = room.currentState.getStateEvents('m.room.topic', '');
|
||||||
|
const name = nameEvent ? nameEvent.getContent().name : '';
|
||||||
|
const canonicalAlias = room.getCanonicalAlias();
|
||||||
|
const topic = topicEvent ? topicEvent.getContent().topic : '';
|
||||||
|
|
||||||
|
const nameMatch = (name || '').toLowerCase().includes(lowerCaseQuery);
|
||||||
|
const aliasMatch = (canonicalAlias || '').toLowerCase().includes(lowerCaseQuery);
|
||||||
|
const topicMatch = (topic || '').toLowerCase().includes(lowerCaseQuery);
|
||||||
|
if (!(nameMatch || topicMatch || aliasMatch)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const avatarEvent = room.currentState.getStateEvents('m.room.avatar', '');
|
||||||
|
const avatarUrl = avatarEvent ? avatarEvent.getContent().url : undefined;
|
||||||
|
results.push({
|
||||||
|
room_id: room.roomId,
|
||||||
|
avatar_url: avatarUrl,
|
||||||
|
name: name || canonicalAlias,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this._processResults(results, query);
|
||||||
|
this.setState({
|
||||||
|
busy: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
_doUserDirectorySearch: function(query) {
|
_doUserDirectorySearch: function(query) {
|
||||||
this.setState({
|
this.setState({
|
||||||
busy: true,
|
busy: true,
|
||||||
|
|
|
@ -131,7 +131,7 @@ export default withMatrixClient(React.createClass({
|
||||||
|
|
||||||
const inputBox = (
|
const inputBox = (
|
||||||
<form autoComplete="off">
|
<form autoComplete="off">
|
||||||
<input className="mx_MemberList_query" id="mx_MemberList_query" type="text"
|
<input className="mx_GroupMemberList_query" id="mx_GroupMemberList_query" type="text"
|
||||||
onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
|
onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
|
||||||
placeholder={ _t('Filter group members') } />
|
placeholder={ _t('Filter group members') } />
|
||||||
</form>
|
</form>
|
||||||
|
|
143
src/components/views/groups/GroupRoomList.js
Normal file
143
src/components/views/groups/GroupRoomList.js
Normal file
|
@ -0,0 +1,143 @@
|
||||||
|
/*
|
||||||
|
Copyright 2017 New Vector 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.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { _t } from '../../../languageHandler';
|
||||||
|
import sdk from '../../../index';
|
||||||
|
import { groupRoomFromApiObject } from '../../../groups';
|
||||||
|
import GeminiScrollbar from 'react-gemini-scrollbar';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import {MatrixClient} from 'matrix-js-sdk';
|
||||||
|
|
||||||
|
const INITIAL_LOAD_NUM_ROOMS = 30;
|
||||||
|
|
||||||
|
export default React.createClass({
|
||||||
|
contextTypes: {
|
||||||
|
matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
|
||||||
|
},
|
||||||
|
|
||||||
|
propTypes: {
|
||||||
|
groupId: PropTypes.string.isRequired,
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
fetching: false,
|
||||||
|
rooms: null,
|
||||||
|
truncateAt: INITIAL_LOAD_NUM_ROOMS,
|
||||||
|
searchQuery: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillMount: function() {
|
||||||
|
this._unmounted = false;
|
||||||
|
this._fetchRooms();
|
||||||
|
},
|
||||||
|
|
||||||
|
_fetchRooms: function() {
|
||||||
|
this.setState({fetching: true});
|
||||||
|
this.context.matrixClient.getGroupRooms(this.props.groupId).then((result) => {
|
||||||
|
this.setState({
|
||||||
|
rooms: result.chunk.map((apiRoom) => {
|
||||||
|
return groupRoomFromApiObject(apiRoom);
|
||||||
|
}),
|
||||||
|
fetching: false,
|
||||||
|
});
|
||||||
|
}).catch((e) => {
|
||||||
|
this.setState({fetching: false});
|
||||||
|
console.error("Failed to get group room list: ", e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
_createOverflowTile: function(overflowCount, totalCount) {
|
||||||
|
// For now we'll pretend this is any entity. It should probably be a separate tile.
|
||||||
|
const EntityTile = sdk.getComponent("rooms.EntityTile");
|
||||||
|
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
|
||||||
|
const text = _t("and %(count)s others...", { count: overflowCount });
|
||||||
|
return (
|
||||||
|
<EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
|
||||||
|
<BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
|
||||||
|
} name={text} presenceState="online" suppressOnHover={true}
|
||||||
|
onClick={this._showFullRoomList} />
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
_showFullRoomList: function() {
|
||||||
|
this.setState({
|
||||||
|
truncateAt: -1,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onSearchQueryChanged: function(ev) {
|
||||||
|
this.setState({ searchQuery: ev.target.value });
|
||||||
|
},
|
||||||
|
|
||||||
|
makeGroupRoomTiles: function(query) {
|
||||||
|
const GroupRoomTile = sdk.getComponent("groups.GroupRoomTile");
|
||||||
|
query = (query || "").toLowerCase();
|
||||||
|
|
||||||
|
let roomList = this.state.rooms;
|
||||||
|
if (query) {
|
||||||
|
roomList = roomList.filter((room) => {
|
||||||
|
const matchesName = (room.name || "").toLowerCase().include(query);
|
||||||
|
const matchesAlias = (room.canonicalAlias || "").toLowerCase().includes(query);
|
||||||
|
return matchesName || matchesAlias;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
roomList = roomList.map((groupRoom, index) => {
|
||||||
|
return (
|
||||||
|
<GroupRoomTile
|
||||||
|
key={index}
|
||||||
|
groupId={this.props.groupId}
|
||||||
|
groupRoom={groupRoom} />
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return roomList;
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
if (this.state.fetching) {
|
||||||
|
const Spinner = sdk.getComponent("elements.Spinner");
|
||||||
|
return (<div className="mx_GroupRoomList">
|
||||||
|
<Spinner />
|
||||||
|
</div>);
|
||||||
|
} else if (this.state.rooms === null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputBox = (
|
||||||
|
<form autoComplete="off">
|
||||||
|
<input className="mx_GroupRoomList_query" id="mx_GroupRoomList_query" type="text"
|
||||||
|
onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
|
||||||
|
placeholder={ _t('Filter group rooms') } />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
|
||||||
|
const TruncatedList = sdk.getComponent("elements.TruncatedList");
|
||||||
|
return (
|
||||||
|
<div className="mx_GroupRoomList">
|
||||||
|
{ inputBox }
|
||||||
|
<GeminiScrollbar autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
|
||||||
|
<TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
|
||||||
|
createOverflowElement={this._createOverflowTile}>
|
||||||
|
{this.makeGroupRoomTiles(this.state.searchQuery)}
|
||||||
|
</TruncatedList>
|
||||||
|
</GeminiScrollbar>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
89
src/components/views/groups/GroupRoomTile.js
Normal file
89
src/components/views/groups/GroupRoomTile.js
Normal file
|
@ -0,0 +1,89 @@
|
||||||
|
/*
|
||||||
|
Copyright 2017 New Vector 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {MatrixClient} from 'matrix-js-sdk';
|
||||||
|
import { _t } from '../../../languageHandler';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import sdk from '../../../index';
|
||||||
|
import dis from '../../../dispatcher';
|
||||||
|
import { GroupRoomType } from '../../../groups';
|
||||||
|
|
||||||
|
const GroupRoomTile = React.createClass({
|
||||||
|
displayName: 'GroupRoomTile',
|
||||||
|
|
||||||
|
propTypes: {
|
||||||
|
groupId: PropTypes.string.isRequired,
|
||||||
|
groupRoom: GroupRoomType.isRequired,
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState: function() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick: function(e) {
|
||||||
|
let roomId;
|
||||||
|
let roomAlias;
|
||||||
|
if (this.props.groupRoom.canonicalAlias) {
|
||||||
|
roomAlias = this.props.groupRoom.canonicalAlias;
|
||||||
|
} else {
|
||||||
|
roomId = this.props.groupRoom.roomId;
|
||||||
|
}
|
||||||
|
dis.dispatch({
|
||||||
|
action: 'view_room',
|
||||||
|
room_id: roomId,
|
||||||
|
room_alias: roomAlias,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
||||||
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||||
|
|
||||||
|
const name = this.props.groupRoom.name ||
|
||||||
|
this.props.groupRoom.canonicalAlias ||
|
||||||
|
_t("Unnamed Room");
|
||||||
|
const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
|
||||||
|
this.props.groupRoom.avatarUrl,
|
||||||
|
36, 36, 'crop',
|
||||||
|
);
|
||||||
|
|
||||||
|
const av = (
|
||||||
|
<BaseAvatar name={name}
|
||||||
|
width={36} height={36}
|
||||||
|
url={avatarUrl}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AccessibleButton className="mx_GroupRoomTile" onClick={this.onClick}>
|
||||||
|
<div className="mx_GroupRoomTile_avatar">
|
||||||
|
{av}
|
||||||
|
</div>
|
||||||
|
<div className="mx_GroupRoomTile_name">
|
||||||
|
{name}
|
||||||
|
</div>
|
||||||
|
</AccessibleButton>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
GroupRoomTile.contextTypes = {
|
||||||
|
matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default GroupRoomTile;
|
|
@ -22,6 +22,14 @@ export const GroupMemberType = PropTypes.shape({
|
||||||
avatarUrl: PropTypes.string,
|
avatarUrl: PropTypes.string,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export const GroupRoomType = PropTypes.shape({
|
||||||
|
name: PropTypes.string,
|
||||||
|
// TODO: API doesn't return this yet
|
||||||
|
// roomId: PropTypes.string.isRequired,
|
||||||
|
canonicalAlias: PropTypes.string,
|
||||||
|
avatarUrl: PropTypes.string,
|
||||||
|
});
|
||||||
|
|
||||||
export function groupMemberFromApiObject(apiObject) {
|
export function groupMemberFromApiObject(apiObject) {
|
||||||
return {
|
return {
|
||||||
userId: apiObject.user_id,
|
userId: apiObject.user_id,
|
||||||
|
@ -29,3 +37,11 @@ export function groupMemberFromApiObject(apiObject) {
|
||||||
avatarUrl: apiObject.avatar_url,
|
avatarUrl: apiObject.avatar_url,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function groupRoomFromApiObject(apiObject) {
|
||||||
|
return {
|
||||||
|
name: apiObject.name,
|
||||||
|
canonicalAlias: apiObject.canonical_alias,
|
||||||
|
avatarUrl: apiObject.avatar_url,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
|
@ -846,6 +846,7 @@
|
||||||
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
|
"Robot check is currently unavailable on desktop - please use a <a>web browser</a>": "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
|
||||||
"Description": "Description",
|
"Description": "Description",
|
||||||
"Filter group members": "Filter group members",
|
"Filter group members": "Filter group members",
|
||||||
|
"Filter group rooms": "Filter group rooms",
|
||||||
"Remove from group": "Remove from group",
|
"Remove from group": "Remove from group",
|
||||||
"Invite new group members": "Invite new group members",
|
"Invite new group members": "Invite new group members",
|
||||||
"Who would you like to add to this group?": "Who would you like to add to this group?",
|
"Who would you like to add to this group?": "Who would you like to add to this group?",
|
||||||
|
@ -883,6 +884,10 @@
|
||||||
"The user '%(displayName)s' could not be removed from the summary.": "The user '%(displayName)s' could not be removed from the summary.",
|
"The user '%(displayName)s' could not be removed from the summary.": "The user '%(displayName)s' could not be removed from the summary.",
|
||||||
"Failed to add the following rooms to the summary of %(groupId)s:": "Failed to add the following rooms to the summary of %(groupId)s:",
|
"Failed to add the following rooms to the summary of %(groupId)s:": "Failed to add the following rooms to the summary of %(groupId)s:",
|
||||||
"The room '%(roomName)s' could not be removed from the summary.": "The room '%(roomName)s' could not be removed from the summary.",
|
"The room '%(roomName)s' could not be removed from the summary.": "The room '%(roomName)s' could not be removed from the summary.",
|
||||||
|
"Add rooms to the group": "Add rooms to the group",
|
||||||
|
"Which rooms would you like to add to this group?": "Which rooms would you like to add to this group?",
|
||||||
|
"Add to group": "Add to group",
|
||||||
|
"Failed to add the following rooms to %(groupId)s:": "Failed to add the following rooms to %(groupId)s:",
|
||||||
"Unpublish": "Unpublish",
|
"Unpublish": "Unpublish",
|
||||||
"This group is published on your profile": "This group is published on your profile",
|
"This group is published on your profile": "This group is published on your profile",
|
||||||
"Publish": "Publish",
|
"Publish": "Publish",
|
||||||
|
|
Loading…
Reference in a new issue