PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #625 from matrix-org/dbkr/user_search_feedback

Browse source 
Better feedback in invite dialog
This commit is contained in:
David Baker 2017-01-25 15:59:47 +00:00 committed by GitHub
commit a3b938427d
4 changed files with 142 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/Invite.js
View file

@ -19,9 +19,12 @@ import MultiInviter from './utils/MultiInviter';
const emailRegex = /^\S+@\S+\.\S+$/;
// We allow localhost for mxids to avoid confusion
const mxidRegex = /^@\S+:(?:\S+\.\S+|localhost)$/
export function getAddressType(inputText) {
const isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
const isMatrixId = inputText[0] === '@' && inputText.indexOf(":") > 0;
const isEmailAddress = emailRegex.test(inputText);
const isMatrixId = mxidRegex.test(inputText);
// sanity check the input for user IDs
if (isEmailAddress) {

95
src/components/views/dialogs/ChatInviteDialog.js
View file

@ -67,7 +67,14 @@ module.exports = React.createClass({
getInitialState: function() {
return {
error: false,
// List of AddressTile.InviteAddressType objects represeting
// the list of addresses we're going to invite
inviteList: [],
// List of AddressTile.InviteAddressType objects represeting
// the set of autocompletion results for the current search
// query.
queryList: [],
};
},
@ -156,14 +163,38 @@ module.exports = React.createClass({
},
onQueryChanged: function(ev) {
var query = ev.target.value;
var queryList = [];
const query = ev.target.value;
let queryList = [];
// Only do search if there is something to search
if (query.length > 0) {
if (query.length > 0 && query != '@') {
// filter the known users list
queryList = this._userList.filter((user) => {
return this._matches(query, user);
}).map((user) => {
// Return objects, structure of which is defined
// by InviteAddressType
return {
addressType: 'mx',
address: user.userId,
displayName: user.displayName,
avatarMxc: user.avatarUrl,
isKnown: true,
}
});
// If the query isn't a user we know about, but is a
// valid address, add an entry for that
if (queryList.length == 0) {
const addrType = Invite.getAddressType(query);
if (addrType !== null) {
queryList.push({
addressType: addrType,
address: query,
isKnown: false,
});
}
}
}
this.setState({
@ -193,7 +224,7 @@ module.exports = React.createClass({
onSelected: function(index) {
var inviteList = this.state.inviteList.slice();
inviteList.push(this.state.queryList[index].userId);
inviteList.push(this.state.queryList[index]);
this.setState({
inviteList: inviteList,
queryList: [],
@ -228,10 +259,14 @@ module.exports = React.createClass({
return;
}
const addrTexts = addrs.map((addr) => {
return addr.address;
});
if (this.props.roomId) {
// Invite new user to a room
var self = this;
Invite.inviteMultipleToRoom(this.props.roomId, addrs)
Invite.inviteMultipleToRoom(this.props.roomId, addrTexts)
.then(function(addrs) {
var room = MatrixClientPeg.get().getRoom(self.props.roomId);
return self._showAnyInviteErrors(addrs, room);
@ -246,9 +281,9 @@ module.exports = React.createClass({
return null;
})
.done();
} else if (this._isDmChat(addrs)) {
} else if (this._isDmChat(addrTexts)) {
// Start the DM chat
createRoom({dmUserId: addrs[0]})
createRoom({dmUserId: addrTexts[0]})
.catch(function(err) {
console.error(err.stack);
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
@ -265,7 +300,7 @@ module.exports = React.createClass({
var room;
createRoom().then(function(roomId) {
room = MatrixClientPeg.get().getRoom(roomId);
return Invite.inviteMultipleToRoom(roomId, addrs);
return Invite.inviteMultipleToRoom(roomId, addrTexts);
})
.then(function(addrs) {
return self._showAnyInviteErrors(addrs, room);
@ -283,7 +318,7 @@ module.exports = React.createClass({
}
// Close - this will happen before the above, as that is async
this.props.onFinished(true, addrs);
this.props.onFinished(true, addrTexts);
},
_updateUserList: new rate_limited_func(function() {
@ -334,7 +369,10 @@ module.exports = React.createClass({
_isOnInviteList: function(uid) {
for (let i = 0; i < this.state.inviteList.length; i++) {
if (this.state.inviteList[i].toLowerCase() === uid) {
if (
this.state.inviteList[i].addressType == 'mx' &&
this.state.inviteList[i].address.toLowerCase() === uid
) {
return true;
}
}
@ -369,24 +407,37 @@ module.exports = React.createClass({
},
_addInputToList: function() {
const addrType = Invite.getAddressType(this.refs.textinput.value);
if (addrType !== null) {
const inviteList = this.state.inviteList.slice();
inviteList.push(this.refs.textinput.value.trim());
this.setState({
inviteList: inviteList,
queryList: [],
});
return inviteList;
} else {
const addressText = this.refs.textinput.value.trim();
const addrType = Invite.getAddressType(addressText);
const addrObj = {
addressType: addrType,
address: addressText,
isKnown: false,
};
if (addrType == null) {
this.setState({ error: true });
return null;
} else if (addrType == 'mx') {
const user = MatrixClientPeg.get().getUser(addrObj.address);
if (user) {
addrObj.displayName = user.displayName;
addrObj.avatarMxc = user.avatarUrl;
addrObj.isKnown = true;
}
}
const inviteList = this.state.inviteList.slice();
inviteList.push(addrObj);
this.setState({
inviteList: inviteList,
queryList: [],
});
return inviteList;
},
render: function() {
var TintableSvg = sdk.getComponent("elements.TintableSvg");
var AddressSelector = sdk.getComponent("elements.AddressSelector");
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const AddressSelector = sdk.getComponent("elements.AddressSelector");
this.scrollElement = null;
var query = [];

15
src/components/views/elements/AddressSelector.js
View file

@ -16,16 +16,19 @@ limitations under the License.
'use strict';
var React = require("react");
var sdk = require("../../../index");
var classNames = require('classnames');
import React from 'react';
import sdk from '../../../index';
import classNames from 'classnames';
import { InviteAddressType } from './AddressTile';
module.exports = React.createClass({
export default React.createClass({
displayName: 'AddressSelector',
propTypes: {
onSelected: React.PropTypes.func.isRequired,
addressList: React.PropTypes.array.isRequired,
// List of the addresses to display
addressList: React.PropTypes.arrayOf(InviteAddressType).isRequired,
truncateAt: React.PropTypes.number.isRequired,
selected: React.PropTypes.number,
@ -122,7 +125,7 @@ module.exports = React.createClass({
// method, how far to scroll when using the arrow keys
addressList.push(
<div className={classes} onClick={this.onClick.bind(this, i)} onMouseEnter={this.onMouseEnter.bind(this, i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
<AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
<AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
</div>
);
}

97
src/components/views/elements/AddressTile.js
View file

@ -23,16 +23,33 @@ var Invite = require("../../../Invite");
var MatrixClientPeg = require("../../../MatrixClientPeg");
var Avatar = require('../../../Avatar');
module.exports = React.createClass({
// React PropType definition for an object describing
// an address that can be invited to a room (which
// could be a third party identifier or a matrix ID)
// along with some additional information about the
// address / target.
export const InviteAddressType = React.PropTypes.shape({
addressType: React.PropTypes.oneOf([
'mx', 'email'
]).isRequired,
address: React.PropTypes.string.isRequired,
displayName: React.PropTypes.string,
avatarMxc: React.PropTypes.string,
// true if the address is known to be a valid address (eg. is a real
// user we've seen) or false otherwise (eg. is just an address the
// user has entered)
isKnown: React.PropTypes.bool,
});
export default React.createClass({
displayName: 'AddressTile',
propTypes: {
address: React.PropTypes.string.isRequired,
address: InviteAddressType.isRequired,
canDismiss: React.PropTypes.bool,
onDismissed: React.PropTypes.func,
justified: React.PropTypes.bool,
networkName: React.PropTypes.string,
networkUrl: React.PropTypes.string,
},
getDefaultProps: function() {
@ -40,37 +57,30 @@ module.exports = React.createClass({
canDismiss: false,
onDismissed: function() {}, // NOP
justified: false,
networkName: "",
networkUrl: "",
};
},
render: function() {
var userId, name, imgUrl, email;
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
var TintableSvg = sdk.getComponent("elements.TintableSvg");
const address = this.props.address;
const name = address.displayName || address.address;
// Check if the addr is a valid type
var addrType = Invite.getAddressType(this.props.address);
if (addrType === "mx") {
let user = MatrixClientPeg.get().getUser(this.props.address);
if (user) {
userId = user.userId;
name = user.rawDisplayName || userId;
imgUrl = Avatar.avatarUrlForUser(user, 25, 25, "crop");
} else {
name=this.props.address;
imgUrl = "img/icon-mx-user.svg";
}
} else if (addrType === "email") {
email = this.props.address;
name="email";
imgUrl = "img/icon-email-user.svg";
} else {
name="Unknown";
imgUrl = "img/avatar-error.svg";
let imgUrl;
if (address.avatarMxc) {
imgUrl = MatrixClientPeg.get().mxcUrlToHttp(
address.avatarMxc, 25, 25, 'crop'
);
}
if (address.addressType === "mx") {
if (!imgUrl) imgUrl = 'img/icon-mx-user.svg';
} else if (address.addressType === 'email') {
if (!imgUrl) imgUrl = 'img/icon-email-user.svg';
} else {
if (!imgUrl) imgUrl = "img/avatar-error.svg";
}
// Removing networks for now as they're not really supported
/*
var network;
if (this.props.networkUrl !== "") {
network = (
@ -79,16 +89,20 @@ module.exports = React.createClass({
</div>
);
}
*/
var info;
var error = false;
if (addrType === "mx" && userId) {
var nameClasses = classNames({
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const TintableSvg = sdk.getComponent("elements.TintableSvg");
let info;
let error = false;
if (address.addressType === "mx" && address.isKnown) {
const nameClasses = classNames({
"mx_AddressTile_name": true,
"mx_AddressTile_justified": this.props.justified,
});
var idClasses = classNames({
const idClasses = classNames({
"mx_AddressTile_id": true,
"mx_AddressTile_justified": this.props.justified,
});
@ -96,26 +110,26 @@ module.exports = React.createClass({
info = (
<div className="mx_AddressTile_mx">
<div className={nameClasses}>{ name }</div>
<div className={idClasses}>{ userId }</div>
<div className={idClasses}>{ address.address }</div>
</div>
);
} else if (addrType === "mx") {
var unknownMxClasses = classNames({
} else if (address.addressType === "mx") {
const unknownMxClasses = classNames({
"mx_AddressTile_unknownMx": true,
"mx_AddressTile_justified": this.props.justified,
});
info = (
<div className={unknownMxClasses}>{ this.props.address }</div>
<div className={unknownMxClasses}>{ this.props.address.address }</div>
);
} else if (email) {
} else if (address.addressType === "email") {
var emailClasses = classNames({
"mx_AddressTile_email": true,
"mx_AddressTile_justified": this.props.justified,
});
info = (
<div className={emailClasses}>{ email }</div>
<div className={emailClasses}>{ address.address }</div>
);
} else {
error = true;
@ -129,12 +143,12 @@ module.exports = React.createClass({
);
}
var classes = classNames({
const classes = classNames({
"mx_AddressTile": true,
"mx_AddressTile_error": error,
});
var dismiss;
let dismiss;
if (this.props.canDismiss) {
dismiss = (
<div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >
@ -145,7 +159,6 @@ module.exports = React.createClass({
return (
<div className={classes}>
{ network }
<div className="mx_AddressTile_avatar">
<BaseAvatar width={25} height={25} name={name} title={name} url={imgUrl} />
</div>