mirror of
https://github.com/element-hq/element-web
synced 2024-11-27 11:47:23 +03:00
Make MemberInfo use the matrixclient from the context
An arbitrary component to demonstrate how this works
This commit is contained in:
parent
31a47a9efd
commit
ab7007784f
1 changed files with 27 additions and 26 deletions
|
@ -27,7 +27,6 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
var classNames = require('classnames');
|
var classNames = require('classnames');
|
||||||
var MatrixClientPeg = require("../../../MatrixClientPeg");
|
|
||||||
var dis = require("../../../dispatcher");
|
var dis = require("../../../dispatcher");
|
||||||
var Modal = require("../../../Modal");
|
var Modal = require("../../../Modal");
|
||||||
var sdk = require('../../../index');
|
var sdk = require('../../../index');
|
||||||
|
@ -36,11 +35,13 @@ var createRoom = require('../../../createRoom');
|
||||||
var DMRoomMap = require('../../../utils/DMRoomMap');
|
var DMRoomMap = require('../../../utils/DMRoomMap');
|
||||||
var Unread = require('../../../Unread');
|
var Unread = require('../../../Unread');
|
||||||
var Receipt = require('../../../utils/Receipt');
|
var Receipt = require('../../../utils/Receipt');
|
||||||
|
var WithMatrixClient = require('../../../wrappers/WithMatrixClient');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = WithMatrixClient(React.createClass({
|
||||||
displayName: 'MemberInfo',
|
displayName: 'MemberInfo',
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
matrixClient: React.PropTypes.object.isRequired,
|
||||||
member: React.PropTypes.object.isRequired,
|
member: React.PropTypes.object.isRequired,
|
||||||
onFinished: React.PropTypes.func,
|
onFinished: React.PropTypes.func,
|
||||||
},
|
},
|
||||||
|
@ -72,10 +73,10 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
// only display the devices list if our client supports E2E *and* the
|
// only display the devices list if our client supports E2E *and* the
|
||||||
// feature is enabled in the user settings
|
// feature is enabled in the user settings
|
||||||
this._enableDevices = MatrixClientPeg.get().isCryptoEnabled() &&
|
this._enableDevices = this.props.matrixClient.isCryptoEnabled() &&
|
||||||
UserSettingsStore.isFeatureEnabled("e2e_encryption");
|
UserSettingsStore.isFeatureEnabled("e2e_encryption");
|
||||||
|
|
||||||
const cli = MatrixClientPeg.get();
|
const cli = this.props.matrixClient;
|
||||||
cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
|
cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
|
||||||
cli.on("Room", this.onRoom);
|
cli.on("Room", this.onRoom);
|
||||||
cli.on("deleteRoom", this.onDeleteRoom);
|
cli.on("deleteRoom", this.onDeleteRoom);
|
||||||
|
@ -98,7 +99,7 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillUnmount: function() {
|
componentWillUnmount: function() {
|
||||||
var client = MatrixClientPeg.get();
|
var client = this.props.matrixClient;
|
||||||
if (client) {
|
if (client) {
|
||||||
client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
|
client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
|
||||||
client.removeListener("Room", this.onRoom);
|
client.removeListener("Room", this.onRoom);
|
||||||
|
@ -140,7 +141,7 @@ module.exports = React.createClass({
|
||||||
if (userId == this.props.member.userId) {
|
if (userId == this.props.member.userId) {
|
||||||
// no need to re-download the whole thing; just update our copy of
|
// no need to re-download the whole thing; just update our copy of
|
||||||
// the list.
|
// the list.
|
||||||
var devices = MatrixClientPeg.get().getStoredDevicesForUser(userId);
|
var devices = this.props.matrixClient.getStoredDevicesForUser(userId);
|
||||||
this.setState({devices: devices});
|
this.setState({devices: devices});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -165,7 +166,7 @@ module.exports = React.createClass({
|
||||||
onRoomReceipt: function(receiptEvent, room) {
|
onRoomReceipt: function(receiptEvent, room) {
|
||||||
// because if we read a notification, it will affect notification count
|
// because if we read a notification, it will affect notification count
|
||||||
// only bother updating if there's a receipt from us
|
// only bother updating if there's a receipt from us
|
||||||
if (Receipt.findReadReceiptFromUserId(receiptEvent, MatrixClientPeg.get().credentials.userId)) {
|
if (Receipt.findReadReceiptFromUserId(receiptEvent, this.props.matrixClient.credentials.userId)) {
|
||||||
this.forceUpdate();
|
this.forceUpdate();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -206,7 +207,7 @@ module.exports = React.createClass({
|
||||||
var cancelled = false;
|
var cancelled = false;
|
||||||
this._cancelDeviceList = function() { cancelled = true; }
|
this._cancelDeviceList = function() { cancelled = true; }
|
||||||
|
|
||||||
var client = MatrixClientPeg.get();
|
var client = this.props.matrixClient;
|
||||||
var self = this;
|
var self = this;
|
||||||
client.downloadKeys([member.userId], true).finally(function() {
|
client.downloadKeys([member.userId], true).finally(function() {
|
||||||
self._cancelDeviceList = null;
|
self._cancelDeviceList = null;
|
||||||
|
@ -229,7 +230,7 @@ module.exports = React.createClass({
|
||||||
var roomId = this.props.member.roomId;
|
var roomId = this.props.member.roomId;
|
||||||
var target = this.props.member.userId;
|
var target = this.props.member.userId;
|
||||||
this.setState({ updating: this.state.updating + 1 });
|
this.setState({ updating: this.state.updating + 1 });
|
||||||
MatrixClientPeg.get().kick(roomId, target).then(function() {
|
this.props.matrixClient.kick(roomId, target).then(function() {
|
||||||
// NO-OP; rely on the m.room.member event coming down else we could
|
// NO-OP; rely on the m.room.member event coming down else we could
|
||||||
// get out of sync if we force setState here!
|
// get out of sync if we force setState here!
|
||||||
console.log("Kick success");
|
console.log("Kick success");
|
||||||
|
@ -250,7 +251,7 @@ module.exports = React.createClass({
|
||||||
var roomId = this.props.member.roomId;
|
var roomId = this.props.member.roomId;
|
||||||
var target = this.props.member.userId;
|
var target = this.props.member.userId;
|
||||||
this.setState({ updating: this.state.updating + 1 });
|
this.setState({ updating: this.state.updating + 1 });
|
||||||
MatrixClientPeg.get().ban(roomId, target).then(
|
this.props.matrixClient.ban(roomId, target).then(
|
||||||
function() {
|
function() {
|
||||||
// NO-OP; rely on the m.room.member event coming down else we could
|
// NO-OP; rely on the m.room.member event coming down else we could
|
||||||
// get out of sync if we force setState here!
|
// get out of sync if we force setState here!
|
||||||
|
@ -271,7 +272,7 @@ module.exports = React.createClass({
|
||||||
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||||
var roomId = this.props.member.roomId;
|
var roomId = this.props.member.roomId;
|
||||||
var target = this.props.member.userId;
|
var target = this.props.member.userId;
|
||||||
var room = MatrixClientPeg.get().getRoom(roomId);
|
var room = this.props.matrixClient.getRoom(roomId);
|
||||||
if (!room) {
|
if (!room) {
|
||||||
this.props.onFinished();
|
this.props.onFinished();
|
||||||
return;
|
return;
|
||||||
|
@ -300,7 +301,7 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
if (level !== NaN) {
|
if (level !== NaN) {
|
||||||
this.setState({ updating: this.state.updating + 1 });
|
this.setState({ updating: this.state.updating + 1 });
|
||||||
MatrixClientPeg.get().setPowerLevel(roomId, target, level, powerLevelEvent).then(
|
this.props.matrixClient.setPowerLevel(roomId, target, level, powerLevelEvent).then(
|
||||||
function() {
|
function() {
|
||||||
// NO-OP; rely on the m.room.member event coming down else we could
|
// NO-OP; rely on the m.room.member event coming down else we could
|
||||||
// get out of sync if we force setState here!
|
// get out of sync if we force setState here!
|
||||||
|
@ -322,7 +323,7 @@ module.exports = React.createClass({
|
||||||
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||||
var roomId = this.props.member.roomId;
|
var roomId = this.props.member.roomId;
|
||||||
var target = this.props.member.userId;
|
var target = this.props.member.userId;
|
||||||
var room = MatrixClientPeg.get().getRoom(roomId);
|
var room = this.props.matrixClient.getRoom(roomId);
|
||||||
if (!room) {
|
if (!room) {
|
||||||
this.props.onFinished();
|
this.props.onFinished();
|
||||||
return;
|
return;
|
||||||
|
@ -334,7 +335,7 @@ module.exports = React.createClass({
|
||||||
this.props.onFinished();
|
this.props.onFinished();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var me = room.getMember(MatrixClientPeg.get().credentials.userId);
|
var me = room.getMember(this.props.matrixClient.credentials.userId);
|
||||||
if (!me) {
|
if (!me) {
|
||||||
this.props.onFinished();
|
this.props.onFinished();
|
||||||
return;
|
return;
|
||||||
|
@ -345,7 +346,7 @@ module.exports = React.createClass({
|
||||||
// toggle the level
|
// toggle the level
|
||||||
var newLevel = this.state.isTargetMod ? defaultLevel : modLevel;
|
var newLevel = this.state.isTargetMod ? defaultLevel : modLevel;
|
||||||
this.setState({ updating: this.state.updating + 1 });
|
this.setState({ updating: this.state.updating + 1 });
|
||||||
MatrixClientPeg.get().setPowerLevel(roomId, target, parseInt(newLevel), powerLevelEvent).then(
|
this.props.matrixClient.setPowerLevel(roomId, target, parseInt(newLevel), powerLevelEvent).then(
|
||||||
function() {
|
function() {
|
||||||
// NO-OP; rely on the m.room.member event coming down else we could
|
// NO-OP; rely on the m.room.member event coming down else we could
|
||||||
// get out of sync if we force setState here!
|
// get out of sync if we force setState here!
|
||||||
|
@ -372,7 +373,7 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
_applyPowerChange: function(roomId, target, powerLevel, powerLevelEvent) {
|
_applyPowerChange: function(roomId, target, powerLevel, powerLevelEvent) {
|
||||||
this.setState({ updating: this.state.updating + 1 });
|
this.setState({ updating: this.state.updating + 1 });
|
||||||
MatrixClientPeg.get().setPowerLevel(roomId, target, parseInt(powerLevel), powerLevelEvent).then(
|
this.props.matrixClient.setPowerLevel(roomId, target, parseInt(powerLevel), powerLevelEvent).then(
|
||||||
function() {
|
function() {
|
||||||
// NO-OP; rely on the m.room.member event coming down else we could
|
// NO-OP; rely on the m.room.member event coming down else we could
|
||||||
// get out of sync if we force setState here!
|
// get out of sync if we force setState here!
|
||||||
|
@ -393,7 +394,7 @@ module.exports = React.createClass({
|
||||||
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||||
var roomId = this.props.member.roomId;
|
var roomId = this.props.member.roomId;
|
||||||
var target = this.props.member.userId;
|
var target = this.props.member.userId;
|
||||||
var room = MatrixClientPeg.get().getRoom(roomId);
|
var room = this.props.matrixClient.getRoom(roomId);
|
||||||
var self = this;
|
var self = this;
|
||||||
if (!room) {
|
if (!room) {
|
||||||
this.props.onFinished();
|
this.props.onFinished();
|
||||||
|
@ -407,7 +408,7 @@ module.exports = React.createClass({
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (powerLevelEvent.getContent().users) {
|
if (powerLevelEvent.getContent().users) {
|
||||||
var myPower = powerLevelEvent.getContent().users[MatrixClientPeg.get().credentials.userId];
|
var myPower = powerLevelEvent.getContent().users[this.props.matrixClient.credentials.userId];
|
||||||
if (parseInt(myPower) === parseInt(powerLevel)) {
|
if (parseInt(myPower) === parseInt(powerLevel)) {
|
||||||
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
||||||
Modal.createDialog(QuestionDialog, {
|
Modal.createDialog(QuestionDialog, {
|
||||||
|
@ -459,7 +460,7 @@ module.exports = React.createClass({
|
||||||
muted: false,
|
muted: false,
|
||||||
modifyLevel: false
|
modifyLevel: false
|
||||||
};
|
};
|
||||||
var room = MatrixClientPeg.get().getRoom(member.roomId);
|
var room = this.props.matrixClient.getRoom(member.roomId);
|
||||||
if (!room) {
|
if (!room) {
|
||||||
return defaultPerms;
|
return defaultPerms;
|
||||||
}
|
}
|
||||||
|
@ -469,7 +470,7 @@ module.exports = React.createClass({
|
||||||
if (!powerLevels) {
|
if (!powerLevels) {
|
||||||
return defaultPerms;
|
return defaultPerms;
|
||||||
}
|
}
|
||||||
var me = room.getMember(MatrixClientPeg.get().credentials.userId);
|
var me = room.getMember(this.props.matrixClient.credentials.userId);
|
||||||
if (!me) {
|
if (!me) {
|
||||||
return defaultPerms;
|
return defaultPerms;
|
||||||
}
|
}
|
||||||
|
@ -534,7 +535,7 @@ module.exports = React.createClass({
|
||||||
var avatarUrl = this.props.member.user ? this.props.member.user.avatarUrl : this.props.member.events.member.getContent().avatar_url;
|
var avatarUrl = this.props.member.user ? this.props.member.user.avatarUrl : this.props.member.events.member.getContent().avatar_url;
|
||||||
if(!avatarUrl) return;
|
if(!avatarUrl) return;
|
||||||
|
|
||||||
var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(avatarUrl);
|
var httpUrl = this.props.matrixClient.mxcUrlToHttp(avatarUrl);
|
||||||
var ImageView = sdk.getComponent("elements.ImageView");
|
var ImageView = sdk.getComponent("elements.ImageView");
|
||||||
var params = {
|
var params = {
|
||||||
src: httpUrl,
|
src: httpUrl,
|
||||||
|
@ -582,17 +583,17 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
var startChat, kickButton, banButton, muteButton, giveModButton, spinner;
|
var startChat, kickButton, banButton, muteButton, giveModButton, spinner;
|
||||||
if (this.props.member.userId !== MatrixClientPeg.get().credentials.userId) {
|
if (this.props.member.userId !== this.props.matrixClient.credentials.userId) {
|
||||||
const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
|
const dmRoomMap = new DMRoomMap(this.props.matrixClient);
|
||||||
const dmRooms = dmRoomMap.getDMRoomsForUserId(this.props.member.userId);
|
const dmRooms = dmRoomMap.getDMRoomsForUserId(this.props.member.userId);
|
||||||
|
|
||||||
const RoomTile = sdk.getComponent("rooms.RoomTile");
|
const RoomTile = sdk.getComponent("rooms.RoomTile");
|
||||||
|
|
||||||
const tiles = [];
|
const tiles = [];
|
||||||
for (const roomId of dmRooms) {
|
for (const roomId of dmRooms) {
|
||||||
const room = MatrixClientPeg.get().getRoom(roomId);
|
const room = this.props.matrixClient.getRoom(roomId);
|
||||||
if (room) {
|
if (room) {
|
||||||
const me = room.getMember(MatrixClientPeg.get().credentials.userId);
|
const me = room.getMember(this.props.matrixClient.credentials.userId);
|
||||||
const highlight = (
|
const highlight = (
|
||||||
room.getUnreadNotificationCount('highlight') > 0 ||
|
room.getUnreadNotificationCount('highlight') > 0 ||
|
||||||
me.membership == "invite"
|
me.membership == "invite"
|
||||||
|
@ -709,4 +710,4 @@ module.exports = React.createClass({
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
|
|
Loading…
Reference in a new issue